chore: update stories to reflect xs size and tweak select icon style …

…for xs
junminahn · Jan 6, 2021 · e9e5e3a · e9e5e3a
1 parent 7442a50
commit e9e5e3a
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 44 deletions.
diff --git a/packages/input/stories/input.stories.tsx b/packages/input/stories/input.stories.tsx
@@ -50,7 +50,7 @@ export const Controlled = () => {
 
 export const WithSizes = () => (
   <Stack align="start">
-    {["sm", "md", "lg"].map((size) => (
+    {["xs", "sm", "md", "lg"].map((size) => (
       <Input size={size} placeholder="This is an input component" />
     ))}
   </Stack>

diff --git a/packages/number-input/stories/number-input.stories.tsx b/packages/number-input/stories/number-input.stories.tsx
@@ -159,29 +159,15 @@ export const allowOutOfRange = () => (
 
 export const inputSizes = () => (
   <Stack>
-    <NumberInput size="sm" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
-
-    <NumberInput size="md" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
-
-    <NumberInput size="lg" defaultValue={15} min={10}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <NumberInput key={size} size={size} defaultValue={15} min={10}>
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    ))}
   </Stack>
 )
 

diff --git a/packages/pin-input/stories/pin-input.stories.tsx b/packages/pin-input/stories/pin-input.stories.tsx
@@ -53,8 +53,8 @@ export function ComponentExample() {
 
 export const Sizes = () => (
   <>
-    {["sm", "md", "lg"].map((size, i) => (
-      <div key={i} style={{ marginBottom: "1rem" }}>
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <div key={size} style={{ marginBottom: "1rem" }}>
         <PinInput size={size} defaultValue="234">
           <PinInputField />
           <PinInputField />

diff --git a/packages/select/src/select.tsx b/packages/select/src/select.tsx
@@ -182,11 +182,8 @@ const IconWrapper = chakra("div", {
   baseStyle: {
     position: "absolute",
     display: "inline-flex",
-    width: "1.5rem",
-    height: "100%",
     alignItems: "center",
     justifyContent: "center",
-    right: "0.5rem",
     pointerEvents: "none",
     top: "50%",
     transform: "translateY(-50%)",

diff --git a/packages/select/stories/select.stories.tsx b/packages/select/stories/select.stories.tsx
@@ -67,9 +67,9 @@ export const SelectVariants = () => (
 
 export const SelectSizes = () => (
   <Stack spacing={4}>
-    <Select placeholder="large size" size="lg" />
-    <Select placeholder="default size" size="md" />
-    <Select placeholder="small size" size="sm" />
+    {["xs", "sm", "md", "lg"].map((size) => (
+      <Select placeholder={`${size} size`} size={size} key={size} />
+    ))}
   </Stack>
 )
 
@@ -103,9 +103,9 @@ const UpDownIcon = (props: any) => (
   </svg>
 )
 
-export const SelectIcon = () => {
-  return <Select icon={<UpDownIcon />} placeholder="Placeholder" size="md" />
-}
+export const SelectIcon = () => (
+  <Select icon={<UpDownIcon />} placeholder="Placeholder" size="md" />
+)
 
 export const FocusAndErrorColors = () => (
   <Stack>

diff --git a/packages/textarea/stories/textarea.stories.tsx b/packages/textarea/stories/textarea.stories.tsx
@@ -1,6 +1,6 @@
+import { chakra } from "@chakra-ui/system"
 import * as React from "react"
 import { Textarea } from "../src"
-import { chakra } from "@chakra-ui/system"
 
 export default {
   title: "Textarea",
@@ -29,6 +29,11 @@ export const invalid = () => (
 
 export const withSizes = () => (
   <>
+    <Textarea
+      size="xs"
+      placeholder="A sample placeholder"
+      defaultValue="This is a x-small textarea"
+    />
     <Textarea
       size="sm"
       placeholder="A sample placeholder"

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -50,7 +50,8 @@
     "lint:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/theme-tools": "1.0.2"
+    "@chakra-ui/theme-tools": "1.0.2",
+    "@chakra-ui/utils": "1.0.2"
   },
   "peerDependencies": {
     "@chakra-ui/system": ">=1.0.0"

diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts
@@ -1,8 +1,7 @@
 import { mode } from "@chakra-ui/theme-tools"
+import { mergeWith as merge } from "@chakra-ui/utils"
 import Input from "./input"
 
-const { sizes, defaultProps, variants } = Input
-
 const parts = ["field", "icon"]
 
 function baseStyleField(props: Record<string, any>) {
@@ -17,21 +16,35 @@ function baseStyleField(props: Record<string, any>) {
   }
 }
 
-const baseStyleInput = {
+const baseStyleIcon = {
+  width: "1.5rem",
+  height: "100%",
+  right: "0.5rem",
+  position: "relative",
   color: "currentColor",
   fontSize: "1.25rem",
-  _disabled: { opacity: 0.5 },
+  _disabled: {
+    opacity: 0.5,
+  },
 }
 
 const baseStyle = (props: Record<string, any>) => ({
   field: baseStyleField(props),
-  icon: baseStyleInput,
+  icon: baseStyleIcon,
+})
+
+const sizes = merge({}, Input.sizes, {
+  xs: {
+    icon: {
+      right: "0.25rem",
+    },
+  },
 })
 
 export default {
   parts,
   baseStyle,
   sizes,
-  variants,
-  defaultProps,
+  variants: Input.variants,
+  defaultProps: Input.defaultProps,
 }