launchdarkly · Niznikr · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
diff --git a/.changeset/quick-rockets-sit.md 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
diff --git 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/__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();
   });

diff --git 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
@@ -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
@@ -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
@@ -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 → packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.css → 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;
@@ -371,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);
 }
 
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;