feat(list-input): m3 styles + new outline inputs

konstaui · Aug 24, 2022 · 9664580 · 9664580
1 parent aed4e16
commit 9664580
Show file tree

Hide file tree

Showing 20 changed files with 411 additions and 294 deletions.
diff --git a/TODO.md b/TODO.md
@@ -8,15 +8,11 @@ TS
 
 - ...Ios, ...Material props modifiers
 
-To redesign
-
-- Breadcrumbs
-- Form Inputs
-
 Tweaks
 
 - List
   - make dividers controlled on List
+  - check list inputs
 - TS for theme-specific props
   - List
   - Block

diff --git a/src/react/components/Chip.jsx b/src/react/components/Chip.jsx
@@ -3,6 +3,7 @@ import { ChipClasses } from '../../shared/classes/ChipClasses.js';
 import { ChipColors } from '../../shared/colors/ChipColors.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useTheme } from '../shared/use-theme.js';
 
 import DeleteIcon from './icons/DeleteIcon.jsx';
 
@@ -41,6 +42,7 @@ const Chip = forwardRef((props, ref) => {
   };
 
   const themeClasses = useThemeClasses({ ios, material });
+  const theme = useTheme({ ios, material });
   const dark = useDarkClasses();
 
   const style = outline ? 'outline' : 'fill';
@@ -55,7 +57,7 @@ const Chip = forwardRef((props, ref) => {
       {children}
       {deleteButton && (
         <div className={c.deleteButton} onClick={onDelete}>
-          <DeleteIcon className="h-4 w-4" />
+          <DeleteIcon theme={theme} className="h-4 w-4" />
         </div>
       )}
     </Component>

diff --git a/src/react/components/ListInput.jsx b/src/react/components/ListInput.jsx
@@ -14,7 +14,6 @@ import ListItem from './ListItem.jsx';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { ListInputClasses } from '../../shared/classes/ListInputClasses.js';
 import { ListInputColors } from '../../shared/colors/ListInputColors.js';
-import { useListDividers } from '../shared/use-list-dividers.js';
 
 const ListInput = forwardRef((props, ref) => {
   const {
@@ -23,8 +22,10 @@ const ListInput = forwardRef((props, ref) => {
     colors: colorsProp,
 
     label,
-    inlineLabel,
     floatingLabel,
+    outline,
+    outlineIos,
+    outlineMaterial,
     media,
     input, // for custom input
     info, // string
@@ -89,17 +90,10 @@ const ListInput = forwardRef((props, ref) => {
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
-  const dividers = useListDividers();
 
   const colors = ListInputColors(colorsProp, dark);
 
-  const labelStyle =
-    !label || inlineLabel
-      ? 'inline'
-      : label && floatingLabel
-      ? 'floating'
-      : 'stacked';
-  const labelStyleIsInline = labelStyle === 'inline' ? 'inline' : 'notInline';
+  const labelStyle = label && floatingLabel ? 'floating' : 'stacked';
   const labelStyleIsFloating =
     labelStyle === 'floating' ? 'floating' : 'notFloating';
 
@@ -117,21 +111,20 @@ const ListInput = forwardRef((props, ref) => {
   const isFloatingTransformed =
     label && floatingLabel && !isInputHasValue() && !isFocused;
 
-  const getLabelColor = (force) => {
-    if (labelStyle === 'inline' && !force) return '';
+  const getLabelColor = () => {
     if (error) return colors.errorText;
-    if (isFocused && theme === 'material') return colors.labelFocus;
-    if (labelStyle === 'floating') return 'opacity-50';
+    if (theme === 'material') {
+      return isFocused
+        ? colors.labelTextFocusMaterial
+        : colors.labelTextMaterial;
+    }
+    if (theme === 'ios') {
+      return isFocused ? colors.labelTextFocusIos : colors.labelTextIos;
+    }
 
     return '';
   };
 
-  const getHairlineColor = () => {
-    if (error) return colors.hairlineError;
-    if (isFocused) return colors.hairlineFocus;
-    return '';
-  };
-
   const onFocusInternal = (e) => {
     setIsFocused(true);
     if (onFocus) onFocus(e);
@@ -141,15 +134,21 @@ const ListInput = forwardRef((props, ref) => {
     if (onBlur) onBlur(e);
   };
 
+  const isOutline =
+    typeof outline === 'undefined'
+      ? theme === 'ios'
+        ? outlineIos
+        : outlineMaterial
+      : outline;
+
   const c = themeClasses(
-    ListInputClasses(props, colors, {
+    ListInputClasses({ ...props, outline: isOutline }, colors, {
       isFloatingTransformed,
       isFocused,
       darkClasses: dark,
       getLabelColor,
-      getHairlineColor,
-      dividers,
       inputClassName,
+      hasLabel: !!label,
     })
   );
 
@@ -205,32 +204,31 @@ const ListInput = forwardRef((props, ref) => {
   const errorInfoContent = (
     <>
       {error && error !== true && (
-        <div className={cls(c.errorInfo[labelStyleIsInline], c.error)}>
-          {error}
-        </div>
-      )}
-      {info && !error && (
-        <div className={cls(c.errorInfo[labelStyleIsInline], c.info)}>
-          {info}
-        </div>
+        <div className={cls(c.errorInfo, c.error)}>{error}</div>
       )}
+      {info && !error && <div className={cls(c.errorInfo, c.info)}>{info}</div>}
     </>
   );
 
   const innerChildren = (
     <>
-      {labelStyle !== 'inline' && label && (
-        <div className={c.label[labelStyle]}>{label}</div>
+      {label && (
+        <div className={c.label[labelStyle]}>
+          <div className={c.labelText}>{label}</div>
+        </div>
       )}
       <div className={c.inputWrap[labelStyle]}>
         {createInput()}
         {clearButton && (
-          <DeleteIcon onClick={onClear} className={c.clearButton} />
+          <DeleteIcon
+            theme={theme}
+            onClick={onClear}
+            className={c.clearButton}
+          />
         )}
         {dropdown && <DropdownIcon className={c.dropdown} />}
-        {labelStyle === 'inline' && errorInfoContent}
       </div>
-      {labelStyle !== 'inline' && errorInfoContent}
+      {errorInfoContent}
     </>
   );
 
@@ -240,12 +238,16 @@ const ListInput = forwardRef((props, ref) => {
       component={component}
       media={media}
       className={c.base}
-      title={labelStyle === 'inline' ? label : null}
-      mediaClassName={c.media[labelStyleIsInline]}
+      title={null}
+      mediaClassName={c.media}
       innerClassName={c.inner[labelStyle]}
       contentClassName={c.itemContent}
-      titleWrapClassName={c.titleWrap[labelStyleIsInline]}
+      titleWrapClassName={c.titleWrap}
       innerChildren={innerChildren}
+      contentChildren={
+        (isOutline || theme === 'material') && <span className={c.border} />
+      }
+      dividers={theme === 'material' || isOutline ? false : undefined}
       {...attrs}
     >
       {type !== 'select' ? children : null}

diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -56,6 +56,8 @@ const ListItem = forwardRef((props, ref) => {
     linkComponent = 'a',
     linkProps = {},
 
+    dividers: dividersProp,
+
     ios,
     material,
 
@@ -81,7 +83,8 @@ const ListItem = forwardRef((props, ref) => {
     ...rest,
   };
 
-  const dividers = useListDividers();
+  const dividers =
+    typeof dividersProp === 'undefined' ? useListDividers() : dividersProp;
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();

diff --git a/src/react/components/icons/DeleteIcon.jsx b/src/react/components/icons/DeleteIcon.jsx
@@ -1,17 +1,33 @@
 import React from 'react';
 
-const DeleteIcon = (props) => {
-  return (
+const DeleteIcon = ({ theme, ...rest }) => {
+  return theme === 'ios' ? (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="28"
       height="28"
       viewBox="0 0 28 28"
       fill="currentcolor"
-      {...props}
+      {...rest}
     >
       <path d="M14,0 C21.7319865,0 28,6.2680135 28,14 C28,21.7319865 21.7319865,28 14,28 C6.2680135,28 0,21.7319865 0,14 C0,6.2680135 6.2680135,0 14,0 Z M18.9393398,6.93933983 L14,11.8786797 L9.06066017,6.93933983 L6.93933983,9.06066017 L11.8786797,14 L6.93933983,18.9393398 L9.06066017,21.0606602 L14,16.1213203 L18.9393398,21.0606602 L21.0606602,18.9393398 L16.1213203,14 L21.0606602,9.06066017 L18.9393398,6.93933983 Z" />
     </svg>
+  ) : (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 10.59L15.59 7L17 8.41L13.41 12L17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59Z"
+        fill="currentcolor"
+      />
+    </svg>
   );
 };