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

package/src/Text/Text.tsx

@@ -1,64 +1,84 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type TextVariants =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'overline'
-  | 'button';
-
-export interface TextProps extends BoxProps {
-  variant?: TextVariants;
-}
-
-const mappings: { [key: string]: React.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 = 'body1', ...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,172 +1,173 @@
-import { forwardRef } from 'react';
-import * as React 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} ~ &`;
-
-const Overlay = (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 BorderBottom = () => (
-  <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?: React.ReactNode;
-  color?: string;
-  hasFocus?: boolean;
-  label?: React.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}
-
-        <Overlay forceActive={active} />
-        <BorderBottom />
-        <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>
+    );
+  }
+);

package/src/TextField/HelperText.tsx

@@ -1,63 +1,63 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { alpha } from '../color';
-import type { TextProps } from '../Text/Text';
-
-export interface HelperTextProps extends TextProps {
-  children?: React.ReactNode;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
-  error?: boolean;
-  disabled?: boolean;
-}
-
-export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
-  function HelperText(props, forwardedRef) {
-    const {
-      leftSide,
-      rightSide,
-      color: colorProp,
-      error = false,
-      disabled = false,
-      __css,
-      ...otherProps
-    } = props;
-
-    if (!leftSide && !rightSide) {
-      return null;
-    }
-
-    let color: any = colorProp;
-    if (disabled) {
-      color = alpha('on.surface', 0.38);
-    } else if (error) {
-      color = 'error';
-    } else if (color === undefined) {
-      color = alpha('on.surface', 0.6);
-    }
-
-    return (
-      <Text
-        as="div"
-        px={16}
-        display="flex"
-        pt={1}
-        color={color}
-        variant="caption"
-        ref={forwardedRef}
-        lineHeight="normal"
-        __css={{
-          color,
-          ...__css,
-        }}
-        {...otherProps}
-      >
-        {leftSide}
-        {rightSide && <Box ml="auto">{rightSide}</Box>}
-      </Text>
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { alpha } from '../color';
+import type { TextProps } from '../Text/Text';
+
+export interface HelperTextProps extends TextProps {
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
+  error?: boolean;
+  disabled?: boolean;
+}
+
+export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
+  function HelperText(props, forwardedRef) {
+    const {
+      leftSide,
+      rightSide,
+      color: colorProp,
+      error = false,
+      disabled = false,
+      __css,
+      ...otherProps
+    } = props;
+
+    if (!leftSide && !rightSide) {
+      return null;
+    }
+
+    let color: any = colorProp;
+    if (disabled) {
+      color = alpha('on.surface', 0.38);
+    } else if (error) {
+      color = 'error';
+    } else if (color === undefined) {
+      color = alpha('on.surface', 0.6);
+    }
+
+    return (
+      <Text
+        as="div"
+        px={16}
+        display="flex"
+        pt={1}
+        color={color}
+        variant="label-small"
+        ref={forwardedRef}
+        lineHeight="normal"
+        __css={{
+          color,
+          ...__css,
+        }}
+        {...otherProps}
+      >
+        {leftSide}
+        {rightSide && <Box ml="auto">{rightSide}</Box>}
+      </Text>
+    );
+  }
+);

package/src/TextField/IconContainer.tsx

@@ -1,17 +1,17 @@
 import { rem } from 'polished';
-import type { FC } from 'react';
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
 export const IconContainer: FC<{
-  children?: React.ReactNode;
+  children?: ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
   <Box
     position="absolute"
+    data-icon-container={position}
     __css={{
       top: 0,
       [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),