@basic-ui/material 0.1.15 → 1.0.0-alpha.0

package/src/Button/ButtonGroup.story.tsx

@@ -0,0 +1,106 @@
+import { Box } from '../Box';
+import { Button } from './Button';
+import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
+
+export default { title: 'components/ButtonGroup' };
+
+const Example = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+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>
+  );
+};
+
+export const ButtonGroup = () => <Example />;
+export const ButtonGroupPressable = () => <Pressable />;

package/src/Button/ButtonGroup.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, useMemo } from 'react';
+import { ButtonProps } from './Button';
+import { ButtonGroupContext, ButtonGroupContextProps } from './context';
+
+export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      variant = 'text',
+      direction = 'row',
+      ...otherProps
+    } = props;
+
+    const value: ButtonGroupContextProps = useMemo(
+      () => ({ direction, variant }),
+      [direction, variant]
+    );
+
+    return (
+      <ButtonGroupContext.Provider value={value}>
+        <Comp
+          ref={forwardedRef}
+          role="group"
+          data-button-group=""
+          data-button-group-direction={direction}
+          {...otherProps}
+        />
+      </ButtonGroupContext.Provider>
+    );
+  }
+);

package/src/Button/FilledButton.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { readableColor } from 'polished';
+import { readableColor, rem } from 'polished';
 import { BaseButton } from './BaseButton';
 import { Theme } from '../theme';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { alpha, getBackgroundOverlay } from '../color';
 import { get, css } from '@styled-system/css';
 
 export const FilledButton = styled(BaseButton)(
@@ -21,13 +21,46 @@ export const FilledButton = styled(BaseButton)(
         backgroundBlendMode: 'overlay',
         cursor: 'default',
       },
+      '&:focus-visible': {
+        outlineColor: get(theme, `colors.${String(color)}`) || color,
+        outlineWidth: 2,
+        outlineStyle: 'auto',
+        outlineOffset: '2px',
+      },
     }),
   ({ color = 'primary', elevation = 'none', theme }) =>
     color === 'surface' && {
-      ...getDarkThemeBackgroundOverlay(
+      ...getBackgroundOverlay(
         theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0)
+        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),
+        'primary'
       ),
+    },
+  ({ 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),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
     }
 );
 
@@ -36,5 +69,6 @@ export function getRippleProperties(theme: Theme) {
     hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),
     focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),
     pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),
+    rippleEnabled: false,
   };
 }

package/src/Button/FloatingActionButton.tsx

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

package/src/Button/IconButton.tsx

@@ -5,5 +5,6 @@ export function getRippleProperties(theme: Theme) {
   return {
     ...filledButtonGetProperties(theme),
     center: true,
+    rippleEnabled: true,
   };
 }

package/src/Button/OutlinedButton.tsx

