@basic-ui/material 1.0.0-alpha.7 → 1.0.0-alpha.8

package/src/NavRail/NavRail.story.tsx

@@ -1,8 +1,9 @@
 import { rem } from 'polished';
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { Box } from '../Box';
 import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
+import type { NavRailLabelProps } from './';
 // import './styles.css';
 
 export default {
@@ -54,8 +55,8 @@ const MenuIcon = (props) => (
   </svg>
 );
 
-const Example = ({ selectable = true }) => {
-  const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
+export const Default = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
 
   return (
     <Box
@@ -71,9 +72,7 @@ const Example = ({ selectable = true }) => {
     >
       <NavRailItem
         selected={selectedItem === '0'}
-        onClick={() => {
-          selectable && setSelectedItem('0');
-        }}
+        onClick={() => setSelectedItem('0')}
       >
         <NavRailIndicator>
           <MenuIcon />
@@ -82,9 +81,7 @@ const Example = ({ selectable = true }) => {
       </NavRailItem>
       <NavRailItem
         selected={selectedItem === '1'}
-        onClick={() => {
-          selectable && setSelectedItem('1');
-        }}
+        onClick={() => setSelectedItem('1')}
       >
         <NavRailIndicator>
           <KitchenIcon />
@@ -93,9 +90,7 @@ const Example = ({ selectable = true }) => {
       </NavRailItem>
       <NavRailItem
         selected={selectedItem === '2'}
-        onClick={() => {
-          selectable && setSelectedItem('2');
-        }}
+        onClick={() => setSelectedItem('2')}
       >
         <NavRailIndicator>
           <ListIcon />
@@ -106,4 +101,89 @@ const Example = ({ selectable = true }) => {
   );
 };
 
-export const Normal = () => <Example />;
+const DisappearingNavRailLabel = forwardRef<
+  HTMLDivElement,
+  NavRailLabelProps & { selected: boolean }
+>(function AnimatedNavRailLabel({ selected, height = '28px', ...props }, ref) {
+  const transitionDuration = '0.2s';
+  const transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
+  return (
+    <Box
+      ref={ref}
+      style={{
+        height: selected ? height : '0px',
+      }}
+      sx={{
+        transition: `height ${transitionDuration} ${transitionTimingFunction}`,
+      }}
+    >
+      <NavRailLabel
+        style={{
+          transform: selected
+            ? 'scale(1) translateY(0)'
+            : `scale(0.8, 0.64) translateY(calc(${height} * -0.5 * 0.64))`,
+          opacity: selected ? '1' : '0',
+        }}
+        sx={{
+          transformOrigin: 'center top',
+          transition:
+            `transform ${transitionDuration} ${transitionTimingFunction}, ` +
+            `opacity ${transitionDuration} ${transitionTimingFunction}`,
+        }}
+        {...props}
+      />
+    </Box>
+  );
+});
+
+export const WithHiddenLabels = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '0'}>
+          Menu
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '1'}>
+          Kitchen
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '2'}>
+          Orders
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};

package/src/NavRail/NavRailItem.tsx

@@ -7,7 +7,6 @@ import { Box } from '../Box';
 import { useTheme } from '../theme';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
-import type { RippleBoxProps } from '../Ripple';
 import { useRippleSurface } from '../Ripple';
 
 export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
@@ -18,38 +17,45 @@ export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
   color?: string;
 }
 
