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

package/src/Text/Text.story.tsx

@@ -1,75 +1,79 @@
-import { Text } from './';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Text',
-};
-
-const loremIpsum =
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
-  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
-  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
-  'soluta id accusantium voluptas beatae.';
-
-const Example = () => {
-  const variantMapping = {
-    'display-large': 'Display large',
-    'display-medium': 'Display medium',
-    'display-small': 'Display small',
-    'headline-large': 'Headline large',
-    'headline-medium': 'Headline medium',
-    'headline-small': 'Headline small',
-    'title-large': 'Title large',
-    'title-medium': 'Title medium',
-    'title-small': 'Title small',
-    'label-large': 'Label large',
-    'label-medium': 'Label medium',
-    'label-small': 'Label small',
-    'body-large': `Body large. ${loremIpsum}`,
-    'body-medium': `Body medium. ${loremIpsum}`,
-    'body-small': `Body small. ${loremIpsum}`,
-  };
-  const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
-      {variantMapping[v]}
-    </Text>
-  ));
-
-  return (
-    <Box bg="surface" p="2">
-      {variants}
-    </Box>
-  );
-};
-
-export const AllVariants = () => <Example />;
-
-export const LegacyVariants = () => {
-  const variantMapping = {
-    h1: 'Heading 1',
-    h2: 'Heading 2',
-    h3: 'Heading 3',
-    h4: 'Heading 4',
-    h5: 'Heading 5',
-    h6: 'Heading 6',
-    subtitle1: 'Subtitle 1',
-    subtitle2: 'Subtitle 2',
-    body1: `Body 1. ${loremIpsum}`,
-    body2: `Body 2. ${loremIpsum}`,
-    button: 'Button text',
-    caption: 'Caption text',
-    overline: 'Overline text',
-  };
-  const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
-      {variantMapping[v]}
-    </Text>
-  ));
-
-  return (
-    <Box bg="surface" p="2">
-      {variants}
-    </Box>
-  );
-};
+import { Text } from './';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Text',
+};
+
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
+const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  } as const;
+  const variants = (
+    Object.keys(variantMapping) as Array<keyof typeof variantMapping>
+  ).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
+  const variantMapping = {
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    h5: 'Heading 5',
+    h6: 'Heading 6',
+    subtitle1: 'Subtitle 1',
+    subtitle2: 'Subtitle 2',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
+    button: 'Button text',
+    caption: 'Caption text',
+    overline: 'Overline text',
+  } as const;
+  const variants = (
+    Object.keys(variantMapping) as Array<keyof typeof variantMapping>
+  ).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};

package/src/Text/Text.tsx

