From fb129a30d99ca4f1db25bff13dff6bc3c4ed17ad Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Fri, 6 Oct 2023 09:09:29 -0400
Subject: [PATCH 1/4] refactor(button): convert to css modules

---
 packages/alert/src/styles/Alert.module.css    |  4 +-
 packages/button/src/Button.tsx                | 13 +++--
 packages/button/src/ButtonGroup.tsx           |  4 +-
 packages/button/src/IconButton.tsx            | 13 +++--
 packages/button/src/UploadButton.tsx          |  7 +--
 .../styles/{Button.css => Button.module.css}  | 46 ++++++++++++++++-
 packages/button/src/styles/ButtonGroup.css    | 42 ----------------
 packages/form/src/styles/Form.module.css      |  2 +-
 .../inline-edit/src/styles/InlineEdit.css.ts  |  2 +-
 .../snackbar/src/styles/Snackbar.module.css   |  2 +-
 packages/split-button/src/SplitButton.tsx     |  4 +-
 .../split-button/src/SplitButtonDropdown.tsx  |  1 -
 .../src/SplitButtonDropdownButton.tsx         |  4 +-
 .../src/SplitButtonMainButton.tsx             |  4 +-
 ...SplitButton.css => SplitButton.module.css} | 50 +++++++++----------
 15 files changed, 96 insertions(+), 102 deletions(-)
 rename packages/button/src/styles/{Button.css => Button.module.css} (91%)
 delete mode 100644 packages/button/src/styles/ButtonGroup.css
 rename packages/split-button/src/styles/{SplitButton.css => SplitButton.module.css} (69%)

diff --git a/packages/alert/src/styles/Alert.module.css b/packages/alert/src/styles/Alert.module.css
index 4a493ca30..4cc835d87 100644
--- a/packages/alert/src/styles/Alert.module.css
+++ b/packages/alert/src/styles/Alert.module.css
@@ -41,7 +41,7 @@
   line-height: 1.25;
 }
 
-.Alert :global(.ButtonGroup) {
+.Alert :global([class*='_ButtonGroup_']) {
   margin-top: 1.2rem;
 }
 
@@ -197,7 +197,7 @@
   margin-left: auto;
 }
 
