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

package/src/Select/Select.tsx

@@ -1,25 +1,13 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  useEffect,
-} from 'react';
+import { forwardRef, useState, useRef, useEffect, useId } from 'react';
 
 import type * as React from 'react';
 import {
   wrapEvent,
-  useId,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
 import { useTheme, Theme } from '../theme';
-import {
-  Select as SelectComp,
-  SelectButton,
-  SelectProps as BaseSelectProps,
-} from './styledComponents';
+import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
 import { OutlinedContainer } from '../TextField/OutlinedContainer';
@@ -27,7 +15,7 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
-import { Box } from '../Box';
+import { Box, BoxProps } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
 const componentMap = {
@@ -37,7 +25,7 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    React.SelectHTMLAttributes<HTMLSelectElement>,
+    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
@@ -108,7 +96,10 @@ export const Select = forwardRef<
 
   const handleOnChange = (e: any) => {
     onChange &&
-      onChange(e as any, native ? e.target.value : e.target.dataset.value);
+      onChange(
+        e as any,
+        native ? e.target.value : e.currentTarget.dataset.value
+      );
   };
 
   const hasError = Boolean(error);
@@ -122,9 +113,9 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: ForwardRefExoticComponent<
-    BaseSelectProps & RefAttributes<HTMLSelectElement | HTMLButtonElement>
-  > = native ? SelectComp : (SelectButton as any);
+  const Comp: React.ComponentType<any> = native
+    ? (SelectComp as any)
+    : (SelectButton as any);
 
   useEffect(() => {
     // right after mounting, if the default value in the select element
@@ -170,6 +161,7 @@ export const Select = forwardRef<
               aria-describedby={helperTextId}
               hasLabel={!!label}
               leadingIcon={Boolean(leadingIcon)}
+              trailingIcon={true}
               {...otherProps}
             >
               {native ? children : renderValue(value)}
@@ -182,20 +174,6 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
-                  __css={
-                    variant === 'filled'
-                      ? {
-                          "[data-popper-placement='top'] &": {
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                          },
-                          "[data-popper-placement='bottom'] &": {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                          },
-                        }
-                      : {}
-                  }
                 >
                   {children}
                 </MenuList>

package/src/Select/SelectIcon.tsx

@@ -3,6 +3,7 @@ import type * as React from 'react';
 import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
 import { alpha } from '../color';
+import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
@@ -22,7 +23,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
         __css={{
           position: 'absolute',
           top: `calc(50% - ${rem(12)})`,
-          right: rem(7),
+          right: rem(PADDING_RIGHT_WITH_ICON),
           width: rem(24),
           height: rem(24),
           color: open ? 'primary' : alpha('on.surface', 0.54),

package/src/Select/styledComponents.tsx

@@ -26,17 +26,21 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
   SelectProps & { innerAs?: React.ElementType<any> }
->(({ innerAs = 'button', ...props }, forwardedRef) => {
+>(({ innerAs = 'div', ...props }, forwardedRef) => {
   const InputButton: React.FC<
     SelectProps & React.RefAttributes<HTMLButtonElement>
   > = Input as any;
 
-  return <InputButton as={innerAs} ref={forwardedRef} {...props} />;
+  return (
+    <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />
+  );
 });
 
 export const SelectButton = forwardRef<
   HTMLButtonElement,
   SelectProps & MenuButtonProps
->(({ as, ...props }, ref) => (
-  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props} />
+>(({ as, children, ...props }, ref) => (
+  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props}>
+    {children}
+  </BaseMenuButton>
 ));

package/src/Skeleton/Skeleton.story.tsx

@@ -1,9 +1,12 @@
 import { Skeleton } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { DelayAppearance } from './DelayAppearance';
 
+export default {
+  title: 'components/Skeleton',
+};
+
 const Skeletons = ({
   animation = 'pulse',
 }: {
@@ -17,11 +20,11 @@ const Skeletons = ({
         animation={animation}
         width={60}
         height={60}
-        borderRadius="50%"
+        borderRadius="full"
         m={2}
       />
       <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="50%" />
+        <Box width={60} height={60} borderRadius="full" />
       </Skeleton>
     </Box>
   );
@@ -46,11 +49,9 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Skeleton', module);
-
-stories.add('controlled', () => <Example />);
-stories.add('controlled, delayed appearance', () => (
+export const Default = () => <Example />;
+export const DelayedAppearance = () => (
   <DelayAppearance>
     <Example />
   </DelayAppearance>
-));
+);

package/src/Snackbar/Snackbar.story.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Snackbar } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Select } from '../Select';
@@ -9,6 +8,10 @@ import { Link } from '../Link';
 import { StackProvider, useStack } from './Stack';
 // import './styles.css';
 
+export default {
+  title: 'components/Snackbar',
+};
+
 const Example = () => {
   return (
     <>
@@ -90,8 +93,6 @@ const SnackbarStackExample = () => {
   );
 };
 
-const stories = storiesOf('Components/Snackbar', module);
-
-stories.add('simple', () => <Example />);
-stories.add('controlled', () => <ControlledExample />);
-stories.add('snackbar stack', () => <SnackbarStackExample />);
+export const Default = () => <Example />;
+export const Controlled = () => <ControlledExample />;
+export const SnackbarStack = () => <SnackbarStackExample />;

package/src/Snackbar/Snackbar.tsx

@@ -39,21 +39,21 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Paper
-        elevation={6}
-        backgroundOverlay={6}
+        elevation={4}
+        backgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{
-          boxShadow: 6,
+          boxShadow: 4,
           py: rem(6),
           pl: 3,
           pr: 3,
           display: 'inline-flex',
           minWidth: `min(100%, ${rem(344)})`,
           maxWidth: ['100%', 'unset'],
-          borderRadius: rem(4),
+          borderRadius: 'extra-small',
           color: 'on.surface',
           flexDirection: 'row',
           willChange: 'transform,opacity',

package/src/Switch/Switch.story.tsx

@@ -1,6 +1,9 @@
 import { Switch } from './';
 import { Box } from '../';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'components/Switch',
+};
 
 const Example = () => {
   return (
@@ -21,6 +24,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Switch', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/Switch/Switch.tsx

@@ -3,7 +3,6 @@ import type * as React from 'react';
 import { RippleBox, RippleBoxProps } from '../Ripple';
 import { Box, BoxProps } from '../Box';
 import { useTheme } from '../theme';
-import { rem } from 'polished';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 import {
   SelectionControlLabel,
@@ -42,8 +41,8 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative" opacity={disabled ? 0.38 : 1}>
-          <SwitchTrail checked={checked} />
+        <Box position="relative">
+          <SwitchTrail checked={checked} disabled={disabled} />
           <SwitchThumb checked={checked}>
             <RippleBox<
               RippleBoxProps<
@@ -52,6 +51,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               >
             >
               as={Comp}
+              role="switch"
               type="checkbox"
               checked={checked}
               onChange={onChange}
@@ -64,20 +64,21 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               focusOpacity={0.12}
               center={true}
               disabled={disabled}
+              data-switch-thumb=""
               {...otherProps}
               __css={{
                 top: '50%',
                 left: '50%',
                 backgroundColor: 'transparent',
                 transform: 'translate(-50%, -50%)',
-                width: rem(48),
-                height: rem(48),
+                width: '100%',
+                height: '100%',
                 appearance: 'none',
                 ':focus': {
                   outline: 'none',
                 },
                 border: 'none',
-                borderRadius: '50%',
+                borderRadius: 'full',
                 zIndex: 1,
                 position: 'absolute',
                 ...__css,

package/src/Switch/styledComponents.tsx

@@ -1,33 +1,58 @@
 import { rem } from 'polished';
 import { Box } from '../Box';
 
-export const SwitchTrail = ({ checked = false, ...otherProps }) => (
+const BORDER_WIDTH = 2;
+const TRAIL_WIDTH = 52;
+const TRAIL_HEIGHT = 32;
+const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
+const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
+
+export const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => (
   <Box
     __css={{
-      width: rem(32),
-      height: rem(14),
-      borderRadius: rem(7),
-      backgroundColor: checked ? 'primary' : 'on.surface',
-      opacity: checked ? 0.54 : 0.38,
+      width: rem(TRAIL_WIDTH),
+      height: rem(TRAIL_HEIGHT),
+      borderRadius: rem(TRAIL_HEIGHT / 2),
+      borderWidth: rem(BORDER_WIDTH),
+      borderStyle: 'solid',
+      backgroundColor: checked ? 'primary' : 'surface-variant',
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface',
+      }),
     }}
     {...otherProps}
   />
 );
 
+const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(54)}
-    height={rem(48)}
-    borderRadius={rem(24)}
-    left={rem(-21)}
-    top={rem(-17)}
+    width={rem(THUMB_SIZE)}
+    height={rem(THUMB_SIZE)}
+    borderRadius="full"
+    left={'50%'}
+    top={'50%'}
     __css={{
-      cursor: 'pointer',
-      transform: checked ? `translate(${rem(20)})` : 'none',
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
+        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
+      )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
       transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1)',
+        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      '& > input': {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+      },
     }}
     {...otherProps}
   />
@@ -37,22 +62,44 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
   <Box
     __css={{
       position: 'absolute',
-      width: rem(20),
-      height: rem(20),
-      boxShadow: 2,
+      width: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+      height: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
       boxSizing: 'border-box',
-      borderWidth: rem(10),
-      borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
-      backgroundColor: checked ? 'primary' : '#fff',
-      borderColor: checked ? 'primary' : '#fff',
+      backgroundColor: checked ? 'on.primary' : 'outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
+        backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+      },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
+        height: checked
+          ? CIRCLE_SIZE_ACTIVE_CHECKED
+          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_ACTIVE_CHECKED
+          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+      },
+      '[data-switch-thumb=""]:disabled ~ &': {
+        opacity: checked ? 1 : 0.38,
+        backgroundColor: checked ? 'surface' : 'on.surface',
+        height: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      },
     }}
+    data-switch-circle=""
     role="presentation"
     aria-hidden="true"
     {...otherProps}

package/src/Tab/Tab.story.tsx

@@ -1,8 +1,12 @@
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from './';
 import { AppBar } from '../AppBar';
-import { storiesOf } from '@storybook/react';
+
 // import './styles.css';
 
+export default {
+  title: 'components/Tab',
+};
+
 const Example = () => {
   return (
     <Tabs defaultIndex={0}>
@@ -45,7 +49,5 @@ const ExampleAppBar = () => {
   );
 };
 
-const stories = storiesOf('Components/Tab', module);
-
-stories.add('controlled', () => <Example />);
-stories.add('with app bar', () => <ExampleAppBar />);
+export const Controlled = () => <Example />;
+export const WithAppBar = () => <ExampleAppBar />;

package/src/Table/Table.story.tsx

@@ -1,6 +1,9 @@
 import { Table, TableRow, TableBody, TableHead, TableCell } from './';
 import { Link } from '../Link';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'components/Table',
+};
 
 const data = {
   items: [
@@ -221,6 +224,4 @@ const GitHubTable = () => {
   );
 };
 
-const stories = storiesOf('Components/Table', module);
-
-stories.add('github table', () => <GitHubTable />);
+export const Example = () => <GitHubTable />;

package/src/Table/Table.tsx

@@ -4,7 +4,7 @@ import { Paper, PaperProps } from '../Paper';
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 4, ...rest } = props;
+  const { children, elevation = 1, ...rest } = props;
 
   return (
     <Paper

package/src/Text/LoremIpsum.tsx

@@ -1,8 +1,10 @@
+import { FC } from 'react';
 import { Text } from '.';
 
 const phrase =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-export const LoremIpsum = ({ count = 50 }) => {
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(

package/src/Text/Text.story.tsx

@@ -1,8 +1,11 @@
 import { Text } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Text',
+};
+
 const Example = () => {
   const variantMapping = {
     h1: 'Heading 1',
@@ -34,6 +37,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Text', module);
-
-stories.add('all variants', () => <Example />);
+export const AllVariants = () => <Example />;

package/src/TextField/FilledContainer.tsx

@@ -7,6 +7,11 @@ import { LineRipple } from '../LineRipple';
 import { rem } from 'polished';
 import { alpha } from '../color';
 import { Box, BoxProps } from '../Box';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const makeSelector = (
   state:
@@ -33,7 +38,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
         right: 0,
         backgroundColor: 'on.surface',
         pointerEvents: 'none',
-        opacity: 0.04,
+        opacity: 0,
         [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
           opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
         },
@@ -99,7 +104,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
       ...otherProps
     } = props;
 
-    const labelHeight = 18;
+    const finalLabelHeight = 16;
+    const labelHeight = finalLabelHeight / 0.75;
     const inputHeight = 56;
 
     const color = error ? 'error' : colorProp;
@@ -112,25 +118,39 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
         active={active || error}
         __css={{
           position: 'relative',
+          lineHeight: 0,
           width: '100%',
-          backgroundColor: 'surface',
+          backgroundColor: 'surface-variant',
           overflow: 'hidden',
           boxSizing: 'border-box',
           borderTopRightRadius: rem(4),
           borderTopLeftRadius: rem(4),
-          color: alpha('on.surface', 0.54),
-          ...(disabled && { color: alpha('on.surface', 0.38) }),
-          ...(active && { color: alpha('primary', 0.87) }),
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
         }}
         {...otherProps}
       >
         {label && (
           <FloatingLabel
-            height={labelHeight}
-            top={(inputHeight - labelHeight) * 0.5}
-            offsetX={leadingIcon ? 48 : 16}
+            height={inputHeight}
+            offsetX={
+              leadingIcon
+                ? PADDING_LEFT_WITH_ICON +
+                  ICON_WIDTH +
+                  PADDING_LEFT_WITHOUT_ICON
+                : PADDING_LEFT_WITHOUT_ICON
+            }
             translateX={0}
-            translateY={-labelHeight * 0.75}
+            translateY={
+              // To debug, delete these lines one by one to see it doing its work
+              -(inputHeight * 0.5) + // Put it at the top, crossing middle label
+              labelHeight * 0.75 * 0.5 + // Put it at position 0
+              8 // Add a 8px padding to the top
+            }
             active={labelIsFloating}
             htmlFor={inputId}
             color={active || error ? color : undefined}

package/src/TextField/IconContainer.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import { VFC } from 'react';
+import { FC } from 'react';
 import type * as React from 'react';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
-export const IconContainer: VFC<{
+export const IconContainer: FC<{
   children?: React.ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
@@ -12,8 +13,8 @@ export const IconContainer: VFC<{
     position="absolute"
     __css={{
       top: 0,
-      [position === 'start' ? 'left' : 'right']: 3,
-      minWidth: rem(24),
+      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
+      minWidth: rem(ICON_WIDTH),
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',