Fix generated Button class names (#2341)

.changeset/three-eggs-happen.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the generated classnames for the button components.

packages/circuit-ui/components/Button/Button.tsx

@@ -30,7 +30,7 @@ import {
   SharedButtonProps,
   createButtonComponent,
   legacyButtonSizeMap,
-} from './shared.js';
+} from './base.js';
 
 export type ButtonProps = SharedButtonProps & {
   /**

packages/circuit-ui/components/Button/IconButton.tsx

@@ -32,7 +32,7 @@ import {
   createButtonComponent,
   legacyButtonSizeMap,
   type SharedButtonProps,
-} from './shared.js';
+} from './base.js';
 import classes from './IconButton.module.css';
 
 export type IconButtonProps = SharedButtonProps & {

packages/circuit-ui/components/Button/shared.spec.tsx → packages/circuit-ui/components/Button/base.spec.tsx

@@ -18,7 +18,7 @@ import { createRef } from 'react';
 
 import { render, axe, userEvent, screen } from '../../util/test-utils.js';
 
-import { SharedButtonProps, createButtonComponent } from './shared.js';
+import { SharedButtonProps, createButtonComponent } from './base.js';
 
 const Button = createButtonComponent<SharedButtonProps>(
   'TestButton',

packages/circuit-ui/components/Button/shared.tsx → packages/circuit-ui/components/Button/base.tsx

@@ -31,7 +31,7 @@ import {
 import utilityClasses from '../../styles/utility.js';
 import { clsx } from '../../styles/clsx.js';
 
-import classes from './shared.module.css';
+import classes from './base.module.css';
 
 type LinkElProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;
 type ButtonElProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;

packages/circuit-ui/components/Button/index.ts

@@ -18,6 +18,6 @@ import { Button } from './Button.js';
 export type { ButtonProps } from './Button.js';
 export { IconButton } from './IconButton.js';
 export type { IconButtonProps } from './IconButton.js';
-export { legacyButtonSizeMap } from './shared.js';
+export { legacyButtonSizeMap } from './base.js';
 
 export default Button;

packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.tsx.snap

@@ -95,34 +95,34 @@ exports[`Sidebar > should render and match snapshot when open 1`] = `
     data-testid="sidebar-backdrop"
   />
   <button
-    class="_base_60a0b0 _secondary_60a0b0 _m_60a0b0 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-2"
+    class="_base_93e8a6 _secondary_93e8a6 _m_93e8a6 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-2"
     data-testid="sidebar-close-button"
     title="Close sidebar"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="_loader_60a0b0"
+      class="_loader_93e8a6"
     >
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
         class="_hide-visually_73b4bb"
       />
     </span>
     <span
-      class="_content_60a0b0"
+      class="_content_93e8a6"
     >
       <svg
         aria-hidden="true"
-        class="_leading-icon_60a0b0"
+        class="_leading-icon_93e8a6"
         fill="none"
         height="24"
         viewBox="0 0 24 24"
@@ -135,7 +135,7 @@ exports[`Sidebar > should render and match snapshot when open 1`] = `
         />
       </svg>
       <span
-        class="_label_60a0b0"
+        class="_label_93e8a6"
       >
         Close sidebar
       </span>
@@ -222,34 +222,34 @@ exports[`Sidebar > should render and match the snapshot when closed 1`] = `
     data-testid="sidebar-backdrop"
   />
   <button
-    class="_base_60a0b0 _secondary_60a0b0 _m_60a0b0 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-2"
+    class="_base_93e8a6 _secondary_93e8a6 _m_93e8a6 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-2"
     data-testid="sidebar-close-button"
     title="Close sidebar"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="_loader_60a0b0"
+      class="_loader_93e8a6"
     >
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
-        class="_dot_60a0b0"
+        class="_dot_93e8a6"
       />
       <span
         class="_hide-visually_73b4bb"
       />
     </span>
     <span
-      class="_content_60a0b0"
+      class="_content_93e8a6"
     >
       <svg
         aria-hidden="true"
-        class="_leading-icon_60a0b0"
+        class="_leading-icon_93e8a6"
         fill="none"
         height="24"
         viewBox="0 0 24 24"
@@ -262,7 +262,7 @@ exports[`Sidebar > should render and match the snapshot when closed 1`] = `
         />
       </svg>
       <span
-        class="_label_60a0b0"
+        class="_label_93e8a6"
       >
         Close sidebar
       </span>

packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap

@@ -19,33 +19,33 @@ exports[`CloseButton > styles > should render and match snapshot when not visibl
 }
 
 <button
-  class="_base_60a0b0 _secondary_60a0b0 _m_60a0b0 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-0"
+  class="_base_93e8a6 _secondary_93e8a6 _m_93e8a6 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-0"
   title="Close"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="_loader_60a0b0"
+    class="_loader_93e8a6"
   >
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
       class="_hide-visually_73b4bb"
     />
   </span>
   <span
-    class="_content_60a0b0"
+    class="_content_93e8a6"
   >
     <svg
       aria-hidden="true"
-      class="_leading-icon_60a0b0"
+      class="_leading-icon_93e8a6"
       fill="none"
       height="24"
       viewBox="0 0 24 24"
@@ -58,7 +58,7 @@ exports[`CloseButton > styles > should render and match snapshot when not visibl
       />
     </svg>
     <span
-      class="_label_60a0b0"
+      class="_label_93e8a6"
     >
       Close
     </span>
@@ -87,33 +87,33 @@ exports[`CloseButton > styles > should render and match snapshot when visible 1`
 }
 
 <button
-  class="_base_60a0b0 _secondary_60a0b0 _m_60a0b0 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-0"
+  class="_base_93e8a6 _secondary_93e8a6 _m_93e8a6 _focus-visible_73b4bb _base_037c7e _m_037c7e _base_9bf092 circuit-0"
   title="Close"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="_loader_60a0b0"
+    class="_loader_93e8a6"
   >
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
-      class="_dot_60a0b0"
+      class="_dot_93e8a6"
     />
     <span
       class="_hide-visually_73b4bb"
     />
   </span>
   <span
-    class="_content_60a0b0"
+    class="_content_93e8a6"
   >
     <svg
       aria-hidden="true"
-      class="_leading-icon_60a0b0"
+      class="_leading-icon_93e8a6"
       fill="none"
       height="24"
       viewBox="0 0 24 24"
@@ -126,7 +126,7 @@ exports[`CloseButton > styles > should render and match snapshot when visible 1`
       />
     </svg>
     <span
-      class="_label_60a0b0"
+      class="_label_93e8a6"
     >
       Close
     </span>

packages/circuit-ui/vite.config.ts

@@ -27,25 +27,32 @@ import {
 
 export const css: UserConfig['css'] = {
   modules: {
-    generateScopedName(name, file) {
-      const parts = ['cui'];
+    generateScopedName(className, file) {
+      const prefix = 'cui';
+      const parts = [prefix];
 
       const filePath = file.split('?')[0];
       const fileName = path.basename(filePath, '.module.css');
+      const folderName = last(path.dirname(filePath).split(path.sep));
       const isComponent = filePath.includes('/components');
 
       if (isComponent) {
-        const componentName = fileName.toLowerCase();
+        // ./components/Button/Button.module.css -> button
+        // ./components/Button/base.module.css -> button
+        const componentName =
+          fileName !== 'base'
+            ? fileName.toLowerCase()
+            : folderName.toLowerCase();
         parts.push(componentName);
       }
 
-      if (name !== 'base') {
-        parts.push(name);
+      if (className !== 'base') {
+        parts.push(className);
       }
 
       const hash = crypto
         .createHash('md5')
-        .update(`${filePath}${name}`)
+        .update(`${filePath}${className}`)
         .digest('base64url')
         // Remove non-word characters and underscores
         .replace(/[\W_]/g, '')
@@ -60,6 +67,10 @@ export const css: UserConfig['css'] = {
   },
 };
 
+function last<T>(collection: T[]): T {
+  return collection[collection.length - 1];
+}
+
 export default defineConfig({
   css,
   build: {