From fd041fd0a2ba9ec8803f57a5e633a3b13b7e0334 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 15 Jan 2025 18:59:12 +0000
Subject: [PATCH] Renaming Box, Button & Checkbox

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/components/Box/Box.tsx     |  5 +--
 packages/canon/src/components/Box/styles.css  |  6 +--
 .../canon/src/components/Button/Button.tsx    | 17 ++++----
 .../canon/src/components/Button/styles.css    | 16 ++++----
 packages/canon/src/components/Button/types.ts |  1 +
 .../src/components/Checkbox/Checkbox.tsx      |  7 ++--
 .../canon/src/components/Checkbox/styles.css  | 40 +++++++++----------
 packages/canon/src/css/components.css         |  1 +
 8 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 020f2b6fbb..6b673abddd 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/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,
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
index a90ce578cd..c36afdbdfc 100644
--- a/packages/canon/src/components/Box/styles.css
+++ b/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);
 }
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index a186aada39..2e2371f82a 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/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(' ')}
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 7af027ddcd..c194c43970 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/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;
 }
diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts
index 96a11df84f..3e2adc84fc 100644
--- a/packages/canon/src/components/Button/types.ts
+++ b/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;
diff --git a/packages/canon/src/components/Checkbox/Checkbox.tsx b/packages/canon/src/components/Checkbox/Checkbox.tsx
index a23ccc01ce..634dc7044c 100644
--- a/packages/canon/src/components/Checkbox/Checkbox.tsx
+++ b/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>
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index c1f285f7c7..d0202b2ab0 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/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;
diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css
index bc6a7f3fe5..b84ce7702b 100644
--- a/packages/canon/src/css/components.css
+++ b/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';