@@ -1,84 +1,84 @@
-import type { ElementType } from 'react';
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-/**
- * @deprecated
- */
-export type LegacyTextVariants =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'overline'
-  | 'button';
-
-export type TextVariants =
-  | 'display-large'
-  | 'display-medium'
-  | 'display-small'
-  | 'headline-large'
-  | 'headline-medium'
-  | 'headline-small'
-  | 'title-large'
-  | 'title-medium'
-  | 'title-small'
-  | 'label-large'
-  | 'label-medium'
-  | 'label-small'
-  | 'body-large'
-  | 'body-medium'
-  | 'body-small';
-
-export interface TextProps extends BoxProps {
-  variant?: LegacyTextVariants | TextVariants;
-}
-
-const mappings: { [key: string]: ElementType<any> } = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  subtitle1: 'h6',
-  subtitle2: 'h6',
-  body1: 'p',
-  body2: 'p',
-  caption: 'p',
-  overline: 'p',
-  button: 'p',
-};
-
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
-  props,
-  forwardedRef
-) {
-  const { as, variant = 'body-medium', ...otherProps } = props;
-  let Comp = as;
-  if (!Comp) {
-    Comp = mappings[variant] || 'p';
-  }
-
-  return (
-    <Box
-      as={Comp}
-      ref={forwardedRef as any}
-      tx="text"
-      variant={variant}
-      __css={{
-        color: 'inherit',
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'overline'
+  | 'button';
+
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
+export interface TextProps extends BoxProps {
+  variant?: LegacyTextVariants | TextVariants;
+}
+
+const mappings: { [key: string]: ElementType<any> } = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  caption: 'p',
+  overline: 'p',
+  button: 'p',
+};
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
+  props,
+  forwardedRef
+) {
+  const { as, variant = 'body-medium', ...otherProps } = props;
+  let Comp = as;
+  if (!Comp) {
+    Comp = mappings[variant] || 'p';
+  }
+
+  return (
+    <Box
+      as={Comp}
+      ref={forwardedRef as any}
+      tx="text"
+      variant={variant}
+      __css={{
+        color: 'inherit',
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Text/index.ts

@@ -1 +1 @@
-export * from './Text';
+export * from './Text';

package/src/TextField/FilledContainer.tsx

@@ -1,173 +1,173 @@
-import type { ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { get } from '@styled-system/css';
-import { rem } from 'polished';
-
-import { useTheme } from '../theme';
-import { FloatingLabel } from '../FloatingLabel';
-import { LineRipple } from '../LineRipple';
-import { alpha } from '../color';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import {
-  ICON_WIDTH,
-  PADDING_LEFT_WITHOUT_ICON,
-  PADDING_LEFT_WITH_ICON,
-} from './consts';
-
-const makeSelector = (
-  state:
-    | 'hover:not([disabled]):not(:focus)'
-    | 'focus:not([disabled])'
-    | 'disabled'
-) =>
-  `input:${state} ~ &,` +
-  `select:${state} ~ &,` +
-  `button:${state} ~ &,` +
-  `textarea:${state} ~ &,` +
-  `[role="button"]:${state} ~ &`;
-
-export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
-  const { forceActive } = props;
-  const theme = useTheme();
-
-  return (
-    <Box
-      __css={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'on.surface',
-        pointerEvents: 'none',
-        opacity: 0,
-        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
-          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
-        },
-        [makeSelector('focus:not([disabled])')]: {
-          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
-        },
-        [makeSelector('disabled')]: {
-          cursor: 'default',
-          color: alpha('on.surface', 0.6),
-          opacity: 0.02,
-        },
-        ...(forceActive && {
-          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
-        }),
-      }}
-    />
-  );
-};
-
-const FilledContainerBorderBottom = () => (
-  <Box
-    __css={{
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      width: '100%',
-      height: rem(1),
-      backgroundColor: alpha('on.surface', 0.6),
-      pointerEvents: 'none',
-      [makeSelector('disabled')]: {
-        backgroundColor: 'transparent',
-      },
-    }}
-  />
-);
-
-export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: ReactNode;
-  color?: string;
-  hasFocus?: boolean;
-  label?: ReactNode;
-  labelIsFloating: boolean;
-  inputId: string;
-  error?: boolean;
-  disabled?: boolean;
-  forceActive?: boolean;
-  leadingIcon?: boolean;
-}
-
-export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
-  function FilledContainer(props, forwardedRef) {
-    const {
-      label,
-      labelIsFloating,
-      inputId,
-      hasFocus,
-      color: colorProp,
-      children,
-      error = false,
-      disabled = false,
-      forceActive = false,
-      leadingIcon,
-      ...otherProps
-    } = props;
-
-    const finalLabelHeight = 16;
-    const labelHeight = finalLabelHeight / 0.75;
-    const inputHeight = 56;
-
-    const color = error ? 'error' : colorProp;
-    const active = hasFocus || forceActive;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        disabled={disabled}
-        active={active || error}
-        __css={{
-          position: 'relative',
-          lineHeight: 0,
-          width: '100%',
-          backgroundColor: 'surface-variant',
-          overflow: 'hidden',
-          boxSizing: 'border-box',
-          borderTopRightRadius: rem(4),
-          borderTopLeftRadius: rem(4),
-          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={inputHeight}
-            offsetX={
-              leadingIcon
-                ? PADDING_LEFT_WITH_ICON +
-                  ICON_WIDTH +
-                  PADDING_LEFT_WITHOUT_ICON
-                : PADDING_LEFT_WITHOUT_ICON
-            }
-            translateX={0}
-            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}
-          >
-            {label}
-          </FloatingLabel>
-        )}
-
-        {children}
-
-        <FilledContainerOverlay forceActive={active} />
-        <FilledContainerBorderBottom />
-        <LineRipple active={active || error} color={color} />
-      </Box>
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { get } from '@styled-system/css';
+import { rem } from 'polished';
+
+import { useTheme } from '../theme';
+import { FloatingLabel } from '../FloatingLabel';
+import { LineRipple } from '../LineRipple';
+import { alpha } from '../color';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
+
+const makeSelector = (
+  state:
+    | 'hover:not([disabled]):not(:focus)'
+    | 'focus:not([disabled])'
+    | 'disabled'
+) =>
+  `input:${state} ~ &,` +
+  `select:${state} ~ &,` +
+  `button:${state} ~ &,` +
+  `textarea:${state} ~ &,` +
+  `[role="button"]:${state} ~ &`;
+
+export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
+  const { forceActive } = props;
+  const theme = useTheme();
+
+  return (
+    <Box
+      __css={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'on.surface',
+        pointerEvents: 'none',
+        opacity: 0,
+        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
+          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
+        },
+        [makeSelector('focus:not([disabled])')]: {
+          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
+        },
+        [makeSelector('disabled')]: {
+          cursor: 'default',
+          color: alpha('on.surface', 0.6),
+          opacity: 0.02,
+        },
+        ...(forceActive && {
+          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
+        }),
+      }}
+    />
+  );
+};
+
+const FilledContainerBorderBottom = () => (
+  <Box
+    __css={{
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: rem(1),
+      backgroundColor: alpha('on.surface', 0.6),
+      pointerEvents: 'none',
+      [makeSelector('disabled')]: {
+        backgroundColor: 'transparent',
+      },
+    }}
+  />
+);
+
+export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
+  children?: ReactNode;
+  color?: string;
+  hasFocus?: boolean;
+  label?: ReactNode;
+  labelIsFloating: boolean;
+  inputId: string;
+  error?: boolean;
+  disabled?: boolean;
+  forceActive?: boolean;
+  leadingIcon?: boolean;
+}
+
+export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
+  function FilledContainer(props, forwardedRef) {
+    const {
+      label,
+      labelIsFloating,
+      inputId,
+      hasFocus,
+      color: colorProp,
+      children,
+      error = false,
+      disabled = false,
+      forceActive = false,
+      leadingIcon,
+      ...otherProps
+    } = props;
+
+    const finalLabelHeight = 16;
+    const labelHeight = finalLabelHeight / 0.75;
+    const inputHeight = 56;
+
+    const color = error ? 'error' : colorProp;
+    const active = hasFocus || forceActive;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        disabled={disabled}
+        active={active || error}
+        __css={{
+          position: 'relative',
+          lineHeight: 0,
+          width: '100%',
+          backgroundColor: 'surface-variant',
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          borderTopRightRadius: rem(4),
+          borderTopLeftRadius: rem(4),
+          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={inputHeight}
+            offsetX={
+              leadingIcon
+                ? PADDING_LEFT_WITH_ICON +
+                  ICON_WIDTH +
+                  PADDING_LEFT_WITHOUT_ICON
+                : PADDING_LEFT_WITHOUT_ICON
+            }
+            translateX={0}
+            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}
+          >
+            {label}
+          </FloatingLabel>
+        )}
+
+        {children}
+
+        <FilledContainerOverlay forceActive={active} />
+        <FilledContainerBorderBottom />
+        <LineRipple active={active || error} color={color} />
+      </Box>
+    );
+  }
+);