@basic-ui/material 0.1.16 → 1.0.0-alpha.10

package/src/BottomSheet/BottomSheetSurface.tsx

@@ -1,12 +1,15 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Modal as _Modal, ModalProps } from '@basic-ui/core';
-import { Paper, PaperProps } from '../Paper';
-import { useTheme } from '../theme';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
 
-const Modal = _Modal as React.FC<
-  BottomSheetSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+
+const Modal = _Modal as FC<
+  BottomSheetSurfaceProps & { ref?: Ref<HTMLDivElement> }
 >;
 
 export type BottomSheetSurfaceProps = ModalProps & PaperProps;
@@ -23,7 +26,8 @@ export const BottomSheetSurface = forwardRef<
       ref={forwardedRef}
       as={Paper}
       theme={theme}
-      elevation={24}
+      elevation={3}
+      darkThemeBackgroundOverlay={3}
       __css={{
         position: 'absolute',
         bg: 'surface',

package/src/Box/Box.tsx

@@ -1,19 +1,8 @@
+import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { CSSObject } from '@emotion/react';
+import type { CSSObject } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  compose,
-  space,
-  layout,
-  typography,
-  color,
-  flexbox,
-  border,
-  grid,
-  background,
-  position,
-  shadow,
+import type {
   SpaceProps,
   LayoutProps,
   TypographyProps,
@@ -27,13 +16,27 @@ import {
   ResponsiveValue,
 } from 'styled-system';
 import {
-  css,
-  get,
+  compose,
+  space,
+  layout,
+  typography,
+  color,
+  flexbox,
+  border,
+  grid,
+  background,
+  position,
+  shadow,
+} from 'styled-system';
+import type {
   SystemStyleObject,
   ResponsiveStyleValue,
 } from '@styled-system/css';
+import { css, get } from '@styled-system/css';
 import shouldForwardProp from '@styled-system/should-forward-prop';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 
 export type SxStyleProp =
   | SystemStyleObject
@@ -48,7 +51,7 @@ export type SxStyleProp =
     >;
 
 export interface BaseProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   sx?: SxStyleProp;
   // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
   __css?: SxStyleProp;
@@ -82,12 +85,10 @@ type KnownBoxProps = BaseProps &
 
 export type BoxProps<
   H = HTMLDivElement,
-  Attr extends React.HTMLAttributes<H> = React.HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> &
-  Partial<KnownBoxProps> &
-  React.RefAttributes<H>;
+  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
+> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
 
-const BoxBase = styled(('div' as unknown) as React.FC, {
+const BoxBase = styled('div' as unknown as FC, {
   shouldForwardProp,
 })<BoxProps<HTMLDivElement>>(
   {
@@ -114,7 +115,7 @@ const BoxBase = styled(('div' as unknown) as React.FC, {
 );
 
 export const Box: <
-  Props = BoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>
+  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
 >(
   props: Props
 ) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(

package/src/Button/BaseButton.tsx

@@ -1,15 +1,15 @@
+import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { useTheme } from '@emotion/react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface BaseButtonProps
-  extends BoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > {
+  extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {
   elevation?: string;
+  isGroupedButton?: boolean;
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
@@ -18,12 +18,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const { __css, variant: variantProp, elevation, ...otherProps } = props;
 
     return (
-      <Box<
-        BoxProps<
-          HTMLButtonElement,
-          React.ButtonHTMLAttributes<HTMLButtonElement>
-        >
-      >
+      <Box<BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>>
         as="button"
         ref={ref}
         __css={{

package/src/Button/Button.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Button } from './';
 import { Box } from '../Box';
 
@@ -16,14 +17,24 @@ const AppsIcon = (props) => (
   </svg>
 );
 
+const NavigationIcon = (props) => (
+  <svg height={48} width={48} viewBox="0 0 48 48" {...props}>
+    <path
+      fill="currentColor"
+      d="m26.35 42-5.7-14.65L6 21.65V19.5L42 6 28.5 42Zm.9-5.7 9.6-25.15-25.1 9.6 11.2 4.3Zm-4.3-11.25Z"
+    />
+  </svg>
+);
+
 const Example = (props) => {
   return (
     <Box bg="surface">
-      <Box p={3}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="filled" {...props}>
+          Filled
+        </Button>
         <Button
           variant="text"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
@@ -31,58 +42,47 @@ const Example = (props) => {
         </Button>
         <Button
           variant="outlined"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
           Outlined
         </Button>
-        <Button variant="filled" mr={2} mb={2} {...props}>
-          Unelevated
-        </Button>
-        <Button variant="filled" elevation="contained" mr={2} mb={2} {...props}>
-          Contained
+        <Button variant="filled" elevation="elevated" {...props}>
+          Elevated
         </Button>
       </Box>
-      <Box p={3}>
-        <Button variant="fab" elevation="floating" mr={2} mb={2} {...props}>
-          S
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="fab-mini" elevation="floating" {...props}>
+          <NavigationIcon width="24px" height="24px" />
         </Button>
-        <Button
-          variant="fab-mini"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
-          S
+        <Button variant="fab" elevation="floating" {...props}>
+          <NavigationIcon width="24px" height="24px" />
         </Button>
-        <Button
-          variant="fab-extended"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab-large" elevation="floating" {...props}>
+          <NavigationIcon width="36px" height="36px" />
+        </Button>
+        <Button variant="fab-extended" elevation="floating" {...props}>
+          <Box mr={2} lineHeight={0}>
+            <NavigationIcon width="24px" height="24px" />
+          </Box>
           Fab extended
         </Button>
       </Box>
-      <Box p={3}>
-        <Box bg={props.color} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color={`on.${props.color}`}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Box bg={props.color} display="inline-block">
+          <Button variant="icon" {...props} color={`on.${props.color}`}>
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Box bg={'#333'} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color="#fff">
+        <Box bg={'#333'} display="inline-block">
+          <Button variant="icon" {...props} color="#fff">
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Button variant="icon" m={1} {...props} color="on.surface">
+        <Button variant="icon" {...props} color="on.surface">
           <AppsIcon title="apps icon" />
         </Button>
-        <Button variant="icon" m={1} {...props} color="#f00">
+        <Button variant="icon" {...props} color="#f00">
           <AppsIcon title="apps icon" />
         </Button>
       </Box>
@@ -99,7 +99,12 @@ export const DebugButtonClick = () => {
 
   return (
     <Box m={3}>
-      <Button onClick={() => setCount((c) => c + 1)} variant="filled">
+      <Button
+        onClick={() => setCount((c) => c + 1)}
+        variant="filled"
+        elevation="none"
+        color="surface"
+      >
         Click count: {count}
       </Button>
     </Box>

package/src/Button/Button.tsx

@@ -1,12 +1,15 @@
+import type { ComponentType, ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import * as TransparentButton from './TransparentButton';
+import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
 import * as OutlinedButton from './OutlinedButton';
 import * as IconButton from './IconButton';
 import { useTheme } from '../theme';
 import { useRippleSurface } from '../Ripple';
-import { BaseButtonProps } from './BaseButton';
+import type { BaseButtonProps } from './BaseButton';
+import { useButtonGroupContext } from './context';
 
 export type ButtonVariants =
   | 'text'
@@ -14,6 +17,7 @@ export type ButtonVariants =
   | 'filled'
   | 'fab'
   | 'fab-mini'
+  | 'fab-large'
   | 'fab-extended'
   | 'icon';
 
@@ -22,8 +26,9 @@ const componentMapping = {
   outlined: OutlinedButton.OutlinedButton,
   filled: FilledButton.FilledButton,
   fab: FilledButton.FilledButton,
-  'fab-extended': FilledButton.FilledButton,
   'fab-mini': FilledButton.FilledButton,
+  'fab-large': FilledButton.FilledButton,
+  'fab-extended': FilledButton.FilledButton,
   icon: TransparentButton.TransparentButton,
 };
 
@@ -31,40 +36,49 @@ const rippleMapping = {
   text: TransparentButton.getRippleProperties,
   outlined: TransparentButton.getRippleProperties,
   filled: FilledButton.getRippleProperties,
-  fab: FilledButton.getRippleProperties,
+  fab: FloatingActionButton.getRippleProperties,
+  'fab-mini': FloatingActionButton.getRippleProperties,
+  'fab-large': FloatingActionButton.getRippleProperties,
   'fab-extended': FilledButton.getRippleProperties,
-  'fab-mini': FilledButton.getRippleProperties,
   icon: IconButton.getRippleProperties,
 };
 
 export type ButtonColors = 'primary' | 'secondary' | string;
 
 export interface ButtonProps extends BaseButtonProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   variant?: ButtonVariants;
   color?: ButtonColors;
   disabled?: boolean;
-  elevation?: 'none' | 'contained' | 'floating';
+  elevation?: 'none' | 'default' | 'contained' | 'floating' | 'elevated';
+}
+
+function getFallbackElevation(variant: ButtonVariants = 'text') {
+  if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
+    return 'none';
+  }
+  return 'default';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, forwardedRef) {
+    const buttonGroup = useButtonGroupContext();
     const {
       children,
-      variant = 'text',
+      variant = buttonGroup?.variant || 'text',
       onPointerDown: onPointerDownProp,
       onKeyDown: onKeyDownProp,
       color = 'primary',
       disabled = false,
-      elevation = 'none',
+      elevation = getFallbackElevation(props.variant),
       style: styleProp,
       ...otherProps
     } = props;
 
     const theme = useTheme();
 
-    const Comp: React.ComponentType<any> = componentMapping[variant];
+    const Comp: ComponentType<any> = componentMapping[variant];
     const getRippleProperties = rippleMapping[variant];
 
     const rippleProps = useRippleSurface({
@@ -85,6 +99,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         aria-disabled={disabled ? 'true' : undefined}
         color={color}
         elevation={elevation}
+        isGroupedButton={Boolean(buttonGroup)}
         {...rippleProps}
         {...otherProps}
       >

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,35 @@
+import { forwardRef, useMemo } from 'react';
+
+import type { ButtonProps } from './Button';
+import type { ButtonGroupContextProps } from './context';
+import { ButtonGroupContext } 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,10 +1,11 @@
 import styled from '@emotion/styled';
-import { readableColor } from 'polished';
-import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { readableColor, rem } from 'polished';
 import { get, css } from '@styled-system/css';
 
+import { BaseButton } from './BaseButton';
+import type { Theme } from '../theme';
+import { alpha, mixColor } from '../color';
+
 export const FilledButton = styled(BaseButton)(
   ({ color = 'primary', theme }) =>
     css({
@@ -21,13 +22,41 @@ 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(
-        theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0)
-      ),
+  ({ 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),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
     }
 );
 
@@ -36,5 +65,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 type { Theme } from '../theme';
+
+export function getRippleProperties(theme: Theme) {
+  return {
+    ...filledButtonGetProperties(theme),
+    rippleEnabled: true,
+  };
+}

package/src/Button/IconButton.tsx

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

package/src/Button/OutlinedButton.tsx

@@ -1,18 +1,47 @@
-import { TransparentButton } from './TransparentButton';
 import styled from '@emotion/styled';
 import { css } from '@styled-system/css';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import { alpha } from '../color';
+import { TransparentButton } from './TransparentButton';
+
 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,
+        },
+      },
+    }
 );