@@ -8,11 +8,39 @@ export const OutlinedButton = styled(TransparentButton)(
   css({
     borderStyle: 'solid',
     borderWidth: rem(1),
-    borderColor: alpha('on.surface', 0.12),
+    borderColor: 'outline',
+    boxShadow: 0,
+    '&:focus,:&active,:&hover': { boxShadow: 0 },
+    '&:focus-visible,&:active': {
+      borderColor: 'currentColor',
+    },
     '&:disabled': {
       color: alpha('on.surface', 0.38),
       borderColor: alpha('on.surface', 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),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
+    }
 );

package/src/Button/SpinnerButton.story.tsx

@@ -54,7 +54,7 @@ const Example = ({ vertical = false }) => {
         display: 'inline-flex',
         alignItems: 'center',
         flexDirection: vertical ? 'column-reverse' : 'row',
-        borderRadius: '4px',
+        borderRadius: 'full',
         '&:focus': {
           outline: 'none',
           boxShadow: `0px 0px 10px 0px ${alpha('primary', 0.6)(theme)}`,

package/src/Button/TransparentButton.tsx

@@ -4,6 +4,7 @@ import { BaseButton } from './BaseButton';
 import { Theme } from '../theme';
 import { css } from '@styled-system/css';
 import { alpha } from '../color';
+import { rem } from 'polished';
 
 export const TransparentButton = styled(BaseButton)(
   ({ theme, color = 'primary' }) =>
@@ -14,7 +15,36 @@ export const TransparentButton = styled(BaseButton)(
         color: alpha('on.surface', 0.38),
         cursor: 'default',
       },
-    })
+      '&:focus-visible': {
+        outline: 'none',
+      },
+    }),
+  ({ theme, color = 'primary', isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        borderColor:
+          get(theme, `colors.${String(color)}`) ||
+          (typeof color === 'string' ? 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),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
+    }
 );
 
 export function getRippleProperties(theme: Theme) {
@@ -22,5 +52,6 @@ export function getRippleProperties(theme: Theme) {
     hoverOpacity: get(theme, `buttons.overlays.transparent.hover.opacity`),
     focusOpacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
     pressedOpacity: get(theme, `buttons.overlays.transparent.pressed.opacity`),
+    rippleEnabled: false,
   };
 }

package/src/Button/context.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import type { ButtonProps } from './Button';
+
+// ButtonGroup Component
+export type ButtonGroupContextProps = {
+  variant?: ButtonProps['variant'];
+  direction?: 'row' | 'column';
+};
+
+export const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(
+  null
+);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+
+export const useButtonGroupContext = (): ButtonGroupContextProps | null =>
+  useContext(ButtonGroupContext);

package/src/Button/index.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './ButtonGroup';

package/src/CheckBox/CheckBox.tsx

@@ -98,7 +98,7 @@ const CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(
               outline: 'none',
             },
             border: 'none',
-            borderRadius: '50%',
+            borderRadius: 'full',
             zIndex: 1,
             position: 'absolute',
             ...__css,

package/src/Chip/ButtonChip.tsx

@@ -3,25 +3,26 @@ import type * as React from 'react';
 import { ChipBaseProps, ChipBase } from './ChipBase';
 import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { Box } from '../Box';
 import { rem } from 'polished';
 
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
   disabled?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
   function ButtonChip(props, forwardedRef) {
     const {
-      as = 'button',
+      as = 'div',
       onClick,
       disabled: disabledProp,
-      leftIcon,
-      rightIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      color = 'surface',
+      __css,
       ...otherProps
     } = props;
 
@@ -30,60 +31,53 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
 
     return (
       <ChipBase
-        as="label"
+        as="div"
         onClick={isClickable ? onClick : undefined}
         disabled={disabledProp}
+        color="on.surface"
+        backgroundColor="surface"
+        __css={__css}
         {...otherProps}
       >
-        <Box
-          as="span"
+        <RippleBox
+          as={as}
+          role={isClickable ? 'button' : undefined}
+          tabIndex={isClickable ? 0 : undefined}
+          theme={theme}
+          ref={forwardedRef}
+          rippleColor={'currentColor'}
+          baseOpacity={0}
+          hoverOpacity={0.12}
+          focusOpacity={0.24}
+          center={false}
+          disabled={!isClickable}
+          aria-disabled={!isClickable}
           __css={{
+            bg: 'transparent',
+            color: 'inherit',
+            padding: `0`,
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
+            gap: rem(8),
             width: '100%',
+            minWidth: 'auto',
             height: '100%',
+            appearance: 'none',
+            ':focus': {
+              outline: 'none',
+            },
             border: 'none',
+            borderRadius: 0,
+            position: 'relative',
             display: 'inline-flex',
             alignItems: 'center',
-            justifyContent: 'center',
+            cursor: isClickable ? 'pointer' : 'default',
           }}
         >
-          <RippleBox
-            as={as}
-            theme={theme}
-            ref={forwardedRef}
-            rippleColor={'currentColor'}
-            baseOpacity={0}
-            hoverOpacity={0.12}
-            focusOpacity={0.24}
-            center={false}
-            disabled={!isClickable}
-            aria-disabled={!isClickable}
-            __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-              appearance: 'none',
-              ':focus': {
-                outline: 'none',
-              },
-              border: 'none',
-              borderRadius: 0,
-              position: 'absolute',
-              color: 'inherit',
-              cursor: isClickable ? 'pointer' : 'default',
-            }}
-          />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" __css={{ minWidth: 'auto', whiteSpace: 'nowrap' }}>
-            {children}
-          </Box>
-          <Box as="span" pl={rem(6)} pr={rem(6)}>
-            {rightIcon}
-          </Box>
-        </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
+        </RippleBox>
       </ChipBase>
     );
   }

package/src/Chip/Chip.story.tsx

