fix: correctly scope checkboxes and radios in classy to avoid conflicts

system/core/scripts/generateComponents.ts

@@ -314,9 +314,10 @@ class CssComponentBuilder extends ComponentBuilder {
     const propsType = omitVariants ? 'Omit<Props, "data-variant">' : 'Props';
     const props = this.buildProps(fixedPropsArg);
     const classNameProp = props.find(({ key }) => key === 'className');
-    const append: string[] = [
-      `className: ${classNameProp ? `'${classNameProp.value}'` : 'undefined'}`
-    ];
+    if (!classNameProp) {
+      throw new Error(`Missing className prop for ${displayName || varName}`);
+    }
+    const append: string[] = [`className: '${classNameProp.value}'`];
     const additionalProps = props.filter(({ key }) => key !== 'className');
     if (additionalProps.length) {
       append.push(

system/core/src/components/Checkbox.ts

@@ -2,6 +2,7 @@ import { OptionalKeys, css } from '../utils';
 
 export const element = 'input';
 export const selectors = ['input[type="checkbox"]:not(.toggle)'];
+export const className = 'checkbox';
 
 export interface Props {
   type: 'checkbox';

system/core/src/components/InputWithIcons.ts

@@ -78,7 +78,7 @@ export const fullStyles = css`
   & > [data-mode='input-append'] {
     height: calc(var(--tk-input-height) - var(--tk-input-border-width) * 2);
     width: calc(
-      var(--tk-input-icon-size)+ var(--tk-input-icon-gap)+
+      var(--tk-input-icon-size) + var(--tk-input-icon-gap) +
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;

system/core/src/components/InputWithPrefix.ts

@@ -86,7 +86,7 @@ export const fullStyles = css`
     grid-area: 1/4/1/5;
     height: calc(var(--tk-input-height) - var(--tk-input-border-width) * 2);
     width: calc(
-      var(--tk-input-icon-size)+ var(--tk-input-icon-gap)+
+      var(--tk-input-icon-size) + var(--tk-input-icon-gap) +
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;

system/core/src/components/Radio.ts

@@ -2,6 +2,7 @@ import { OptionalKeys, css } from '../utils';
 
 export const element = 'input';
 export const selectors = ['input[type="radio"]:not(.toggle)'];
+export const className = 'radio';
 
 export interface Props {
   type: 'radio';

system/core/src/components/TextAreaWithIcons.ts

@@ -97,7 +97,7 @@ export const fullStyles = css`
   & > [data-mode='input-append'] {
     height: calc(var(--tk-input-height) - var(--tk-input-border-width) * 2);
     width: calc(
-      var(--tk-input-icon-size)+ var(--tk-input-icon-gap)+
+      var(--tk-input-icon-size) + var(--tk-input-icon-gap) +
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;

system/core/src/components/TextAreaWithPrefix.ts

@@ -102,7 +102,7 @@ export const fullStyles = css`
     grid-area: 1/4/1/5;
     height: calc(var(--tk-input-height) - var(--tk-input-border-width) * 2);
     width: calc(
-      var(--tk-input-icon-size)+ var(--tk-input-icon-gap)+
+      var(--tk-input-icon-size) + var(--tk-input-icon-gap) +
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;

system/css/src/buildFile.ts

@@ -140,7 +140,12 @@ export class ComponentBuilder extends CssFileBuilder<ComponentFileContent> {
 
   getClassySelectors() {
     const { element, className, selectors = [] } = this.fileContent;
-    if (!className) return selectors;
+    if (!className) {
+      console.warn(
+        `className is missing in ${this.folderName}/${this.fileName}`
+      );
+      return selectors;
+    }
     if (element === 'input') return [`input.${className}`];
     return [`.${className}`];
   }

system/react-css/src/components/Checkbox.tsx

@@ -16,6 +16,6 @@ export const Checkbox = buildWithComponent<
 >({
   tag: 'input',
   displayName: 'Checkbox',
-  className: undefined,
+  className: 'checkbox',
   additionalProps: { type: checkbox.defaultProps.type as never }
 });

system/react-css/src/components/Radio.tsx

@@ -16,6 +16,6 @@ export const Radio = buildWithComponent<
 >({
   tag: 'input',
   displayName: 'Radio',
-  className: undefined,
+  className: 'radio',
   additionalProps: { type: radio.defaultProps.type as never }
 });

system/react-css/src/components/Tooltip.tsx

@@ -0,0 +1,15 @@
+/**
+ * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core
+ * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder
+ */
+import { tooltip } from '@tablecheck/tablekit-core';
+import * as React from 'react';
+
+import { buildWithComponent } from '../utils';
+
+export type Props = tooltip.Props & React.HTMLAttributes<HTMLSpanElement>;
+
+export const Tooltip = buildWithComponent<
+  HTMLSpanElement,
+  Props & React.HTMLAttributes<HTMLSpanElement>
+>({ tag: 'span', displayName: 'Tooltip', className: 'tooltip' });

system/react-css/src/index.ts

@@ -65,6 +65,8 @@ export { TextAreaWithSuffix } from './components/TextAreaWithSuffix';
 export type { Props as TextAreaWithSuffixProps } from './components/TextAreaWithSuffix';
 export { Toggle } from './components/Toggle';
 export type { Props as ToggleProps } from './components/Toggle';
+export { Tooltip } from './components/Tooltip';
+export type { Props as TooltipProps } from './components/Tooltip';
 export {
   AlertCore,
   AlertTitle,
@@ -100,5 +102,3 @@ export {
   useTablekitTheme,
   ThemeProvider
 } from './structuredComponents/ThemeProvider';
-export { Tooltip } from './structuredComponents/Tooltip';
-export type { Props as TooltipProps } from './structuredComponents/Tooltip';