refactor(textarea): ♻️ add invalid autosize icon (#237)

adaptui · Dec 27, 2021 · 3cb5a53 · 3cb5a53 · vercel · Dec 27, 2021
1 parent 6879e09
commit 3cb5a53
Show file tree

Hide file tree

Showing 29 changed files with 787 additions and 216 deletions.
diff --git a/src/checkbox/__keys.ts b/src/checkbox/__keys.ts
@@ -18,8 +18,8 @@ export const USE_CHECKBOX_STATE_KEYS = [
   "state",
   "onStateChange",
   "size",
-  "value",
   "icon",
+  "value",
   "label",
   "description",
 ] as const;

diff --git a/src/create-icon/stories/IconAll.component.tsx b/src/create-icon/stories/IconAll.component.tsx
@@ -13,7 +13,9 @@ import {
   CloseIcon,
   DashIcon,
   EqualsIcon,
+  ErrorIcon,
   SleepStatusIcon,
+  SlotIcon,
   TypingLargeStatusIcon,
   TypingSmallStatusIcon,
   UserIcon,
@@ -25,6 +27,7 @@ export const Icon: React.FC<IconProps> = props => {
   return (
     <div className="flex flex-col space-y-2">
       <div className="space-x-4 text-5xl">
+        <SlotIcon />
         <CaretDownIcon />
         <CaretLeftIcon />
         <CaretRightIcon />
@@ -41,6 +44,7 @@ export const Icon: React.FC<IconProps> = props => {
         <TypingLargeStatusIcon className="inline-block w-12" />
         <ArrowIcon className="inline-block w-12 h-12" />
         <EqualsIcon />
+        <ErrorIcon />
       </div>
     </div>
   );

diff --git a/src/icons/CirculedCheck.tsx → src/icons/CircledCheck.tsx b/src/icons/CirculedCheck.tsx → src/icons/CircledCheck.tsx
diff --git a/src/icons/Error.tsx b/src/icons/Error.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from "../create-icon";
+
+export const ErrorIcon = createIcon({
+  displayName: "ErrorIcon",
+  viewBox: "0 0 12 12",
+  path: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.002 1.458a4.604 4.604 0 1 0 0 9.209 4.604 4.604 0 0 0 0-9.209ZM.098 6.063a5.904 5.904 0 1 1 11.808 0 5.904 5.904 0 0 1-11.808 0Zm5.904-3.357a.65.65 0 0 1 .65.65v2.5a.65.65 0 0 1-1.3 0v-2.5a.65.65 0 0 1 .65-.65Zm.75 5.544a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+    />
+  ),
+});
diff --git a/src/icons/ExclamationCircle.tsx b/src/icons/ExclamationCircle.tsx
diff --git a/src/icons/Slot.tsx b/src/icons/Slot.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from "../create-icon";
+
+export const SlotIcon = createIcon({
+  displayName: "SlotIcon",
+  viewBox: "0 0 12 12",
+  path: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.317.1a5.995 5.995 0 0 1 1.369 0 .65.65 0 1 1-.149 1.292 4.696 4.696 0 0 0-1.071 0A.65.65 0 1 1 5.317.101Zm-2.09 1.35a.65.65 0 0 1-.106.914 4.67 4.67 0 0 0-.756.756.65.65 0 1 1-1.019-.808 5.97 5.97 0 0 1 .968-.967.65.65 0 0 1 .913.105Zm5.55 0a.65.65 0 0 1 .912-.105c.359.284.684.61.968.968a.65.65 0 1 1-1.019.807 4.67 4.67 0 0 0-.756-.756.65.65 0 0 1-.106-.914Zm2.405 3.295a.65.65 0 0 1 .72.571 5.994 5.994 0 0 1 0 1.368.65.65 0 0 1-1.292-.148 4.708 4.708 0 0 0 0-1.071.65.65 0 0 1 .572-.72Zm-10.36 0a.65.65 0 0 1 .571.72 4.694 4.694 0 0 0 0 1.071.65.65 0 0 1-1.291.148 5.995 5.995 0 0 1 0-1.368.65.65 0 0 1 .72-.571Zm.63 4.03a.65.65 0 0 1 .913.106c.222.28.476.534.756.756a.65.65 0 0 1-.807 1.019 5.974 5.974 0 0 1-.968-.968.65.65 0 0 1 .105-.913Zm9.1 0a.65.65 0 0 1 .105.913 5.973 5.973 0 0 1-.968.968.65.65 0 0 1-.807-1.019 4.67 4.67 0 0 0 .756-.756.65.65 0 0 1 .914-.106ZM4.746 11.18a.65.65 0 0 1 .72-.571 4.708 4.708 0 0 0 1.071 0 .65.65 0 1 1 .149 1.291 5.994 5.994 0 0 1-1.369 0 .65.65 0 0 1-.571-.72Z"
+    />
+  ),
+});
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -6,13 +6,13 @@ export * from "./CaretLeft";
 export * from "./CaretRight";
 export * from "./Check";
 export * from "./Circle";
-export * from "./CirculedCheck";
+export * from "./CircledCheck";
 export * from "./Clock";
 export * from "./Close";
 export * from "./Dash";
 export * from "./Dot";
 export * from "./Equals";
-export * from "./ExclamationCircle";
+export * from "./Error";
 export * from "./ExclamationTriangle";
 export * from "./EyesIcon";
 export * from "./GenericAvatar";
@@ -21,6 +21,7 @@ export * from "./Moon";
 export * from "./Photograph";
 export * from "./Plus";
 export * from "./SleepStatus";
+export * from "./Slot";
 export * from "./TypingLargeStatus";
 export * from "./TypingSmallStatus";
 export * from "./User";
diff --git a/src/input/InputPrefix.tsx b/src/input/InputPrefix.tsx
@@ -36,7 +36,6 @@ export const useInputPrefix = createHook<
       theme.prefix.variant[variant].common,
       disabled || invalid ? "" : theme.prefix.variant[variant].interactions,
       disabled ? theme.prefix.variant[variant].disabled : "",
-      invalid ? theme.prefix.variant[variant].invalid : "",
       htmlClassName,
     );
 

diff --git a/src/input/InputState.tsx b/src/input/InputState.tsx
@@ -28,12 +28,12 @@ export type InputState = {
   /**
    * True, if the value of the input is invalid.
    */
-  invalid?: boolean;
+  invalid: boolean;
 
   /**
    * True, if the input is loading.
    */
-  loading?: boolean;
+  loading: boolean;
 };
 
 export type InputActions = {};

diff --git a/src/input/stories/InputBasic.stories.tsx b/src/input/stories/InputBasic.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 import { createControls, createPreviewTabs } from "../../../.storybook/utils";
-import { CaretDownIcon, ClockIcon } from "../../icons";
+import { SlotIcon } from "../../icons";
 
 import js from "./templates/InputBasicJsx";
 import ts from "./templates/InputBasicTsx";
@@ -92,22 +92,22 @@ export const Invalid: Story = {
 export const Prefix: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
+    prefix: <SlotIcon />,
   },
 };
 
 export const Suffix: Story = {
   args: {
     placeholder: "Search",
-    suffix: <CaretDownIcon />,
+    suffix: <SlotIcon />,
   },
 };
 
 export const PrefixSuffix: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
