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

package/src/Chip/ChoiceChip.tsx

@@ -14,7 +14,8 @@ export type ChoiceChipProps = ChipBaseProps<
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leftIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
@@ -30,21 +31,23 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
       defaultValue,
       disabled,
       onChange,
-      leftIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      __css,
       ...otherProps
     } = props;
 
     const theme = useTheme();
-    const sumOpacity = checked ? 0.12 : 0;
 
     return (
       <ChipBase
         as="label"
         disabled={disabled}
-        backgroundColor={'surface'}
-        color={checked ? color : 'on.surface'}
-        borderOpacity={checked ? 0.6 : 0.24}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
         {...otherProps}
       >
         <Box
@@ -56,6 +59,8 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
           }}
         >
           <RippleBox<
@@ -75,13 +80,13 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             theme={theme}
             disabled={disabled}
             rippleColor={color}
-            baseOpacity={0 + sumOpacity}
-            hoverOpacity={0.12 + sumOpacity}
-            focusOpacity={0.24 + sumOpacity}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
             name={name}
             ref={forwardedRef}
             __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
+              bg: 'transparent',
               top: 0,
               left: 0,
               width: '100%',
@@ -93,15 +98,11 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
               border: 'none',
               borderRadius: 0,
               position: 'absolute',
-              color: 'inherit',
             }}
           />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" pr={rem(12)}>
-            {children}
-          </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
         </Box>
       </ChipBase>
     );

package/src/Combobox/Combobox.story.tsx

@@ -1,9 +1,7 @@
 import { useMemo, useState } from 'react';
 import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   Combobox,
-  ComboboxLabel,
   ComboboxOption,
   ComboboxList,
   ComboboxPopover,
@@ -13,7 +11,9 @@ import {
 import { Box } from '../Box';
 import cities from '../../../core/src/ComboBox/cities';
 
-const stories = storiesOf('Components/Combobox', module);
+export default {
+  title: 'components/Combobox',
+};
 
 function useCityMatch(searchTerm: string) {
   return useMemo(() => {
@@ -28,7 +28,7 @@ function useCityMatch(searchTerm: string) {
   }, [searchTerm]);
 }
 
-export function UncontrolledClientSideExample({ initialValue = '' }) {
+function UncontrolledClientSideExample({ initialValue = '' }) {
   const [term, setTerm] = useState(initialValue);
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
@@ -86,7 +86,7 @@ export function UncontrolledClientSideExample({ initialValue = '' }) {
   );
 }
 
-export function ControlledClientSideExample({ initialValue = '' }) {
+function ControlledClientSideExample({ initialValue = '' }) {
   const [term, setTerm] = useState(initialValue);
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
@@ -106,8 +106,6 @@ export function ControlledClientSideExample({ initialValue = '' }) {
       <p>Selection: {selected}</p>
       <p>Term: {term}</p>
       <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
         <Box position="relative">
           <ComboboxInput
             onChange={handleChange}
@@ -147,11 +145,12 @@ export function ControlledClientSideExample({ initialValue = '' }) {
   );
 }
 
-stories.add('Uncontrolled Clientside', () => <UncontrolledClientSideExample />);
-stories.add('Uncontrolled Clientside - Initial', () => (
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
   <UncontrolledClientSideExample initialValue="Aberdeen" />
-));
-stories.add('Controlled Clientside', () => <ControlledClientSideExample />);
-stories.add('Controlled Clientside - Initial', () => (
+);
+
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientSideInitial = () => (
   <ControlledClientSideExample initialValue="Aberdeen" />
-));
+);

package/src/Combobox/Combobox.tsx

@@ -98,10 +98,11 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         ref={forwardedRef}
         innerAs={as}
         outlined={false}
-        elevation={8}
+        elevation={2}
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
+          borderRadius: 'default',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },

package/src/Dialog/Dialog.story.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Dialog, DialogAnimationModes } from './';
-import { storiesOf } from '@storybook/react';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Box } from '../Box';
@@ -8,6 +7,10 @@ import { Switch } from '../Switch';
 import { Select } from '../Select';
 import { SelectItem } from '../SelectItem';
 
+export default {
+  title: 'components/Dialog',
+};
+
 const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
   const [open, setOpen] = useState(false);
   const [long, setLong] = useState(false);
@@ -43,10 +46,6 @@ const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
   );
 };
 
