Renaming Box, Button & Checkbox

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Box/Box.tsx

@@ -17,6 +17,7 @@
 import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import clsx from 'clsx';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
@@ -26,9 +27,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const utilityClassNames = getClassNames(restProps);
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-box', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
+  const classNames = clsx('canon-Box', utilityClassNames, className);
 
   return createElement(as, {
     ref,

packages/canon/src/components/Box/styles.css

@@ -1,4 +1,4 @@
-.canon-box {
-  font-family: 'var(--canon-font-regular)';
-  color: 'var(--canon-text-primary)';
+.canon-Box {
+  font-family: var(--canon-font-regular);
+  color: var(--canon-text-primary);
 }

packages/canon/src/components/Button/Button.tsx

@@ -20,6 +20,7 @@ import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import { ButtonProps } from './types';
 import { useCanon } from '../../contexts/canon';
+import clsx from 'clsx';
 
 /** @public */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -31,6 +32,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconStart,
       iconEnd,
       children,
+      className,
       style,
       ...rest
     } = props;
@@ -46,17 +48,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...rest}
         ref={ref}
         disabled={disabled}
-        className={[
-          'cn-button',
-          `cn-button-${responsiveSize}`,
-          `cn-button-${responsiveVariant}`,
-        ].join(' ')}
+        className={clsx(
+          'canon-Button',
+          `canon-Button--size-${responsiveSize}`,
+          `canon-Button--variant-${responsiveVariant}`,
+          className,
+        )}
         style={style}
       >
         <span
           className={[
-            'cn-button-content',
-            iconStart && iconEnd ? 'cn-button-content-icon-both' : '',
+            'canon-Button--content',
+            iconStart && iconEnd ? 'canon-Button--icon-start-end' : '',
           ]
             .filter(Boolean)
             .join(' ')}

packages/canon/src/components/Button/styles.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.cn-button {
+.canon-Button {
   all: unset;
   display: inline-flex;
   align-items: center;
@@ -29,7 +29,7 @@
   border-radius: 8px;
 }
 
-.cn-button-primary {
+.canon-Button--variant-primary {
   background-color: var(--canon-accent);
   color: var(--canon-text-primary-on-accent);
 
@@ -40,7 +40,7 @@
   }
 }
 
-.cn-button-secondary {
+.canon-Button--variant-secondary {
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--canon-border-base);
   color: var(--canon-text-primary);
@@ -50,7 +50,7 @@
   }
 }
 
-.cn-button-tertiary {
+.canon-Button--variant-tertiary {
   background-color: transparent;
   color: var(--canon-text-primary);
 
@@ -59,25 +59,25 @@
   }
 }
 
-.cn-button-small {
+.canon-Button--size-small {
   padding-left: 6px;
   padding-right: 6px;
   height: 32px;
 }
 
-.cn-button-medium {
+.canon-Button--size-medium {
   padding-left: 8px;
   padding-right: 8px;
   height: 40px;
 }
 
-.cn-button-content {
+.canon-Button--content {
   display: flex;
   align-items: center;
   gap: var(--canon-spacing-xs);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.cn-button-content-icon-both {
+.canon-Button--icon-start-end {
   flex: 1;
 }

packages/canon/src/components/Button/types.ts

@@ -28,6 +28,7 @@ export interface ButtonProps {
     | 'tertiary'
     | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
   children: React.ReactNode;
+  className?: string;
   disabled?: boolean;
   iconStart?: IconNames;
   iconEnd?: IconNames;

packages/canon/src/components/Checkbox/Checkbox.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
 import { Icon } from '@backstage/canon';
 import type { CheckboxProps } from './types';
+import clsx from 'clsx';
 
 /** @public */
 export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
@@ -37,7 +38,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
     const checkboxElement = (
       <CheckboxPrimitive.Root
         ref={ref}
-        className={`checkbox ${className}`}
+        className={clsx('canon-CheckboxRoot', className)}
         checked={checked}
         onCheckedChange={onChange}
         disabled={disabled}
@@ -46,14 +47,14 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
         value={value}
         style={style}
       >
-        <CheckboxPrimitive.Indicator className="checkbox-indicator">
+        <CheckboxPrimitive.Indicator className="canon-CheckboxIndicator">
           <Icon name="check" size={12} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     );
 
     return label ? (
-      <label className="checkbox-label">
+      <label className="canon-CheckboxLabel">
         {checkboxElement}
         {label}
       </label>

packages/canon/src/components/Checkbox/styles.css

@@ -1,22 +1,4 @@
-.checkbox-label {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--canon-spacing-xs);
-  font-size: var(--canon-font-size-xs);
-  font-family: var(--canon-font-regular);
-  color: var(--canon-text-primary);
-  user-select: none;
-
-  &:hover {
-    & .checkbox {
-      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
-    }
-  }
-}
-
-.checkbox {
+.canon-CheckboxRoot {
   all: unset;
   display: flex;
   align-items: center;
@@ -33,7 +15,25 @@
   }
 }
 
-.checkbox-indicator {
+.canon-checkboxLabel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--canon-spacing-xs);
+  font-size: var(--canon-font-size-xs);
+  font-family: var(--canon-font-regular);
+  color: var(--canon-text-primary);
+  user-select: none;
+
+  &:hover {
+    & .canon-CheckboxRoot {
+      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
+    }
+  }
+}
+
+.canon-CheckboxIndicator {
   display: flex;
   align-items: center;
   justify-content: center;

packages/canon/src/css/components.css

@@ -15,6 +15,7 @@
  */
 
 /* Components */
+@import '../components/Box/styles.css';
 @import '../components/Button/styles.css';
 @import '../components/Stack/styles.css';
 @import '../components/Inline/styles.css';