@@ -12,15 +12,14 @@ export default {
 
 const CloseIcon = (props) => (
   <Box
+    role="button"
+    tabIndex={0}
     display="flex"
     width={20}
     height={20}
-    borderRadius="50%"
     alignItems="center"
     justifyContent="center"
     sx={{
-      bg: alpha('on.surface', 0.24),
-      color: alpha('surface', 0.6),
       '& > svg': { display: 'block' },
     }}
   >
@@ -39,11 +38,12 @@ const LeftIcon = ({ color }) => (
     display="flex"
     width={24}
     height={24}
-    borderRadius="50%"
+    borderRadius="full"
     alignItems="center"
     justifyContent="center"
     bg={color}
     color={`on.${color}`}
+    ml="-4px"
   >
     L
   </Box>
@@ -59,34 +59,38 @@ const Example = ({ variant, color = 'default' }) => {
       <Text variant="h6" mb={2}>
         Variant: {variant}, Color: {color}
       </Text>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           Non clickable
         </Text>
-        <Chip variant={variant}>Buy now</Chip>
-        <Chip variant={variant}>Close door</Chip>
-        <Chip variant={variant} disabled>
+        <Chip variant={variant} color={color}>
+          Buy now
+        </Chip>
+        <Chip variant={variant} color={color}>
+          Close door
+        </Chip>
+        <Chip variant={variant} disabled color={color}>
           Nothing
         </Chip>
       </Box>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           Button
         </Text>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           John
         </Chip>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           Max
         </Chip>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           Jane
         </Chip>
-        <Chip variant={variant} onClick={noop} disabled>
+        <Chip variant={variant} onClick={noop} disabled color={color}>
           Off
         </Chip>
       </Box>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           CheckBox
         </Text>
@@ -103,7 +107,12 @@ const Example = ({ variant, color = 'default' }) => {
           Disabled
         </ChoiceChip>
       </Box>
-      <RadioGroup name={`test-radio-${variant}-${color}`} my={2}>
+      <RadioGroup
+        name={`test-radio-${variant}-${color}`}
+        my={2}
+        display="flex"
+        sx={{ gap: 2 }}
+      >
         <Text as="span" mr={2}>
           RadioGroup
         </Text>
@@ -126,21 +135,21 @@ const Example = ({ variant, color = 'default' }) => {
           Disabled
         </ChoiceChip>
       </RadioGroup>
-      <Box my={2} display="flex">
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           With icons
         </Text>
         <Chip variant={variant}>Hello please</Chip>
-        <Chip variant={variant} leftIcon={<LeftIcon color={color} />}>
+        <Chip variant={variant} leadingIcon={<LeftIcon color={color} />}>
           Hello please
         </Chip>
-        <Chip variant={variant} rightIcon={<CloseIcon />}>
+        <Chip variant={variant} trailingIcon={<CloseIcon />}>
           Hello please
         </Chip>
         <Chip
           variant={variant}
-          leftIcon={<LeftIcon color={color} />}
-          rightIcon={<CloseIcon />}
+          leadingIcon={<LeftIcon color={color} />}
+          trailingIcon={<CloseIcon />}
         >
           Hello please
         </Chip>
@@ -192,26 +201,39 @@ export const HorizontallyScrollableExample = () => {
           borderColor: '#aeaeae',
           borderWidth: '1px',
           borderStyle: 'solid',
+          scrollbarWidth: 'none',
+          MsOverflowStyle: 'none',
+          '::-webkit-scrollbar': {
+            display: 'none',
+          },
         }}
       >
-        <Box
+        <RadioGroup
           sx={{
             px: 3,
             display: 'flex',
             minWidth: 'auto',
-            width: 'auto',
-            scrollbarWidth: 'none',
-            '& > :not(first-of-type)': {
+            overflow: 'visible',
+            '& > :not(:first-of-type)': {
               marginLeft: 2,
             },
           }}
         >
           {texts.map((text) => (
             <Box key={text} sx={{ minWidth: 'auto' }}>
-              <Chip key={text}>{text}</Chip>
+              <ChoiceChip
+                type="radio"
+                value={text}
+                key={text}
+                onClick={() => {
+                  /* noop */
+                }}
+              >
+                {text}
+              </ChoiceChip>
             </Box>
           ))}
-        </Box>
+        </RadioGroup>
       </Box>
       <Box>
         <LoremIpsum count={20} />