LG-4658: Compact Button

.changeset/mean-gorillas-dance.md

@@ -0,0 +1,10 @@
+---
+'@leafygreen-ui/confirmation-modal': patch
+'@lg-chat/message-feedback': patch
+'@leafygreen-ui/number-input': patch
+'@leafygreen-ui/split-button': patch
+'@leafygreen-ui/form-footer': patch
+'@leafygreen-ui/code': patch
+---
+
+Omitting `compact` Button prop when passing through props

.changeset/perfect-birds-smell.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/button': minor
+---
+
+Adds a `compact` prop enabling less padded and square glyph-only buttons

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts

@@ -23,7 +23,7 @@ export type InlineMessageFeedbackProps = Required<
     /**
      * Override props for the cancel Button
      */
-    cancelButtonProps?: ButtonProps;
+    cancelButtonProps?: Omit<ButtonProps, 'compact'>;
 
     /**
      * Text displayed inside the submit Button
@@ -35,7 +35,7 @@ export type InlineMessageFeedbackProps = Required<
     /**
      * Override props for the submit Button
      */
-    submitButtonProps?: ButtonProps;
+    submitButtonProps?: Omit<ButtonProps, 'compact'>;
 
     /**
      * Event handler called when the form is submitted

packages/button/src/Button.stories.tsx

@@ -35,6 +35,7 @@ const meta: StoryMetaType<typeof Button> = {
         leftGlyph: [undefined, <Icon glyph={'Cloud'} />],
         children: ['MongoDB', undefined],
         variant: Object.values(Variant),
+        compact: [undefined, true],
       },
       excludeCombinations: [
         {
@@ -47,6 +48,10 @@ const meta: StoryMetaType<typeof Button> = {
           leftGlyph: <Icon glyph={'Cloud'} />,
           children: undefined,
         },
+        {
+          children: 'MongoDB',
+          compact: true,
+        },
       ],
     },
   },
@@ -56,6 +61,7 @@ const meta: StoryMetaType<typeof Button> = {
     leftGlyph: undefined,
     rightGlyph: undefined,
     baseFontSize: BaseFontSize.Body1,
+    compact: false,
   },
   argTypes: {
     ...filteredStorybookArgTypes,
@@ -82,6 +88,11 @@ const meta: StoryMetaType<typeof Button> = {
       options: Object.values(Size),
       defaultValue: Size.Default,
     },
+    compact: {
+      description: 'Show the button with less horizontal padding. Note: Cannot be used with `children`',
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
     href: {
       control: 'text',
     },

packages/button/src/Button/Button.spec.tsx

@@ -316,5 +316,10 @@ describe('packages/button', () => {
     test('accepts a component as `as`', () => {
       <Button as={() => <>JSX</>} />;
     });
+
+    test('rejects children when compact', () => {
+      // @ts-expect-error - Cannot use compact with children
+      <Button compact>MongoDB</Button>;
+    });
   });
 });

packages/button/src/Button/Button.tsx

@@ -20,6 +20,7 @@ export const Button = React.forwardRef(function Button(
   {
     variant = Variant.Default,
     size = Size.Default,
+    compact = false,
     darkMode: darkModeProp,
     'data-lgid': dataLgId = LGIDS_BUTTON.root,
     baseFontSize = BaseFontSize.Body1,
@@ -77,11 +78,18 @@ export const Button = React.forwardRef(function Button(
     isLoading,
     loadingIndicator,
     loadingText,
+    // Never pass children when compact
+    ...compact ? {
+      compact: true
+    } : {
+      compact: false,
+      children,
+    } as const
   } as const;
 
   return (
     <Box {...buttonProps}>
-      <ButtonContent {...contentProps}>{children}</ButtonContent>
+      <ButtonContent {...contentProps} />
     </Box>
   );
 });

packages/button/src/ButtonContent/ButtonContent.styles.ts

@@ -77,6 +77,28 @@ export const buttonContentSizeStyle: Record<Size, string> = {
   `,
 };
 
+export const buttonContentCompactSizeStyle: Partial<Record<Size, string>> = {
+  [Size.XSmall]: css`
+    padding: 0 3px; // 4px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Small]: css`
+    padding: 0 5px; // 6px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Default]: css`
+    padding: 0 9px; // 10px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Large]: css`
+    padding: 0 13px; // 14px - 1px border
+    gap: 8px;
+  `,
+};
+
 export const centeredSpinnerContainerStyles = css`
   position: absolute;
 `;

packages/button/src/ButtonContent/ButtonContent.tsx

@@ -5,6 +5,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { registerRipple } from '@leafygreen-ui/ripple';
 
 import {
+  buttonContentCompactSizeStyle,
   buttonContentSizeStyle,
   buttonContentStyle,
   buttonSpinnerSize,
@@ -28,6 +29,7 @@ export const ButtonContent = (props: ButtonContentProps) => {
     disabled,
     variant,
     size,
+    compact,
     isLoading,
     loadingText,
     loadingIndicator,
@@ -69,7 +71,7 @@ export const ButtonContent = (props: ButtonContentProps) => {
     return (
       <>
         <div
-          className={cx(buttonContentStyle, buttonContentSizeStyle[size], {
+          className={cx(buttonContentStyle, compact ? buttonContentCompactSizeStyle[size] : buttonContentSizeStyle[size], {
             [centeredSpinnerContainerStyles]: !loadingText,
           })}
         >

packages/button/src/ButtonContent/DefaultContent.tsx

@@ -5,6 +5,7 @@ import { cx } from '@leafygreen-ui/emotion';
 import ButtonIcon from '../ButtonIcon/ButtonIcon';
 
 import {
+  buttonContentCompactSizeStyle,
   buttonContentSizeStyle,
   buttonContentStyle,
   darkModeRightGlyphStyles,
@@ -24,6 +25,7 @@ const DefaultContent = ({
   children,
   variant,
   size,
+  compact,
   darkMode,
   disabled,
 }: DefaultContentProps) => {
@@ -33,7 +35,7 @@ const DefaultContent = ({
     <div
       className={cx(
         buttonContentStyle,
-        buttonContentSizeStyle[size],
+        compact ? buttonContentCompactSizeStyle[size] : buttonContentSizeStyle[size],
         {
           [darkModeRightGlyphStyles]: !!rightGlyph && darkMode,
         },

packages/button/src/types.ts

@@ -36,7 +36,7 @@ export const FontSize = {
 
 export type FontSize = (typeof FontSize)[keyof typeof FontSize];
 
-export interface ButtonProps extends LgIdProps {
+export interface BaseButtonProps extends LgIdProps {
   // Would prefer to use Pick<> to extract these properties, but they would not be correctly imported into Storybook otherwise.
   // https://github.com/storybookjs/storybook/issues/14798
 
@@ -94,11 +94,6 @@ export interface ButtonProps extends LgIdProps {
    */
   size?: Size;
 