-const stories = storiesOf('Components/Dialog', module);
-
-stories.add('dialog, slide', () => <Example />);
-stories.add('dialog, grow', () => <Example animationMode={'grow'} />);
-stories.add('dialog, slide-grow', () => (
-  <Example animationMode={'slide-grow'} />
-));
+export const DialogSlide = () => <Example />;
+export const DialogGrow = () => <Example animationMode={'grow'} />;
+export const DialogSlideGrow = () => <Example animationMode={'slide-grow'} />;

package/src/Dialog/DialogSurface.tsx

@@ -4,33 +4,48 @@ import { Modal as _Modal, ModalProps } from '@basic-ui/core';
 import { Paper, PaperProps } from '../Paper';
 import { useTheme } from '../theme';
 import { rem } from 'polished';
+import { get, variant } from 'styled-system';
+import { getColorOverlay } from '../color';
 
 const Modal = _Modal as React.FC<
   DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
 >;
 
-export type DialogSurfaceProps = ModalProps & PaperProps;
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
 
 export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
   function DialogSurface(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
+    const { __css, variant: variantProp = 'base', ...otherProps } = props;
     const theme = useTheme();
 
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
     return (
       <Modal
         ref={forwardedRef}
         as={Paper}
         theme={theme}
-        elevation={24}
+        elevation={3}
         __css={{
+          ...getColorOverlay(theme, 'surface', 'primary', overlayValue),
           position: 'relative',
-          bg: 'surface',
-          borderRadius: rem(8),
+          borderRadius: 'small',
           width: '100%',
           maxWidth: rem(600),
           maxHeight: '100%',
           overflow: 'auto',
           pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
           ...__css,
         }}
         {...otherProps}

package/src/Divider/Divider.story.tsx

@@ -1,9 +1,12 @@
 import { Divider } from './';
-import { storiesOf } from '@storybook/react';
 import { Text } from '../Text';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Divider',
+};
+
 const ExampleHorizontal = () => {
   return (
     <Box bg="surface">
@@ -32,7 +35,5 @@ const ExampleVertical = () => {
   );
 };
 
-const stories = storiesOf('Components/Divider', module);
-
-stories.add('horizontal', () => <ExampleHorizontal />);
-stories.add('vertical', () => <ExampleVertical />);
+export const Horizontal = () => <ExampleHorizontal />;
+export const Vertical = () => <ExampleVertical />;

package/src/FloatingLabel/FloatingLabel.story.tsx

@@ -1,8 +1,11 @@
 import { useRef, useState } from 'react';
-import { FloatingLabel } from './FloatingLabel';
+import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
 import { Box } from '../Box';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'helper components/FloatingLabel',
+};
 
 const Example = () => {
   const ref = useRef<HTMLDivElement>();
@@ -22,9 +25,9 @@ const Example = () => {
         mb={2}
         bg="#eee"
       >
-        <FloatingLabel active={active} height={50}>
+        <FloatingLabelComponent active={active} height={50}>
           Standard
-        </FloatingLabel>
+        </FloatingLabelComponent>
       </Box>
       <Box
         display="flex"
@@ -38,9 +41,9 @@ const Example = () => {
         mb={2}
         bg="#eee"
       >
-        <FloatingLabel active={active} height={50} offsetX={16}>
+        <FloatingLabelComponent active={active} height={50} offsetX={16}>
           Standard
-        </FloatingLabel>
+        </FloatingLabelComponent>
       </Box>
       <Button onClick={() => setActive(true)}>Activate</Button>
       <Button onClick={() => setActive(false)}>Deactivate</Button>
@@ -48,6 +51,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/FloatingLabel', module);
-
-stories.add('floating label', () => <Example />);
+export const FloatingLabel = () => <Example />;

package/src/FloatingLabel/FloatingLabel.tsx

@@ -11,7 +11,6 @@ export interface FloatingLabelProps
   offsetX?: number;
   height?: number;
   scale?: number;
-  top?: number;
   px?: number;
   translateX?: number;
   translateY?: number;
@@ -29,7 +28,6 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
       style = {},
       translateX: translateXProp,
       translateY: translateYProp,
-      top = 0,
       children,
       ...otherProps
     } = props;
@@ -58,7 +56,6 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
           fontWeight: 'regular',
           display: 'inline-flex',
           alignItems: 'center',
-          top: rem(top),
           left: rem(offsetX),
           height: typeof height === 'number' ? rem(height) : height,
           transformOrigin: 'left center',

package/src/LineRipple/LineRipple.story.tsx

@@ -3,7 +3,10 @@ import { LineRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'helper components/LineRipple',
+};
 
 const Example = () => {
   const ref = useRef<HTMLDivElement>();
@@ -36,6 +39,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/LineRipple', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Link/Link.story.tsx

@@ -1,6 +1,7 @@
 import { Link } from './';
 import { Text } from '../Text';
-import { storiesOf } from '@storybook/react';
+
+export default { title: 'components/Link' };
 
 const Example = () => {
   return (
@@ -10,6 +11,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Link', module);
-
-stories.add('simple', () => <Example />);
+export const Simple = () => <Example />;

package/src/ListItem/ListItem.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { ListItem, ListItemText } from './';
 import { List } from '../List';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/ListItem',
+};
+
 const Example = ({ selectable = false }) => {
   const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
 
@@ -35,7 +38,5 @@ const Example = ({ selectable = false }) => {
   );
 };
 
-const stories = storiesOf('Components/ListItem', module);
-
-stories.add('normal', () => <Example />);
-stories.add('selectable', () => <Example selectable={true} />);
+export const Normal = () => <Example />;
+export const Selectable = () => <Example selectable={true} />;

package/src/ListItem/ListItem.tsx

@@ -1,10 +1,8 @@
 import { forwardRef } from 'react';
 import type * as React from 'react';
-import { BoxProps } from '../Box';
+import { BoxProps, Box } from '../Box';
 import { rem } from 'polished';
-import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { ListItemProvider } from './context';
 import { get } from '@styled-system/css';
 import { alpha } from '../color';
 
@@ -33,41 +31,66 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       ...otherProps
     } = props;
     const selected = ariaSelectedProp || selectedProp;
-    const color = colorProp ? colorProp : selected ? 'primary' : 'on.surface';
+    const color = rippleColor || colorProp || 'primary';
     const theme = useTheme();
 
+    const baseOpacity = 0.12;
+    const hoverOpacity = 0.16;
+    const focusOpacity = 0.24;
+
     return (
-      <ListItemProvider value={{ color, disabled }}>
-        <RippleBox
-          ref={forwardedRef}
-          as={innerAs || as}
-          theme={theme}
-          display="flex"
-          data-disabled={disabled ? '' : undefined}
-          rippleColor={rippleColor || color}
-          baseOpacity={selected ? 0.12 : 0}
-          hoverOpacity={selected ? 0.16 : 0.04}
-          focusOpacity={selected ? 0.24 : 0.12}
-          aria-selected={selected ? 'true' : undefined}
-          disabled={disabled}
-          {...otherProps}
-          __css={{
-            px: 3,
-            py: rem(12),
-            backgroundColor: 'transparent',
-            color: disabled ? alpha(color, 0.6) : alpha(color, 0.87),
+      <Box
+        ref={forwardedRef}
+        as={innerAs || as}
+        theme={theme}
+        display="flex"
+        data-disabled={disabled ? '' : undefined}
+        aria-selected={selected ? 'true' : undefined}
+        disabled={disabled}
+        {...otherProps}
+        __css={{
+          px: 3,
+          py: rem(12),
+          transition: 'background-color 75ms linear',
+          backgroundColor: 'transparent',
+          color: alpha('on.surface', 0.87),
+          cursor: 'pointer',
+          ':hover': {
+            backgroundColor: alpha('on.surface', hoverOpacity),
+          },
+          ':focus': {
+            outline: 'none',
+            backgroundColor: alpha('on.surface', focusOpacity),
+          },
+          ':active': {
+            backgroundColor: alpha('on.surface', baseOpacity + 0.12),
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: alpha(color, baseOpacity + 0.12),
+            ':hover': {
+              backgroundColor: alpha(color, hoverOpacity + 0.12),
+            },
             ':focus': {
               outline: 'none',
+              backgroundColor: alpha(color, focusOpacity + 0.12),
             },
-            textDecoration: 'none',
-            WebkitTapHighlightColor: 'transparent',
-            ...get(theme, 'text.subtitle1'),
-            ...__css,
-          }}
-        >
-          {children}
-        </RippleBox>
-      </ListItemProvider>
+            ':active': {
+              backgroundColor: alpha(color, baseOpacity + 0.24),
+            },
+          },
+          '&[data-disabled]': {
+            color: alpha('on.surface', 0.6),
+            backgroundColor: 'transparent',
+            cursor: 'default',
+          },
+          textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          ...get(theme, 'text.subtitle1'),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
     );
   }
 );

package/src/ListItem/ListItemText.tsx

@@ -1,8 +1,6 @@
 import { forwardRef } from 'react';
 import type * as React from 'react';
 import { Text } from '../Text';
-import { alpha } from '../color';
-import { useListItemContext } from './context';
 
 export interface ListItemTextProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,7 +12,6 @@ export interface ListItemTextProps
 export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
   function ListItemText(props, forwardedRef) {
     const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
-    const { color, disabled } = useListItemContext();
 
     return (
       <Comp ref={forwardedRef} {...otherProps}>
@@ -25,7 +22,8 @@ export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
             variant="body2"
             display="block"
             __css={{
-              color: alpha(color, disabled ? 0.3 : 0.57),
+              color: 'currentColor',
+              opacity: 0.65,
             }}
           >
             {secondaryText}

package/src/Menu/Menu.story.tsx

@@ -1,9 +1,12 @@
 import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
 import { Divider } from '../Divider';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Menu',
+};
+
 const MenuUncontrolled = ({ disabled }) => {
   return (
     <Box px={5}>
@@ -44,10 +47,8 @@ const MenuUncontrolledWithLinks = ({ disabled }) => {
   );
 };
 
-const stories = storiesOf('Components/Menu', module);
-
-stories.add('uncontrolled', () => <MenuUncontrolled disabled={undefined} />);
-stories.add('uncontrolled, with links', () => (
+export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
+export const UncontrolledWithLinks = () => (
   <MenuUncontrolledWithLinks disabled={undefined} />
-));
-stories.add('disabled', () => <MenuUncontrolled disabled={true} />);
+);
+export const Disabled = () => <MenuUncontrolled disabled={true} />;

package/src/Menu/Menu.tsx

@@ -34,14 +34,14 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       as={List}
       innerAs={as}
       ref={ref as any}
-      elevation={8}
+      elevation={2}
       outlined={false}
       variant="default"
       __css={{
-        width: 0,
         minWidth: rem(112),
         maxWidth: rem(280),
         maxHeight: rem(300),
+        borderRadius: 'default',
         overflowY: 'auto',
         '[data-popper-placement="top"] &': {
           transformOrigin: 'bottom center',

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,11 +1,14 @@
 import {} from './';
-import { storiesOf } from '@storybook/react';
 import { NotchedOutline } from './NotchedOutline';
 import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { rem } from 'polished';
 // import './styles.css';
 
+export default {
+  title: 'helper components/NotchedOutline',
+};
+
 const Example = () => {
   const labelWidth = 68.27;
 
@@ -14,7 +17,7 @@ const Example = () => {
       <Box
         m={3}
         display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
       >
         <NotchedOutline
           borderColor="primary"
@@ -92,6 +95,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/NotchedOutline', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/NotchedOutline/styledComponents.ts

@@ -15,7 +15,7 @@ const makeSelector = (
 ) =>
   `input:${state} ~ & [data-notch-outline-item],` +
   `select:${state} ~ & [data-notch-outline-item],` +
-  `button:${state} ~ & [data-notch-outline-item],` +
+  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
   `textarea:${state} ~ & [data-notch-outline-item]`;
 
 export const InnerContainer = styled('div', {
@@ -78,18 +78,18 @@ export const InnerContainer = styled('div', {
     }
 
     const inactiveStyle = {
-      color: alpha('on.surface', 0.6),
-      borderColor: alpha('on.surface', 0.38),
+      color: 'on.surface-variant',
+      borderColor: 'outline',
       ...borderStyling(borderRadius, borderWidth),
     };
 
     const hoverStyle = {
-      borderColor: alpha('on.surface', 0.87),
-      color: alpha('on.surface', 0.6),
+      borderColor: 'on.surface',
+      color: 'on.surface-variant',
     };
 
     const focusStyle = {
-      borderColor: alpha(color, 0.87),
+      borderColor: color,
       color: alpha(color, 0.87),
       ...borderStyling(borderRadius, borderWidthWhenFocused),
     };