-export const NavRailIndicator = forwardRef<HTMLDivElement, RippleBoxProps>(
-  function NavRailIndicator(props, forwardedRef) {
-    const { as = 'div', children, __css, ...otherProps } = props;
+export type NavRailIndicatorProps = BoxProps;
 
-    return (
-      <Box
-        color="currentColor"
-        ref={forwardedRef}
-        as={as}
-        data-nav-rail-item-indicator=""
-        {...otherProps}
-        __css={{
-          width: '100%',
-          height: '100%',
-          maxWidth: rem(56),
-          maxHeight: rem(56),
-          borderRadius: 'full',
-          bg: 'var(--indicator-background-color)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          minHeight: rem(32),
-          ...__css,
-        }}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+export const NavRailIndicator = forwardRef<
+  HTMLDivElement,
+  NavRailIndicatorProps
+>(function NavRailIndicator(props, forwardedRef) {
+  const { as = 'div', children, __css, ...otherProps } = props;
+
+  return (
+    <Box
+      color="currentColor"
+      ref={forwardedRef}
+      as={as}
+      data-nav-rail-item-indicator=""
+      {...otherProps}
+      __css={{
+        width: '100%',
+        height: '100%',
+        maxWidth: rem(56),
+        maxHeight: rem(56),
+        borderRadius: 'full',
+        bg: 'var(--indicator-background-color)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: rem(32),
+        transition: 'background-color .2s cubic-bezier(.4,0,.2,1)',
+        pointerEvents: 'none',
+        ...__css,
+      }}
+    >
+      {children}
+    </Box>
+  );
+});
+
+export type NavRailLabelProps = TextProps;
 
-export const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(
+export const NavRailLabel = forwardRef<HTMLDivElement, NavRailLabelProps>(
   function NavRailLabel(props, forwardedRef) {
     const { as = 'div', children, __css, ...otherProps } = props;
 
@@ -58,12 +64,13 @@ export const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(
         ref={forwardedRef}
         as={as}
         variant="caption"
-        {...otherProps}
         lineHeight={1}
+        {...otherProps}
         __css={{
           pt: rem(4),
           pb: rem(12),
           color: 'inherit',
+          pointerEvents: 'none',
           ...__css,
         }}
       >
@@ -93,7 +100,7 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
       focusOpacity = 0.12,
       pressedOpacity = 0.12;
     const ripple = useRippleSurface({
-      rippleColor: `on.${color}`,
+      rippleColor: 'currentColor',
       onKeyDown,
       onPointerDown,
       baseOpacity,
@@ -122,7 +129,6 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
       }
       return ret;
     }, [ripple.__css]);
-    console.log(Object.keys(rippleCss));
 
     return (
       <Box
@@ -139,7 +145,8 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          color: `on.${color}`,
+          transition: 'color .2s cubic-bezier(.4,0,.2,1)',
+          color: selected ? `on.${color}` : 'on.surface-variant',
           '--indicator-background-color': selected
             ? get(theme, `colors.${color}`)
             : 'transparent',
@@ -151,8 +158,11 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
           margin: 0,
           padding: 0,
           px: rem(12),
+          minHeight: rem(60),
+          height: rem(60),
           cursor: 'pointer',
           textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
           ...rippleCss,
           ...__css,
         }}

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -68,6 +68,8 @@ const ThemeBuilder = () => {
         sx={{ gap: 3 }}
         flexDirection="column"
         width="300px"
+        position="fixed"
+        top="0"
       >
         <Box display="flex">
           <TextFieldColorPicker
@@ -131,31 +133,33 @@ const ThemeBuilder = () => {
           </Button>
         </Box>
       </Box>
-      <Box width="600px" mx="auto">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
+      <Box width="100%" pl="300px">
+        <Box width="600px" mx="auto">
+          <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+            <Box flex="1">
+              <Text variant="h5" as="h1" pb={'0.3em'}>
+                Light theme
+              </Text>
+              <ThemeColors scheme={scheme} />
+            </Box>
+            <Box flex="1">
+              <Text variant="h5" as="h1" pb={'0.3em'}>
+                Dark theme
+              </Text>
+              <ThemeColors scheme={scheme.modes.dark} />
+            </Box>
           </Box>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
+          <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+            <TonalColors palette={a1} />
+            <TonalColors palette={secondaryColorTonal} />
+            <TonalColors palette={tertiaryColorTonal} />
+            <TonalColors palette={error} />
+            <TonalColors palette={neutralColorTonal} />
+            <TonalColors palette={n2} />
+          </Box>
+          <Box as="pre" fontFamily="monospace" fontSize="12px">
+            {JSON.stringify({ colors: scheme }, null, 2)}
           </Box>
-        </Box>
-        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-          <TonalColors palette={a1} />
-          <TonalColors palette={secondaryColorTonal} />
-          <TonalColors palette={tertiaryColorTonal} />
-          <TonalColors palette={error} />
-          <TonalColors palette={neutralColorTonal} />
-          <TonalColors palette={n2} />
-        </Box>
-        <Box as="pre" fontFamily="monospace" fontSize="12px">
-          {JSON.stringify({ colors: scheme }, null, 2)}
         </Box>
       </Box>
     </Box>

package/src/color.ts

@@ -17,17 +17,38 @@ export const alpha =
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
   };
 
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
 export function getColorOverlay(
   theme: Theme,
   baseColor: string,
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { useTheme } from '@emotion/react';
-
-import { ThemeColors } from './ThemeColors';
-import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
-
-export default {
-  title: 'components/ThemeExplorer',
-};
-
-const ThemeExplorer = () => {
-  const theme = useTheme();
-  return (
-    <>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DEFAULT_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors as any} />
-      </Box>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DARK_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors.modes.dark as any} />
-      </Box>
-    </>
-  );
-};
-
-export const Explorer = () => <ThemeExplorer />;