-  /**
-   * The content that will appear inside of the `<Button />` component.
-   */
-  children?: React.ReactNode;
-
   /**
    * An icon glyph rendered before the button text.
    * To use a custom icon, see {@link Icon} {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs
@@ -149,4 +144,42 @@ export interface ButtonProps extends LgIdProps {
    * @default button
    */
   as?: React.ElementType<any>;
+
+  /**
+   * Show the button with less horizontal padding.
+   * Note: Cannot be used with `children`.
+   *
+   * @default false
+   */
+  compact?: boolean;
 }
+
+type ConstrainedButtonProps = {
+  /**
+   * Show the button with less horizontal padding.
+   * Note: Cannot be used with `children`.
+   *
+   * @default false
+   */
+  compact: true;
+
+  /**
+   * Cannot pass `children` when `compact`.
+   */
+  children?: never;
+} | {
+  /**
+   * Show the button with less horizontal padding.
+   * Note: Cannot be used with `children`.
+   *
+   * @default false
+   */
+  compact?: false;
+
+  /**
+   * The content that will appear inside of the `<Button />` component.
+   */
+  children?: React.ReactNode;
+};
+
+export type ButtonProps = BaseButtonProps & ConstrainedButtonProps;

packages/code/src/CustomSelectMenuButton/CustomSelectMenuButton.tsx

@@ -9,10 +9,8 @@ import Button, { ButtonProps } from '@leafygreen-ui/button';
  * @internal
  */
 export const CustomSelectMenuButton = React.forwardRef(
-  ({ children, ...props }: ButtonProps, ref) => (
-    <Button {...props} ref={ref}>
-      {children}
-    </Button>
+  (props: ButtonProps, ref) => (
+    <Button {...props} ref={ref} />
   ),
 );
 

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts

@@ -11,9 +11,9 @@ export type Variant = (typeof Variant)[keyof typeof Variant];
 interface CustomButtonOnClick {
   onClick?: () => void;
 }
-type CustomConfirmButtonProps = Omit<ButtonProps, 'variant' | 'onClick'> &
+type CustomConfirmButtonProps = Omit<ButtonProps, 'variant' | 'onClick' | 'compact'> &
   CustomButtonOnClick;
-type CustomCancelButtonProps = Omit<ButtonProps, 'onClick' | 'children'> &
+type CustomCancelButtonProps = Omit<ButtonProps, 'onClick' | 'children' | 'compact'> &
   CustomButtonOnClick;
 
 export interface ConfirmationModalProps extends Omit<ModalProps, 'size'> {

packages/form-footer/src/FormFooter.types.ts

@@ -3,14 +3,14 @@ import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
 import { PrimaryButtonProps } from './PrimaryButton';
 
-type ButtonPropsOmittingVariant = Omit<ButtonProps, 'variant'>;
+type ButtonPropsOmittingVariantAndCompact = Omit<ButtonProps, 'variant' | 'compact'>;
 type ButtonPropsWithRequiredChildren = Required<Pick<ButtonProps, 'children'>>;
 
-export type CustomCancelButtonProps = ButtonPropsOmittingVariant;
-export type CustomBackButtonProps = ButtonPropsOmittingVariant & {
+export type CustomCancelButtonProps = ButtonPropsOmittingVariantAndCompact;
+export type CustomBackButtonProps = ButtonPropsOmittingVariantAndCompact & {
   variant?: Extract<Variant, 'default' | 'dangerOutline'>;
 };
-export type CustomPrimaryButtonProps = ButtonPropsOmittingVariant &
+export type CustomPrimaryButtonProps = ButtonPropsOmittingVariantAndCompact &
   ButtonPropsWithRequiredChildren & {
     variant?: Extract<Variant, 'primary' | 'danger'>;
   };

packages/number-input/src/UnitSelectButton/UnitSelectButton.types.ts

@@ -12,5 +12,5 @@ export type UnitSelectButtonProps = {
    * The select option that is shown in the select menu button.
    */
   displayName?: string;
-} & ButtonProps &
+} & Omit<ButtonProps, 'compact'> &
   PopoverProps;

packages/split-button/src/SplitButton/SplitButton.types.ts

@@ -117,7 +117,7 @@ export interface MenuProps extends SelectedMenuProps {
 
 export interface SplitButtonProps
   extends DarkModeProps,
-    ButtonProps,
+    Omit<ButtonProps, 'compact'>,
     MenuProps {
   /**
    * Sets the variant for both Buttons.