-    suffix: <CaretDownIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
   },
 };
 

diff --git a/src/input/stories/InputStack.stories.tsx b/src/input/stories/InputStack.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 import { createControls, createPreviewTabs } from "../../../.storybook/utils";
-import { CaretDownIcon, ClockIcon } from "../../icons";
+import { SlotIcon } from "../../icons";
 
 import js from "./templates/InputStackJsx";
 import ts from "./templates/InputStackTsx";
@@ -52,80 +52,81 @@ export const Invalid: Story = {
 export const Prefix: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
+    prefix: <SlotIcon />,
   },
 };
 
 export const PrefixDisabled: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
+    prefix: <SlotIcon />,
     disabled: true,
   },
 };
 
 export const PrefixInvalid: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     invalid: true,
   },
 };
 
 export const Suffix: Story = {
   args: {
     placeholder: "Search",
-    suffix: <CaretDownIcon />,
+    suffix: <SlotIcon />,
   },
 };
 
 export const SuffixDisabled: Story = {
   args: {
     placeholder: "Search",
-    suffix: <ClockIcon />,
+    suffix: <SlotIcon />,
     disabled: true,
   },
 };
 
 export const SuffixInvalid: Story = {
   args: {
     placeholder: "Search",
-    suffix: <ClockIcon />,
+    suffix: <SlotIcon />,
     invalid: true,
   },
 };
 
 export const PrefixSuffix: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
-    suffix: <CaretDownIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
   },
 };
 
 export const PrefixSuffixDisabled: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
-    suffix: <CaretDownIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     disabled: true,
   },
 };
 
 export const PrefixSuffixInvalid: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
-    suffix: <CaretDownIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     invalid: true,
   },
 };
 
 export const PrefixSuffixLoading: Story = {
   args: {
     placeholder: "Search",
-    prefix: <ClockIcon />,
-    suffix: <CaretDownIcon />,
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
     loading: true,
   },
 };
diff --git a/src/radio/__keys.ts b/src/radio/__keys.ts
@@ -1,7 +1,7 @@
 // Automatically generated
 export const USE_RADIO_STATE_KEYS = [
-  "value",
   "icon",
+  "value",
   "label",
   "description",
   "baseId",

diff --git a/src/select/SelectState.tsx b/src/select/SelectState.tsx
@@ -28,12 +28,12 @@ export type SelectState = {
   /**
    * True, if the value of the textarea is invalid.
    */
-  invalid?: boolean;
+  invalid: boolean;
 
   /**
    * True, if the input is loading.
    */
-  loading?: boolean;
+  loading: boolean;
 };
 
 export type SelectActions = {};

diff --git a/src/slider/__keys.ts b/src/slider/__keys.ts
@@ -30,9 +30,9 @@ export const USE_SLIDER_STATE_KEYS = [
   "aria-details",
   "state",
   "size",
+  "tooltip",
   "range",
   "knobIcon",
-  "tooltip",
 ] as const;
 export const SLIDER_THUMB_STATE_KEYS = [
   "inputRef",
@@ -70,8 +70,8 @@ export const USE_SLIDER_THUMB_STATE_KEYS = [
   "trackRef",
   "state",
   "size",
-  "knobIcon",
   "tooltip",
+  "knobIcon",
   "isDragging",
   "setIsDragging",
 ] as const;

diff --git a/src/switch/__keys.ts b/src/switch/__keys.ts
@@ -14,8 +14,8 @@ export const USE_SWITCH_STATE_KEYS = [
   "state",
   "onStateChange",
   "size",
-  "value",
   "icon",
+  "value",
   "label",
   "description",
 ] as const;