@basic-ui/material 0.1.13 → 0.1.16

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',
 }: {
@@ -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/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/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/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:
@@ -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,6 +118,7 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
         active={active || error}
         __css={{
           position: 'relative',
+          lineHeight: 0,
           width: '100%',
           backgroundColor: 'surface',
           overflow: 'hidden',
@@ -126,11 +133,21 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
       >
         {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',

package/src/TextField/Input.tsx

@@ -2,6 +2,13 @@ import { rem } from 'polished';
 import { InputHTMLAttributes, forwardRef } from 'react';
 import { Box, BoxProps } from '../Box';
 import { alpha } from '../color';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+  PADDING_RIGHT_WITHOUT_ICON,
+  PADDING_RIGHT_WITH_ICON,
+} from './consts';
 
 export interface InputProps
   extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
@@ -36,7 +43,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
       {...otherProps}
       __css={{
         WebkitTapHighlightColor: 'transparent',
-        boxSizing: 'border-box',
         appearance: 'none',
         outline: 'none',
         width: '100%',
@@ -50,6 +56,14 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         color: alpha('on.surface', 0.87),
         letterSpacing: rem(0.5),
         textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+        ...(!multiline && {
+          lineHeight: 1,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        }),
         '::placeholder': {
           opacity: 0,
           color: alpha('on.surface', 0.54),
@@ -64,7 +78,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         ':disabled': {
           cursor: 'default',
         },
-        'select&,button&': {
+        'select&,[role="button"]&': {
           cursor: 'pointer',
         },
         'select&': {
@@ -73,20 +87,26 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             color: 'on.surface',
           },
         },
-        paddingLeft: leadingIcon ? rem(18 + 30) : rem(16),
-        paddingRight: trailingIcon ? rem(18 + 30) : rem(16),
+        paddingLeft: leadingIcon
+          ? rem(PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON)
+          : rem(PADDING_LEFT_WITHOUT_ICON),
+        paddingRight: trailingIcon
+          ? rem(
+              PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON
+            )
+          : rem(PADDING_RIGHT_WITHOUT_ICON),
         ...(variant === 'outlined' && {
-          paddingTop: hasLabel ? rem(12) : rem(12),
-          paddingBottom: hasLabel ? rem(14) : rem(12),
+          paddingTop: rem(16),
+          paddingBottom: rem(16),
         }),
         ...(variant === 'filled' && {
-          paddingTop: hasLabel ? rem(20) : rem(12),
-          paddingBottom: hasLabel ? rem(6) : rem(12),
+          paddingTop: hasLabel ? rem(24) : rem(16),
+          paddingBottom: hasLabel ? rem(8) : rem(16),
         }),
         ...(multiline && {
           resize: 'vertical',
           paddingTop: 0,
-          marginTop: variant === 'outlined' || !hasLabel ? rem(12) : rem(20),
+          marginTop: variant === 'outlined' || !hasLabel ? rem(18) : rem(26),
         }),
         ...__css,
       }}

package/src/TextField/OutlinedContainer.tsx

@@ -10,6 +10,11 @@ import { NotchedOutline } from '../NotchedOutline';
 import { Box, BoxProps } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { Theme } from '../theme';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -61,9 +66,10 @@ export const OutlinedContainer = forwardRef<
   }, [label]);
 
   const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
 
   return (
-    <Box position="relative" {...otherProps}>
+    <Box position="relative" lineHeight={0} {...otherProps}>
       <NotchedOutline
         ref={forwardedRef}
         borderRadius={4}
@@ -76,9 +82,17 @@ export const OutlinedContainer = forwardRef<
         label={
           label && (
             <FloatingLabel
-              height={56}
-              offsetX={leadingIcon ? 48 : 16}
-              translateX={leadingIcon ? -32 : 0}
+              height={inputHeight}
+              offsetX={
+                leadingIcon
+                  ? PADDING_LEFT_WITH_ICON +
+                    ICON_WIDTH +
+                    PADDING_LEFT_WITHOUT_ICON
+                  : PADDING_LEFT_WITHOUT_ICON
+              }
+              translateX={
+                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
+              }
               active={forceActive || labelIsFloating}
               ref={labelRef}
               htmlFor={inputId}

package/src/TextField/TextField.story.tsx

@@ -1,11 +1,27 @@
 import { useState } from 'react';
-import { TextField } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';
 import { Button } from '../Button';
 import { alpha } from '../color';
+import { TextField } from './';
+
+export default {
+  title: 'components/TextField',
+};
+
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
 
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
@@ -156,7 +172,7 @@ const Example = ({ variant }) => {
             label="With icon"
             error={error}
             color={color}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
         <Box m={2} width={230} display="inline-block">
@@ -220,7 +236,5 @@ const Example = ({ variant }) => {
   );
 };
 
-const stories = storiesOf('Components/TextField', module);
-
-stories.add('filled', () => <Example variant="filled" />);
-stories.add('outlined', () => <Example variant="outlined" />);
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;

package/src/TextField/TextField.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useId } from 'react';
 import type * as React from 'react';
-import { wrapEvent, useId, useControlledState } from '@basic-ui/core';
+import { wrapEvent, useControlledState } from '@basic-ui/core';
 import { Input, InputProps } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';

package/src/TextField/consts.ts

@@ -0,0 +1,7 @@
+export const PADDING_LEFT_WITH_ICON = 14;
+export const PADDING_LEFT_WITHOUT_ICON = 16;
+
+export const ICON_WIDTH = 24;
+
+export const PADDING_RIGHT_WITH_ICON = 12;
+export const PADDING_RIGHT_WITHOUT_ICON = 16;

package/src/Tooltip/Tooltip.story.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from './';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const Example = () => {
   const buttonRef = useRef();
   const [counter, setCounter] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Tooltip', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;