Merge pull request #28511 from backstage/canon-class-renaming

Canon - Renaming all component class names

packages/canon/report.api.md

@@ -80,6 +80,8 @@ export interface ButtonProps {
   // (undocumented)
   children: React.ReactNode;
   // (undocumented)
+  className?: string;
+  // (undocumented)
   disabled?: boolean;
   // (undocumented)
   iconEnd?: IconNames;
@@ -271,6 +273,10 @@ export interface HeadingProps {
   // (undocumented)
   children: React.ReactNode;
   // (undocumented)
+  className?: string;
+  // (undocumented)
+  style?: React.CSSProperties;
+  // (undocumented)
   variant?:
     | 'display'
     | 'title1'
@@ -319,6 +325,8 @@ export type IconNames =
 export type IconProps = {
   name: IconNames;
   size?: number;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
 // @public (undocumented)
@@ -488,6 +496,8 @@ export interface TextProps {
   // (undocumented)
   children: ReactNode;
   // (undocumented)
+  className?: string;
+  // (undocumented)
   style?: CSSProperties;
   // (undocumented)
   variant?:

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/components/Container/Container.tsx

@@ -16,6 +16,7 @@
 import React, { forwardRef } from 'react';
 import { ContainerProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import clsx from 'clsx';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
@@ -25,13 +26,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
     // Generate utility class names
     const utilityClassNames = getClassNames(restProps);
 
-    // Combine the base class name, the sprinkles class name, and any additional class names
-    const classNames = ['canon-container', utilityClassNames, className]
-      .filter(Boolean)
-      .join(' ');
-
     return (
-      <div ref={ref} className={classNames} style={style}>
+      <div
+        ref={ref}
+        className={clsx('canon-Container', utilityClassNames, className)}
+        style={style}
+      >
         {children}
       </div>
     );

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

@@ -1,5 +1,5 @@
-.canon-container {
-  max-width: var(--canon-container-max-width);
+.canon-Container {
+  max-width: 75rem;
+  padding: 0 1rem;
   margin: 0 auto;
-  padding: 0 var(--canon-container-padding);
 }

packages/canon/src/components/Grid/Grid.tsx

@@ -17,6 +17,7 @@
 import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import clsx from 'clsx';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
@@ -30,13 +31,9 @@ const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
 
   const utilityClassNames = getClassNames({ gap, columns, ...restProps });
 
-  const classNames = ['canon-grid', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement('div', {
     ref,
-    className: classNames,
+    className: clsx('canon-Grid', utilityClassNames, className),
     style,
     children,
   });
@@ -47,13 +44,9 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
 
   const utilityClassNames = getClassNames(restProps);
 
-  const classNames = ['grid-item', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement('div', {
     ref,
-    className: classNames,
+    className: clsx('canon-GridItem', utilityClassNames, className),
     style,
     children,
   });

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

@@ -1,3 +1,3 @@
-.canon-grid {
+.canon-Grid {
   display: grid;
 }

packages/canon/src/components/Heading/Heading.tsx

@@ -19,11 +19,18 @@
 import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
 import { useCanon } from '../../contexts/canon';
+import clsx from 'clsx';
 
 /** @public */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
-    const { children, variant = 'title1', as = 'h1', ...restProps } = props;
+    const {
+      children,
+      variant = 'title1',
+      as = 'h1',
+      className,
+      ...restProps
+    } = props;
     const { getResponsiveValue } = useCanon();
 
     // Get the responsive value for the variant
@@ -40,10 +47,12 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     return (
       <Component
         ref={ref}
+        className={clsx(
+          'canon-Heading',
+          responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
+          className,
+        )}
         {...restProps}
-        className={`text ${
-          responsiveVariant ? `text-${responsiveVariant}` : ''
-        }`}
       >
         {children}
       </Component>

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

@@ -14,45 +14,40 @@
  * limitations under the License.
  */
 
-.text {
+.canon-Heading {
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
+  line-height: 100%;
   padding: 0;
   margin: 0;
-
-  &.text-display {
-    font-size: var(--canon-font-size-display);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title1 {
-    font-size: var(--canon-font-size-title1);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title2 {
-    font-size: var(--canon-font-size-title2);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title3 {
-    font-size: var(--canon-font-size-title3);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title4 {
-    font-size: var(--canon-font-size-title4);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title5 {
-    font-size: var(--canon-font-size-title5);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
+}
+
+.canon-Heading--variant-display {
+  font-size: var(--canon-font-size-display);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title1 {
+  font-size: var(--canon-font-size-title1);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title2 {
+  font-size: var(--canon-font-size-title2);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title3 {
+  font-size: var(--canon-font-size-title3);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title4 {
+  font-size: var(--canon-font-size-title4);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title5 {
+  font-size: var(--canon-font-size-title5);
+  font-weight: var(--canon-font-weight-bold);
 }

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

@@ -33,4 +33,6 @@ export interface HeadingProps {
         >
       >;
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
+  style?: React.CSSProperties;
 }

packages/canon/src/components/Icon/Icon.tsx

@@ -19,18 +19,25 @@
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';
+import clsx from 'clsx';
 
 /** @public */
 export const Icon = (props: IconProps) => {
-  const { name, size = 16 } = props;
+  const { name, size = 16, className, style, ...restProps } = props;
   const { icons } = useCanon();
 
-  const RemixIcon = icons[name] as React.ComponentType<{ className?: string }>;
+  const CanonIcon = icons[name] as React.ComponentType<Omit<IconProps, 'name'>>;
 
-  if (!RemixIcon) {
+  if (!CanonIcon) {
     console.error(`Icon "${name}" not found or is not a valid component.`);
     return <svg />; // Return a default icon or handle the error appropriately
   }
 
-  return <RemixIcon className={`icon-${size}`} />;
+  return (
+    <CanonIcon
+      className={clsx('canon-Icon', className)}
+      style={{ width: size, height: size, ...style }}
+      {...restProps}
+    />
+  );
 };

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

@@ -14,17 +14,7 @@
  * limitations under the License.
  */
 
-.icon-12 {
-  width: 12px;
-  height: 12px;
-}
-
-.icon-16 {
-  width: 16px;
-  height: 16px;
-}
-
-.icon-24 {
-  width: 24px;
-  height: 24px;
+.canon-Icon {
+  width: 1rem;
+  height: 1rem;
 }

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

@@ -44,4 +44,6 @@ export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
 export type IconProps = {
   name: IconNames;
   size?: number;
+  className?: string;
+  style?: React.CSSProperties;
 };

packages/canon/src/components/Inline/Inline.tsx

@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
 import type { InlineProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
 import { JustifyContent, Breakpoint, AlignItems } from '../../types';
+import clsx from 'clsx';
 
 // Function to map align values
 const mapAlignValue = (value?: InlineProps['align']) => {
@@ -75,14 +76,9 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
     ...restProps,
   });
 
-  // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-inline', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement(as, {
     ref,
-    className: classNames,
+    className: clsx('canon-Inline', utilityClassNames, className),
     style,
     children,
   });

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

@@ -1,4 +1,20 @@
-.canon-inline {
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.canon-Inline {
   display: flex;
   flex-wrap: wrap;
 }

packages/canon/src/components/Stack/Stack.tsx

@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
 import type { AlignItems, Breakpoint } from '../../types';
+import clsx from 'clsx';
 
 // Function to map align values
 const mapAlignValue = (value?: StackProps['align']) => {
@@ -56,14 +57,9 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
     ...restProps,
   });
 
-  // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-stack', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement(as, {
     ref,
-    className: classNames,
+    className: clsx('canon-Stack', utilityClassNames, className),
     style,
     children,
   });

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

@@ -1,4 +1,20 @@
-.canon-stack {
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.canon-Stack {
   display: flex;
   flex-direction: column;
 }

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

@@ -16,12 +16,6 @@
   }
 }
 
-.table-header {
-  tr {
-    /* border-bottom: 1px solid var(--canon-border); */
-  }
-}
-
 .table-head {
   text-align: left;
   padding: var(--canon-spacing-xs);

packages/canon/src/components/Text/Text.tsx

@@ -19,7 +19,7 @@
 import React, { forwardRef } from 'react';
 import { TextProps } from './types';
 import { useCanon } from '../../contexts/canon';
-
+import clsx from 'clsx';
 /** @public */
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
@@ -28,6 +28,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
       variant = 'body',
       weight = 'regular',
       style,
+      className,
       ...restProps
     } = props;
 
@@ -40,9 +41,12 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     return (
       <p
         ref={ref}
-        className={`text ${
-          responsiveVariant ? `text-${responsiveVariant}` : ''
-        } ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
+        className={clsx(
+          'canon-Text',
+          responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
+          responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
+          className,
+        )}
         style={style}
         {...restProps}
       >

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

@@ -14,37 +14,37 @@
  * limitations under the License.
  */
 
-.text {
+.canon-Text {
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
   padding: 0;
   margin: 0;
-
-  &.text-body {
-    font-size: var(--canon-font-size-body);
-    line-height: 140%;
-  }
-
-  &.text-subtitle {
-    font-size: var(--canon-font-size-subtitle);
-    line-height: 140%;
-  }
-
-  &.text-caption {
-    font-size: var(--canon-font-size-caption);
-    line-height: 140%;
-  }
-
-  &.text-label {
-    font-size: var(--canon-font-size-label);
-    line-height: 140%;
-  }
-
-  &.text-regular {
-    font-weight: var(--canon-font-weight-regular);
-  }
-
-  &.text-bold {
-    font-weight: var(--canon-font-weight-bold);
-  }
+}
+
+.canon-Text--variant-body {
+  font-size: var(--canon-font-size-body);
+  line-height: 140%;
+}
+
+.canon-Text--variant-subtitle {
+  font-size: var(--canon-font-size-subtitle);
+  line-height: 140%;
+}
+
+.canon-Text--variant-caption {
+  font-size: var(--canon-font-size-caption);
+  line-height: 140%;
+}
+
+.canon-Text--variant-label {
+  font-size: var(--canon-font-size-label);
+  line-height: 140%;
+}
+
+.canon-Text--weight-regular {
+  font-weight: var(--canon-font-weight-regular);
+}
+
+.canon-Text--weight-bold {
+  font-weight: var(--canon-font-weight-bold);
 }

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

@@ -27,5 +27,6 @@ export interface TextProps {
     | 'label'
     | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
   weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+  className?: string;
   style?: CSSProperties;
 }

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';

packages/canon/src/css/core.css

@@ -66,10 +66,6 @@
   --canon-border-radius-xl: 1.25rem; /* 20px */
   --canon-border-radius-2xl: 1.5rem; /* 24px */
 
-  /* Container */
-  --canon-container-max-width: 1200px;
-  --canon-container-padding: 1rem;
-
   /* Colors */
   --canon-accent: #000;
   --canon-background: #f8f8f8;