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

package/src/Button/Button.story.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { Button } from './';
 import { Box } from '../Box';
 
@@ -7,8 +5,23 @@ export default {
   title: 'components/Button',
 };
 
-const AppsIcon = (props) => (
-  <svg width={24} height={24} {...props}>
+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 AppsIcon = (props: any) => (
+  <svg viewBox="0 0 24 24" {...props}>
     <path
       d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"
       fill="currentColor"
@@ -17,8 +30,8 @@ const AppsIcon = (props) => (
   </svg>
 );
 
-const NavigationIcon = (props) => (
-  <svg height={48} width={48} viewBox="0 0 48 48" {...props}>
+const NavigationIcon = (props: any) => (
+  <svg 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"
@@ -26,67 +39,126 @@ const NavigationIcon = (props) => (
   </svg>
 );
 
-const Example = (props) => {
+const onClick = (e: any) => {
+  console.log('I got clicked', e.currentTarget.innerText);
+};
+
+function getResolvedProps(shape: ControlShape, size: ControlSize) {
+  return {
+    shape: shape === 'default' ? undefined : shape,
+    size: size === 'default' ? undefined : size,
+  };
+}
+
+export const Primary = ({
+  color = 'primary',
+  disabled = false,
+  shape = 'default',
+  size = 'default',
+}: {
+  color: Color;
+  disabled?: boolean;
+  shape?: ControlShape;
+  size?: ControlSize;
+}) => {
+  const resolvedProps = getResolvedProps(shape, size);
+
   return (
-    <Box bg="surface">
-      <div className="bg-primary w-16 h-16 text-body-medium">Hello</div>
-      <div className="bg-primary-container w-16 h-16" />
-      <div className="bg-on-primary-container w-16 h-16" />
-      <div className="bg-ss-container-high w-16 h-16" />
-      <Box p={3} display="flex" sx={{ gap: 2 }}>
-        <Button variant="filled" {...props}>
+    <Box
+      bg="surface"
+      p={3}
+      display="flex"
+      flexDirection="column"
+      sx={{ gap: 2 }}
+    >
+      <Box display="flex" sx={{ gap: 2 }}>
+        <Button
+          variant="filled"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
           Filled
         </Button>
         <Button
           variant="text"
-          {...props}
-          color={props.colorTransparent || props.color}
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
         >
           Text
         </Button>
         <Button
           variant="outlined"
-          {...props}
-          color={props.colorTransparent || props.color}
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
         >
           Outlined
         </Button>
-        <Button variant="filled" elevation="elevated" {...props}>
+        <Button
+          variant="filled"
+          elevation="elevated"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
           Elevated
         </Button>
       </Box>
-      <Box p={3} display="flex" sx={{ gap: 2 }}>
-        <Button variant="fab-mini" elevation="floating" {...props}>
-          <NavigationIcon width="24px" height="24px" />
-        </Button>
-        <Button variant="fab" elevation="floating" {...props}>
-          <NavigationIcon width="24px" height="24px" />
-        </Button>
-        <Button variant="fab-large" elevation="floating" {...props}>
-          <NavigationIcon width="36px" height="36px" />
+      <Box display="flex" sx={{ gap: 2 }}>
+        <Button
+          variant="fab"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
+          <NavigationIcon />
         </Button>
-        <Button variant="fab-extended" elevation="floating" {...props}>
-          <Box mr={2} lineHeight={0}>
-            <NavigationIcon width="24px" height="24px" />
+        <Button
+          variant="fab-extended"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
+          <Box as="span" mr={2} lineHeight={0}>
+            <NavigationIcon />
           </Box>
           Fab extended
         </Button>
       </Box>
-      <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">
-          <Button variant="icon" {...props} color="#fff">
-            <AppsIcon title="apps icon" />
-          </Button>
-        </Box>
-        <Button variant="icon" {...props} color="on.surface">
+      <Box display="flex" sx={{ gap: 2 }}>
+        <Button
+          variant="icon"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
           <AppsIcon title="apps icon" />
         </Button>
-        <Button variant="icon" {...props} color="#f00">
+        <Button
+          variant="icon-filled"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
+          <AppsIcon title="apps icon" />
+        </Button>
+        <Button
+          variant="icon-outlined"
+          color={color}
+          disabled={disabled}
+          onClick={onClick}
+          {...resolvedProps}
+        >
           <AppsIcon title="apps icon" />
         </Button>
       </Box>
@@ -94,41 +166,133 @@ const Example = (props) => {
   );
 };
 
-const onClick = (e) => {
-  console.log('I got clicked', e.target.innerText);
+Primary.storyName = 'Button';
+Primary.args = {
+  color: 'primary',
+  disabled: false,
+  shape: 'default',
+  size: 'default',
+};
+Primary.argTypes = {
+  color: { control: 'select', options: colors },
+  disabled: { control: 'boolean' },
+  shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
+  size: {
+    control: 'inline-radio',
+    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+  },
 };
 
-export const DebugButtonClick = () => {
-  const [count, setCount] = useState(0);
+const sizeToName = {
+  xs: 'Extra small',
+  sm: 'Small',
+  md: 'Medium',
+  lg: 'Large',
+  xl: 'Extra large',
+};
+
+export const Sizes = ({ shape = 'default' }: { shape?: ControlShape }) => {
+  const resolvedShape = shape === 'default' ? undefined : shape;
 
   return (
-    <Box m={3}>
-      <Button
-        onClick={() => setCount((c) => c + 1)}
-        variant="filled"
-        elevation="none"
-        color="surface"
-      >
-        Click count: {count}
-      </Button>
+    <Box
+      bg="surface"
+      p={3}
+      display="flex"
+      flexDirection="column"
+      sx={{ gap: 2 }}
+    >
+      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+        <Box key={size} display="flex" alignItems="center" sx={{ gap: 2 }}>
+          <Button
+            variant="filled"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            {sizeToName[size]}
+          </Button>
+          <Button
+            variant="text"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            {sizeToName[size]}
+          </Button>
+          <Button
+            variant="outlined"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            {sizeToName[size]}
+          </Button>
+          <Button
+            variant="icon"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            <AppsIcon />
+          </Button>
+          <Button
+            variant="icon-filled"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            <AppsIcon />
+          </Button>
+          <Button
+            variant="icon-outlined"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            <AppsIcon />
+          </Button>
+          <Button
+            variant="fab"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            <NavigationIcon />
+          </Button>
+          <Button
+            variant="fab-extended"
+            size={size}
+            shape={resolvedShape}
+            onClick={onClick}
+          >
+            <Box as="span" mr={2} lineHeight={0}>
+              <NavigationIcon />
+            </Box>
+            {sizeToName[size]}
+          </Button>
+        </Box>
+      ))}
     </Box>
   );
 };
 
-export const Default = () => (
-  <Example color="surface" colorTransparent="on.surface" onClick={onClick} />
-);
-
-export const Primary = () => <Example color="primary" onClick={onClick} />;
-
-export const Secondary = () => <Example color="secondary" onClick={onClick} />;
-
-export const Error = () => <Example color="error" onClick={onClick} />;
-
-export const Disabled = () => (
-  <Example color="primary" disabled={true} onClick={onClick} />
-);
+Sizes.args = { shape: 'default' };
+Sizes.argTypes = {
+  shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
+};
 
-export const DisabledSecondary = () => (
-  <Example color="secondary" disabled={true} onClick={onClick} />
+export const FabExtended = () => (
+  <Box bg="surface" p={3} display="flex" flexDirection="column" sx={{ gap: 2 }}>
+    {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+      <Box key={size} display="flex" alignItems="center" sx={{ gap: 2 }}>
+        <Button variant="fab-extended" size={size} onClick={onClick}>
+          <Box as="span" mr={2} lineHeight={0}>
+            <NavigationIcon />
+          </Box>
+          {sizeToName[size]}
+        </Button>
+      </Box>
+    ))}
+  </Box>
 );

package/src/Button/Button.tsx

@@ -6,9 +6,12 @@ import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
 import * as OutlinedButton from './OutlinedButton';
 import * as IconButton from './IconButton';
+import * as IconFilledButton from './IconFilledButton';
+import * as IconOutlinedButton from './IconOutlinedButton';
 import { useTheme } from '../theme';
 import { useRippleSurface } from '../Ripple';
-import type { BaseButtonProps } from './BaseButton';
+import type { BaseButtonProps, ButtonShape, ButtonSize } from './BaseButton';
+export type { ButtonShape, ButtonSize };
 import { useButtonGroupContext } from './context';
 
 export type ButtonVariants =
@@ -16,20 +19,20 @@ export type ButtonVariants =
   | 'outlined'
   | 'filled'
   | 'fab'
-  | 'fab-mini'
-  | 'fab-large'
   | 'fab-extended'
-  | 'icon';
+  | 'icon'
+  | 'icon-filled'
+  | 'icon-outlined';
 
 const componentMapping = {
   text: TransparentButton.TransparentButton,
   outlined: OutlinedButton.OutlinedButton,
   filled: FilledButton.FilledButton,
-  fab: FilledButton.FilledButton,
-  'fab-mini': FilledButton.FilledButton,
-  'fab-large': FilledButton.FilledButton,
+  fab: FloatingActionButton.FloatingActionButton,
   'fab-extended': FilledButton.FilledButton,
   icon: TransparentButton.TransparentButton,
+  'icon-filled': IconFilledButton.IconFilledButton,
+  'icon-outlined': IconOutlinedButton.IconOutlinedButton,
 };
 
 const rippleMapping = {
@@ -37,10 +40,10 @@ const rippleMapping = {
   outlined: TransparentButton.getRippleProperties,
   filled: FilledButton.getRippleProperties,
   fab: FloatingActionButton.getRippleProperties,
-  'fab-mini': FloatingActionButton.getRippleProperties,
-  'fab-large': FloatingActionButton.getRippleProperties,
-  'fab-extended': FilledButton.getRippleProperties,
+  'fab-extended': FloatingActionButton.getRippleProperties,
   icon: IconButton.getRippleProperties,
+  'icon-filled': IconButton.getRippleProperties,
+  'icon-outlined': IconButton.getRippleProperties,
 };
 
 export type ButtonColors = 'primary' | 'secondary' | string;
@@ -55,10 +58,27 @@ export interface ButtonProps extends BaseButtonProps {
 }
 
 function getFallbackElevation(variant: ButtonVariants = 'text') {
-  if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
-    return 'none';
+  if (variant === 'fab' || variant === 'fab-extended') {
+    return 'floating';
   }
-  return 'default';
+  if (variant === 'filled') {
+    return 'default';
+  }
+  return 'none';
+}
+
+function getFallbackSize(variant: ButtonVariants = 'text'): ButtonSize {
+  if (variant === 'fab-extended') {
+    return 'md';
+  }
+  return 'sm';
+}
+
+function getFallbackShape(variant: ButtonVariants = 'text'): ButtonShape {
+  if (variant === 'fab' || variant === 'fab-extended') {
+    return 'square';
+  }
+  return 'rounded';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -66,11 +86,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const buttonGroup = useButtonGroupContext();
     const {
       children,
-      variant = buttonGroup?.variant || 'text',
+      variant = buttonGroup?.buttonVariant || 'text',
       onPointerDown: onPointerDownProp,
       onKeyDown: onKeyDownProp,
       color = 'primary',
       disabled = false,
+      size = getFallbackSize(props.variant),
+      shape = getFallbackShape(props.variant),
       elevation = getFallbackElevation(props.variant),
       style: styleProp,
       ...otherProps
@@ -82,7 +104,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const getRippleProperties = rippleMapping[variant];
 
     const rippleProps = useRippleSurface({
-      ...getRippleProperties(theme),
+      ...(getRippleProperties?.(theme) ?? {}),
       rippleColor: 'currentColor',
       disabled,
       style: styleProp,
@@ -90,6 +112,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onPointerDown: onPointerDownProp,
     });
 
+    if (!Comp || !getRippleProperties) {
+      console.warn(`Unsupported button variant: ${variant}.`);
+      return null;
+    }
+
     return (
       <Comp
         ref={forwardedRef}
@@ -98,6 +125,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled}
         aria-disabled={disabled ? 'true' : undefined}
         color={color}
+        size={size}
+        shape={shape}
         elevation={elevation}
         isGroupedButton={Boolean(buttonGroup)}
         {...rippleProps}