-.Alert-content :global(a:not(.Button)) {
+.Alert-content :global(a:not([class*='_Button_'])) {
   color: var(--lp-color-text-interactive-base);
 
   &:hover {
diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index f28c2f590..add7998eb 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.tsx
@@ -12,7 +12,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'classix';
 import { isValidElement, cloneElement, forwardRef, memo } from 'react';
 
-import './styles/Button.css';
+import styles from './styles/Button.module.css';
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   isLoading?: boolean;
@@ -59,11 +59,10 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
   const Component: ElementType = asChild ? Slot : 'button';
 
   const classes = cx(
-    'Button',
-    `Button--${kind}`,
-    disabled && 'Button--disabled',
-    size && `Button--${size}`,
-    fit && 'Button--fit',
+    styles.Button,
+    styles[`Button--${kind}`],
+    size && styles[`Button--${size}`],
+    fit && styles['Button--fit'],
     className
   );
 
@@ -83,7 +82,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, ref)
       key: 'icon',
       size: getIconSize(),
       'aria-hidden': true,
-      className: cx(icon.props.className, 'Button-icon'),
+      className: cx(icon.props.className, styles['Button-icon']),
     });
 
   const getFinalChildren = (c: ReactNode) => [
diff --git a/packages/button/src/ButtonGroup.tsx b/packages/button/src/ButtonGroup.tsx
index 61e6acc84..242eeafd0 100644
--- a/packages/button/src/ButtonGroup.tsx
+++ b/packages/button/src/ButtonGroup.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 import { cx } from 'classix';
 
-import './styles/ButtonGroup.css';
+import styles from './styles/Button.module.css';
 
 type ButtonGroupProps = ComponentProps<'div'> & {
   spacing?: 'compact' | 'normal' | 'large';
@@ -16,7 +16,7 @@ const ButtonGroup = ({
   'data-test-id': testId = 'button-group',
   ...rest
 }: ButtonGroupProps) => {
-  const classes = cx('ButtonGroup', `ButtonGroup--${spacing}`, className);
+  const classes = cx(styles.ButtonGroup, styles[`ButtonGroup--${spacing}`], className);
 
   return (
     <div className={classes} data-test-id={testId} {...rest}>
diff --git a/packages/button/src/IconButton.tsx b/packages/button/src/IconButton.tsx
index 8a87b7582..c91bd413a 100644
--- a/packages/button/src/IconButton.tsx
+++ b/packages/button/src/IconButton.tsx
@@ -11,7 +11,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'classix';
 import { isValidElement, cloneElement, forwardRef, memo } from 'react';
 
-import './styles/Button.css';
+import styles from './styles/Button.module.css';
 
 type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   kind?: 'default' | 'primary' | 'destructive' | 'minimal' | 'close';
@@ -41,12 +41,11 @@ const IconButtonComponent = forwardRef<HTMLButtonElement, IconButtonProps>((prop
   const Component: ElementType = asChild ? Slot : 'button';
 
   const classes = cx(
-    'IconButton',
-    'Button',
-    'Button--icon',
-    `Button--${kind}`,
-    disabled && 'Button--disabled',
-    size && `Button--${size}`,
+    styles.IconButton,
+    styles.Button,
+    styles['Button--icon'],
+    styles[`Button--${kind}`],
+    size && styles[`Button--${size}`],
     className
   );
 
diff --git a/packages/button/src/UploadButton.tsx b/packages/button/src/UploadButton.tsx
index b485bd05e..2a61587d3 100644
--- a/packages/button/src/UploadButton.tsx
+++ b/packages/button/src/UploadButton.tsx
@@ -1,7 +1,6 @@
 import type { ButtonProps } from './Button';
 import type { ChangeEventHandler, KeyboardEvent } from 'react';
 
-import { cx } from 'classix';
 import { useRef } from 'react';
 
 import { Button } from './Button';
@@ -25,7 +24,6 @@ const UploadButton = ({
   ...rest
 }: UploadButtonProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
-  const classes = cx('UploadButton', className);
 
   const handleClick = () => {
     inputRef.current?.click();
@@ -61,10 +59,9 @@ const UploadButton = ({
   };
 
   return (
-    <span className={classes} data-test-id={testId}>
+    <span className={className} data-test-id={testId}>
       <input
         ref={inputRef}
-        className="UploadButton-input"
         id={id}
         style={{ display: 'none' }}
         type="file"
@@ -73,7 +70,7 @@ const UploadButton = ({
         accept={accept}
         data-test-id="upload-button-input"
       />
-      <label htmlFor={id} className="UploadButton-label">
+      <label htmlFor={id}>
         <Button
           {...rest}
           disabled={disabled}
diff --git a/packages/button/src/styles/Button.css b/packages/button/src/styles/Button.module.css
similarity index 91%
rename from packages/button/src/styles/Button.css
rename to packages/button/src/styles/Button.module.css
index 5e2d72fca..e9003ecb6 100644
--- a/packages/button/src/styles/Button.css
+++ b/packages/button/src/styles/Button.module.css
@@ -68,8 +68,7 @@
   cursor: pointer;
 }
 
-.Button:focus-visible,
-.Dropdown-trigger:focus-visible .Button--menu {
+.Button:focus-visible {
   border-radius: var(--Button-border-radius-default);
   box-shadow: var(--Button-box-shadow-focus);
   outline: 0;
@@ -541,3 +540,46 @@
   border: none;
   color: var(--lp-color-text-interactive-disabled);
 }
+
+.ButtonGroup {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.ButtonGroup--normal {
+  gap: 1rem;
+}
+
+.ButtonGroup--large {
+  gap: 2rem;
+}
+
+.ButtonGroup--compact > .Button + .Button,
+.ButtonGroup--compact > [class*='_Popover-target_'] + .Button,
+.ButtonGroup--compact > .Button + [class*='_Popover-target_'],
+.ButtonGroup--compact > [class*='_Popover-target_'] + [class*='_Popover-target_'] {
+  margin-left: -1px;
+}
+
+.ButtonGroup--compact > .Button + [class*='_Popover-target_'],
+.ButtonGroup--compact > [class*='_Popover-target_'] + [class*='_Popover-target_'] {
+  line-height: 1;
+}
+
+.ButtonGroup--compact > .Button:not(:first-child),
+.ButtonGroup--compact > .Button:not(:last-child),
+.ButtonGroup--compact > [class*='_Popover-target_']:not(:first-child),
+.ButtonGroup--compact > [class*='_Popover-target_']:not(:last-child) {
+  border-radius: 0;
+}
+
+.ButtonGroup--compact > .Button:first-child,
+.ButtonGroup--compact > [class*='_Popover-target_']:first-child button {
+  border-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);
+}
+
+.ButtonGroup--compact > .Button:last-child,
+.ButtonGroup--compact > [class*='_Popover-target_']:last-child button {
+  border-radius: 0 var(--lp-border-radius-regular) var(--lp-border-radius-regular) 0;
+}
diff --git a/packages/button/src/styles/ButtonGroup.css b/packages/button/src/styles/ButtonGroup.css
deleted file mode 100644
index 91cf787e4..000000000
--- a/packages/button/src/styles/ButtonGroup.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.ButtonGroup {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.ButtonGroup--normal {
-  gap: 1rem;
-}
-
-.ButtonGroup--large {
-  gap: 2rem;
-}
-
-.ButtonGroup--compact > .Button + .Button,
-.ButtonGroup--compact > [class*='_Popover-target_'] + .Button,
-.ButtonGroup--compact > .Button + [class*='_Popover-target_'],
-.ButtonGroup--compact > [class*='_Popover-target_'] + [class*='_Popover-target_'] {
-  margin-left: -1px;
-}
-
-.ButtonGroup--compact > .Button + [class*='_Popover-target_'],
-.ButtonGroup--compact > [class*='_Popover-target_'] + [class*='_Popover-target_'] {
-  line-height: 1;
-}
-
-.ButtonGroup--compact > .Button:not(:first-child),
-.ButtonGroup--compact > .Button:not(:last-child),
-.ButtonGroup--compact > [class*='_Popover-target_']:not(:first-child),
-.ButtonGroup--compact > [class*='_Popover-target_']:not(:last-child) {
-  border-radius: 0;
-}
-
-.ButtonGroup--compact > .Button:first-child,
-.ButtonGroup--compact > [class*='_Popover-target_']:first-child button {
-  border-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);
-}
-
-.ButtonGroup--compact > .Button:last-child,
-.ButtonGroup--compact > [class*='_Popover-target_']:last-child button {
-  border-radius: 0 var(--lp-border-radius-regular) var(--lp-border-radius-regular) 0;
-}
diff --git a/packages/form/src/styles/Form.module.css b/packages/form/src/styles/Form.module.css
index f1be9ff96..f2b57af49 100644
--- a/packages/form/src/styles/Form.module.css
+++ b/packages/form/src/styles/Form.module.css
@@ -111,7 +111,7 @@ select.formInput {
 }
 
 .inlineForm .formGroup + .formGroup,
-.inlineForm .formGroup + :global(.Button) {
+.inlineForm .formGroup + :global([class*='_Button_']) {
   margin-left: 1rem;
 }
 
diff --git a/packages/inline-edit/src/styles/InlineEdit.css.ts b/packages/inline-edit/src/styles/InlineEdit.css.ts
index 93eb01a15..cd11d69d6 100644
--- a/packages/inline-edit/src/styles/InlineEdit.css.ts
+++ b/packages/inline-edit/src/styles/InlineEdit.css.ts
@@ -21,7 +21,7 @@ const inline = recipe({
 
 const cancelButton = style({
   selectors: {
-    '.Button--icon&': {
+    '[class*="_Button--icon_"]&': {
       height: '3rem',
       width: '3rem',
     },
diff --git a/packages/snackbar/src/styles/Snackbar.module.css b/packages/snackbar/src/styles/Snackbar.module.css
index e44bfbc48..70423fda9 100644
--- a/packages/snackbar/src/styles/Snackbar.module.css
+++ b/packages/snackbar/src/styles/Snackbar.module.css
@@ -60,6 +60,6 @@
   }
 }
 
-.Snackbar-close:global(.Button):global(.Button--close) svg {
+.Snackbar-close:global([class*='_Button_']):global([class*='_Button--close_']) svg {
   fill: var(--lp-color-gray-400);
 }
diff --git a/packages/split-button/src/SplitButton.tsx b/packages/split-button/src/SplitButton.tsx
index 2025b1701..bef3d73c8 100644
--- a/packages/split-button/src/SplitButton.tsx
+++ b/packages/split-button/src/SplitButton.tsx
@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 import { cx } from 'classix';
 
 import { SplitButtonContext } from './context';
-import './styles/SplitButton.css';
+import styles from './styles/SplitButton.module.css';
 
 type SplitButtonProps = ComponentProps<'div'> & {
   kind?: Extract<ButtonProps['kind'], 'primary' | 'default'>;
@@ -24,7 +24,7 @@ const SplitButton = ({
 }: SplitButtonProps) => {
   return (
     <SplitButtonContext.Provider value={{ disabled: !!disabled, kind, size }}>
-      <div {...rest} className={cx('SplitButton', className)} data-test-id={testId}>
+      <div {...rest} className={cx(styles.SplitButton, className)} data-test-id={testId}>
         {children}
       </div>
     </SplitButtonContext.Provider>
diff --git a/packages/split-button/src/SplitButtonDropdown.tsx b/packages/split-button/src/SplitButtonDropdown.tsx
index 14c62b763..2b2b94f4a 100644
--- a/packages/split-button/src/SplitButtonDropdown.tsx
+++ b/packages/split-button/src/SplitButtonDropdown.tsx
@@ -4,7 +4,6 @@ import { Dropdown } from '@launchpad-ui/dropdown';
 import { useContext } from 'react';
 
 import { SplitButtonContext } from './context';
-import './styles/SplitButton.css';
 
 type SplitButtonDropdownProps = Omit<
   DropdownProps<string | number | object>,
diff --git a/packages/split-button/src/SplitButtonDropdownButton.tsx b/packages/split-button/src/SplitButtonDropdownButton.tsx
index 4ec6a2e6d..399fdc2d5 100644
--- a/packages/split-button/src/SplitButtonDropdownButton.tsx
+++ b/packages/split-button/src/SplitButtonDropdownButton.tsx
@@ -5,7 +5,7 @@ import { cx } from 'classix';
 import { forwardRef, useContext, useMemo } from 'react';
 
 import { SplitButtonContext } from './context';
-import './styles/SplitButton.css';
+import styles from './styles/SplitButton.module.css';
 
 type SplitButtonDropdownButtonProps = Omit<DropdownButtonProps, 'kind' | 'size' | 'children'>;
 
@@ -38,7 +38,7 @@ const SplitButtonDropdownButton = forwardRef<HTMLButtonElement, SplitButtonDropd
       <DropdownButton
         {...rest}
         ref={ref}
-        className={cx('SplitButton-drop', className)}
+        className={cx(styles.SplitButtonDrop, className)}
         kind={kind}
         disabled={isDisabled}
         size={size}
diff --git a/packages/split-button/src/SplitButtonMainButton.tsx b/packages/split-button/src/SplitButtonMainButton.tsx
index 621fb44c7..ac1044e46 100644
--- a/packages/split-button/src/SplitButtonMainButton.tsx
+++ b/packages/split-button/src/SplitButtonMainButton.tsx
@@ -5,7 +5,7 @@ import { cx } from 'classix';
 import { forwardRef, useContext, useMemo } from 'react';
 
 import { SplitButtonContext } from './context';
-import './styles/SplitButton.css';
+import styles from './styles/SplitButton.module.css';
 
 type SplitButtonMainButtonProps = Omit<ButtonProps, 'kind' | 'size'>;
 
@@ -23,7 +23,7 @@ const SplitButtonMainButton = forwardRef<HTMLButtonElement, SplitButtonMainButto
 
     const isDisabled = parentDisabled || disabled;
 
-    const classes = cx('SplitButton-main', className);
+    const classes = cx(styles.SplitButtonMain, className);
 
     const label = useMemo(() => {
       let value;
diff --git a/packages/split-button/src/styles/SplitButton.css b/packages/split-button/src/styles/SplitButton.module.css
similarity index 69%
rename from packages/split-button/src/styles/SplitButton.css
rename to packages/split-button/src/styles/SplitButton.module.css
index 56099be62..adb26b1d4 100644
--- a/packages/split-button/src/styles/SplitButton.css
+++ b/packages/split-button/src/styles/SplitButton.module.css
@@ -5,39 +5,43 @@
     0 0 0 4px var(--lp-color-shadow-interactive-focus);
 }
 
+.SplitButtonDrop:global([class*='_Button_']) {
+  border-left-width: 1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: 0 0.8rem;
+  margin-left: -0.1rem;
+}
+
+.SplitButtonDrop:global([class*='_Button--small_']) {
+  padding: 0 0.4rem;
+}
+
+.SplitButtonMain:global([class*='_Button_']) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .SplitButton {
   align-items: flex-start;
   display: flex;
   line-height: 1;
   isolation: isolate;
 
-  & .Button--default.SplitButton-main {
+  & :global([class*='_Button--default_']).SplitButtonMain {
     --lp-component-splitbutton--color-border-primary: var(--lp-color-border-ui-primary);
   }
 
-  & .Button--primary.SplitButton-drop {
+  & :global([class*='_Button--primary_']).SplitButtonDrop {
     margin-left: 0.1rem;
   }
 }
 
-.SplitButton-drop.Button {
-  border-left-width: 1px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding: 0 0.8rem;
-  margin-left: -0.1rem;
-}
-
-.SplitButton-drop.Button > span {
+.SplitButtonDrop:global([class*='_Button_']) > span {
   line-height: 1;
 }
 
-.SplitButton-main.Button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.SplitButton-main.Button:not([disabled]) {
+.SplitButtonMain:global([class*='_Button_']):not([disabled]) {
   border-right: 1px solid var(--lp-component-splitbutton--color-border-primary);
 }
 
@@ -57,24 +61,20 @@
   z-index: 0;
 }
 
-.SplitButton-main.Button:focus-visible {
+.SplitButtonMain:global([class*='_Button_']):focus-visible {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   box-shadow: var(--lp-component-splitbutton-color-shadow-focus);
 }
 
-.SplitButton-drop.Button--small {
-  padding: 0 0.4rem;
-}
-
-.SplitButton-drop.Button:focus-visible {
+.SplitButtonDrop:global([class*='_Button_']):focus-visible {
   box-shadow: var(--lp-component-splitbutton-color-shadow-focus);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 1px;
 }
 
-.SplitButton-main.Button:active,
-.SplitButton-drop.Button:active {
+.SplitButtonMain:global([class*='_Button_']):active,
+.SplitButtonDrop:global([class*='_Button_']):active {
   box-shadow: none;
 }

From e3c6a026c71202beda6cc7f4541b26821bf322d3 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Fri, 6 Oct 2023 09:10:29 -0400
Subject: [PATCH 2/4] chore: add changeset

---
 .changeset/quick-rockets-sit.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/quick-rockets-sit.md

diff --git a/.changeset/quick-rockets-sit.md b/.changeset/quick-rockets-sit.md
new file mode 100644
index 000000000..7e4d5fa5e
--- /dev/null
+++ b/.changeset/quick-rockets-sit.md
@@ -0,0 +1,11 @@
+---
+'@launchpad-ui/split-button': patch
+'@launchpad-ui/inline-edit': patch
+'@launchpad-ui/snackbar': patch
+'@launchpad-ui/button': patch
+'@launchpad-ui/alert': patch
+'@launchpad-ui/form': patch
+'@launchpad-ui/core': patch
+---
+
+[Button, SplitButton] Convert to css modules

From 77ef308ba89466b5e10f6e4dd8bfd593ef1f3760 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Fri, 6 Oct 2023 09:29:02 -0400
Subject: [PATCH 3/4] fix: disabled icon

---
 packages/button/src/styles/Button.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.module.css
index e9003ecb6..b22f1a743 100644
--- a/packages/button/src/styles/Button.module.css
+++ b/packages/button/src/styles/Button.module.css
@@ -370,7 +370,7 @@
   border-color: var(--Button-color-border-disabled);
 }
 
-.Button[disabled] .Button-icon {
+.Button[disabled] [class*='_icon_'] {
   fill: var(--Button-icon-color-fill-disabled);
 }
 

From 32efa643f6ea5075f67647df7e0133c7be2c23fa Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Fri, 6 Oct 2023 09:41:57 -0400
Subject: [PATCH 4/4] fix: test

---
 packages/button/__tests__/ButtonGroup.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/button/__tests__/ButtonGroup.spec.tsx b/packages/button/__tests__/ButtonGroup.spec.tsx
index 40f8b3bd0..b8067a8c8 100644
--- a/packages/button/__tests__/ButtonGroup.spec.tsx
+++ b/packages/button/__tests__/ButtonGroup.spec.tsx
@@ -23,7 +23,7 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelector('.ButtonGroup--compact')).not.toBeNull();
+    expect(container.querySelector('[class*="_ButtonGroup--compact_"]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
   });
@@ -36,7 +36,7 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelector('.ButtonGroup--large')).not.toBeNull();
+    expect(container.querySelector('[class*="_ButtonGroup--large_"]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
   });