@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/src/Button/ButtonGroup.story.tsx

@@ -1,76 +1,272 @@
-import { Box } from '../Box';
+import { useState } from 'react';
+
 import { Button } from './Button';
 import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
+import { Box } from '../Box';
+
+export default { title: 'components/Button' };
+
+const colors = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'primary-container',
+  'secondary-container',
+  'tertiary-container',
+  'error-container',
+] as const;
+
+type Color = typeof colors[number];
+type ControlShape = 'default' | 'rounded' | 'square';
+type ControlSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const PressableButton = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof Button>) => {
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <Button
+      {...props}
+      aria-pressed={pressed}
+      onClick={() => setPressed((prev) => !prev)}
+    >
+      {children}
+    </Button>
+  );
+};
 
-export default { title: 'components/ButtonGroup' };
+export const ButtonGroup = ({
+  variant = 'standard',
+  pressable = false,
+  color = 'primary',
+  shape = 'default',
+  size = 'default',
+}: {
+  variant?: 'standard' | 'connected';
+  pressable?: boolean;
+  color?: Color;
+  shape?: ControlShape;
+  size?: ControlSize;
+}) => {
+  const ButtonImpl = pressable ? PressableButton : Button;
+  const resolvedShape = shape === 'default' ? undefined : shape;
+  const resolvedSize = size === 'default' ? undefined : size;
 
-const Example = () => {
   return (
-    <Box sx={{ gap: 24, flexDirection: 'row', display: 'flex' }}>
-      {(['text', 'filled', 'outlined'] as const).map((variant) => (
+    <Box display="flex" flexDirection="row" sx={{ gap: 4 }}>
+      {(['text', 'filled', 'outlined'] as const).map((buttonVariant) => (
         <Box
-          sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}
-          key={variant}
+          display="flex"
+          flexDirection="column"
+          sx={{ gap: 4 }}
+          key={buttonVariant}
         >
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
 
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
 
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
 
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button disabled>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
 
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button disabled>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button>Hello</Button>
-            <Button disabled>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button>Hello</Button>
-            <Button disabled>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
-          <BaseButtonGroup variant={variant}>
-            <Button disabled>Hello</Button>
-            <Button disabled>Hello</Button>
-            <Button>Hello</Button>
+          <BaseButtonGroup variant={variant} buttonVariant={buttonVariant}>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl
+              disabled
+              size={resolvedSize}
+              shape={resolvedShape}
+              color={color}
+            >
+              Hello
+            </ButtonImpl>
+            <ButtonImpl size={resolvedSize} shape={resolvedShape} color={color}>
+              Hello
+            </ButtonImpl>
           </BaseButtonGroup>
         </Box>
       ))}
@@ -78,54 +274,20 @@ const Example = () => {
   );
 };
 
-const Pressable = () => {
-  return (
-    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-    </Box>
-  );
+ButtonGroup.args = {
+  variant: 'standard',
+  pressable: false,
+  color: 'primary',
+  shape: 'default',
+  size: 'default',
+};
+ButtonGroup.argTypes = {
+  variant: { control: 'inline-radio', options: ['standard', 'connected'] },
+  pressable: { control: 'boolean' },
+  color: { control: 'select', options: colors },
+  shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
+  size: {
+    control: 'inline-radio',
+    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+  },
 };
-
-export const ButtonGroup = () => <Example />;
-export const ButtonGroupPressable = () => <Pressable />;

package/src/Button/ButtonGroup.tsx

@@ -1,32 +1,128 @@
 import { forwardRef, useMemo } from 'react';
+import { rem } from 'polished';
 
-import type { ButtonProps } from './Button';
 import type { ButtonGroupContextProps } from './context';
 import { ButtonGroupContext } from './context';
+import { Box, type BoxProps } from '../Box';
 
-export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
+export type ButtonGroupProps = BoxProps & ButtonGroupContextProps;
+
+function getButtonGroupVariant(variant: ButtonGroupProps['variant']) {
+  if (
+    variant !== 'standard' &&
+    variant !== 'connected' &&
+    variant !== 'split'
+  ) {
+    console.warn(
+      `Invalid ButtonGroup variant: ${variant}. Expected 'standard', 'connected', or 'split'. Defaulting to 'standard'.`
+    );
+    return 'standard';
+  }
+  return variant;
+}
 
 export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   function ButtonGroup(props, forwardedRef) {
     const {
-      as: Comp = 'div',
-      variant = 'text',
+      as = 'div',
+      buttonVariant = 'filled',
+      variant: variantProp = 'standard',
       direction = 'row',
+      connected = false,
       ...otherProps
     } = props;
+    const variant = getButtonGroupVariant(variantProp);
 
     const value: ButtonGroupContextProps = useMemo(
-      () => ({ direction, variant }),
-      [direction, variant]
+      () => ({ direction, variant, buttonVariant, connected }),
+      [direction, variant, buttonVariant, connected]
     );
 
     return (
       <ButtonGroupContext.Provider value={value}>
-        <Comp
+        <Box
+          as={as}
           ref={forwardedRef}
           role="group"
+          __css={{
+            display: 'flex',
+            flexDirection: direction,
+            gap: variant === 'standard' ? 2 : rem(2),
+            ...(variant === 'standard'
+              ? {
+                  '[data-button-grouped=""]': {
+                    '--btn-inner-radius': 'var(--btn-standard-inner-radius)',
+                    borderRadius: 'var(--btn-pill-radius)',
+                  },
+                  '[data-button-grouped=""][data-button-shape="square"], [data-button-grouped=""][aria-pressed="true"]':
+                    {
+                      borderRadius: 'var(--btn-inner-radius)',
+                    },
+                  '[data-button-grouped=""][data-button-shape="square"][aria-pressed="true"]':
+                    {
+                      borderRadius: 'var(--btn-pill-radius)',
+                    },
+                }
+              : {
+                  '[data-button-grouped=""]': {
+                    '--btn-inner-radius':
+                      variant === 'connected'
+                        ? 'var(--btn-connected-inner-radius)'
+                        : 'var(--btn-split-inner-radius)',
+                    borderRadius: 'var(--btn-inner-radius)',
+                  },
+                  '[data-button-grouped=""]:first-of-type': {
+                    borderTopLeftRadius: 'var(--btn-pill-radius)',
+                    borderBottomLeftRadius: 'var(--btn-pill-radius)',
+                  },
+                  '[data-button-grouped=""]:last-of-type': {
+                    borderTopRightRadius: 'var(--btn-pill-radius)',
+                    borderBottomRightRadius: 'var(--btn-pill-radius)',
+                  },
+                  '[data-button-grouped=""][data-button-shape="square"]': {
+                    borderRadius: 'var(--btn-inner-radius)',
+                  },
+                  '[data-button-grouped=""][aria-pressed="true"]': {
+                    borderRadius: 'var(--btn-pill-radius)',
+                  },
+                  '[data-split-menu-button=""]': {
+                    '&[data-button-size="xs"], &[data-button-size="sm"]': {
+                      pl: rem(12),
+                      pr: rem(14),
+                      '&[aria-expanded="true"]': { px: rem(13) },
+                      '& svg': { width: rem(22), height: rem(22) },
+                    },
+                    '&[data-button-size="md"]': {
+                      pl: rem(13),
+                      pr: rem(17),
+                      '&[aria-expanded="true"]': { px: rem(15) },
+                      '& svg': { width: rem(26), height: rem(26) },
+                    },
+                    '&[data-button-size="lg"]': {
+                      pl: rem(26),
+                      pr: rem(32),
+                      '&[aria-expanded="true"]': { px: rem(29) },
+                      '& svg': { width: rem(38), height: rem(38) },
+                    },
+                    '&[data-button-size="xl"]': {
+                      pl: rem(37),
+                      pr: rem(50),
+                      '&[aria-expanded="true"]': { px: rem(43) },
+                      '& svg': { width: rem(49), height: rem(49) },
+                    },
+                    '&[aria-expanded="true"]': {
+                      borderRadius: 'var(--btn-pill-radius)',
+                    },
+                    '&[aria-expanded="true"] > svg': {
+                      transform: 'rotate(180deg)',
+                      transition: 'transform 200ms',
+                    },
+                  },
+                }),
+          }}
           data-button-group=""
           data-button-group-direction={direction}
+          data-button-group-variant={variant}
           {...otherProps}
         />
       </ButtonGroupContext.Provider>

package/src/Button/FilledButton.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { readableColor, rem } from 'polished';
+import { readableColor } from 'polished';
 import { get, css } from '@styled-system/css';
 
 import { BaseButton } from './BaseButton';
@@ -31,48 +31,7 @@ export const FilledButton = styled(BaseButton)(
     }),
   ({ color = 'primary' }) =>
     color === 'surface' &&
-    css({ background: mixColor('surface', 'primary', 0.05) }),
-  ({ color = 'primary', theme, isGroupedButton = false }) =>
-    isGroupedButton && {
-      '[data-button-group=""] &': {
-        borderColor:
-          get(theme, `colors.on.${String(color)}`) ||
-          (typeof color === 'string' ? readableColor(color) : undefined),
-        ':first-of-type': {
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-          borderRightStyle: 'solid',
-          borderRightWidth: rem(1),
-        },
-        ':not(:first-of-type):not(:last-of-type)': {
-          borderRadius: 0,
-        },
-        ':last-of-type': {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderLeftStyle: 'solid',
-          borderLeftWidth: rem(1),
-        },
-        // Handling the border between enabled/disabled buttons
-        ':not(:disabled):has(+ :disabled)': {
-          borderRightWidth: rem(1),
-          borderRightStyle: 'solid',
-        },
-        ':disabled + :not(:disabled)': {
-          borderLeftWidth: rem(1),
-          borderLeftStyle: 'solid',
-        },
-        ':not(:disabled) + :disabled': {
-          borderLeftWidth: rem(0),
-        },
-        ':disabled:has(+ :not(:disabled))': {
-          borderRightWidth: rem(0),
-        },
-        ':last-of-type:nth-of-type(2)': {
-          borderLeftWidth: rem(0),
-        },
-      },
-    }
+    css({ background: mixColor('surface', 'primary', 0.05) })
 );
 
 export function getRippleProperties(theme: Theme) {

package/src/Button/FloatingActionButton.tsx

@@ -1,9 +1,14 @@
-import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import type { Theme } from '../theme';
-
-export function getRippleProperties(theme: Theme) {
-  return {
-    ...filledButtonGetProperties(theme),
-    rippleEnabled: true,
-  };
-}
+import {
+  FilledButton,
+  getRippleProperties as filledButtonGetProperties,
+} from './FilledButton';
+import type { Theme } from '../theme';
+
+export const FloatingActionButton = FilledButton as typeof FilledButton;
+
+export function getRippleProperties(theme: Theme) {
+  return {
+    ...filledButtonGetProperties(theme),
+    rippleEnabled: true,
+  };
+}

package/src/Button/IconFilledButton.tsx

@@ -0,0 +1,3 @@
+import { FilledButton } from './FilledButton';
+
+export const IconFilledButton = FilledButton as typeof FilledButton;

package/src/Button/IconOutlinedButton.tsx

@@ -0,0 +1,3 @@
+import { OutlinedButton } from './OutlinedButton';
+
+export const IconOutlinedButton = OutlinedButton as typeof OutlinedButton;

package/src/Button/OutlinedButton.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { css } from '@styled-system/css';
-import { rem } from 'polished';
 
 import { alpha } from '../color';
 import { TransparentButton } from './TransparentButton';
@@ -8,7 +7,7 @@ import { TransparentButton } from './TransparentButton';
 export const OutlinedButton = styled(TransparentButton)(
   css({
     borderStyle: 'solid',
-    borderWidth: rem(1),
+    borderWidth: '1px',
     borderColor: 'outline',
     boxShadow: 0,
     '&:focus,:&active,:&hover': { boxShadow: 0 },
@@ -20,43 +19,5 @@ export const OutlinedButton = styled(TransparentButton)(
       borderColor: alpha('outline', 0.12),
       cursor: 'default',
     },
-  }),
-  ({ isGroupedButton = false }) =>
-    isGroupedButton && {
-      '[data-button-group=""] &': {
-        ':first-of-type': {
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-        },
-        ':not(:first-of-type):not(:last-of-type)': {
-          borderRadius: 0,
-          borderRightWidth: 0,
-          borderLeftWidth: 0,
-        },
-        ':last-of-type': {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderLeftStyle: 'solid',
-          borderLeftWidth: rem(1),
-        },
-        // Handling the border between enabled/disabled buttons
-        ':not(:disabled):has(+ :disabled)': {
-          borderRightWidth: rem(1),
-          borderRightStyle: 'solid',
-        },
-        ':disabled + :not(:disabled)': {
-          borderLeftWidth: rem(1),
-          borderLeftStyle: 'solid',
-        },
-        ':not(:disabled) + :disabled': {
-          borderLeftWidth: rem(0),
-        },
-        ':disabled:has(+ :not(:disabled))': {
-          borderRightWidth: rem(0),
-        },
-        ':last-of-type:nth-of-type(2)': {
-          borderLeftWidth: rem(0),
-        },
-      },
-    }
+  })
 );