Merge pull request chakra-ui#2751 from dodas/feat/input-xs-size

feat: add "xs" size to Input and all related components
junminahn · Jan 6, 2021 · fe9075d · fe9075d
2 parents de3d059 + e9e5e3a
commit fe9075d
Show file tree

Hide file tree

Showing 19 changed files with 153 additions and 104 deletions.
diff --git a/.changeset/bright-drinks-run.md b/.changeset/bright-drinks-run.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/theme": minor
+---
+
+The `Input` component now supports "xs" size. This change affects all components
+that extend from `Input`'s theme, such as `Select`, `PinInput`, `Textarea` or
+`NumberInput`.
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/input/tests/__snapshots__/input.test.tsx.snap b/packages/input/tests/__snapshots__/input.test.tsx.snap
@@ -16,8 +16,6 @@ exports[`Elements inside input render correctly 1`] = `
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -101,8 +99,6 @@ exports[`Elements inside input render correctly 1`] = `
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

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/number-input/tests/__snapshots__/number-input.test.tsx.snap b/packages/number-input/tests/__snapshots__/number-input.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`should render correctly 1`] = `
   padding-right: 1rem;
   height: 2.5rem;
   border-radius: 0.375rem;
+  vertical-align: top;
   border: 1px solid;
   border-color: inherit;
   background: inherit;
@@ -94,7 +95,7 @@ exports[`should render correctly 1`] = `
   border-left: 1px solid;
   border-color: inherit;
   color: inherit;
-  font-size: 10px;
+  font-size: calc(1rem * 0.75);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

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/input.ts b/packages/theme/src/components/input.ts
@@ -15,27 +15,31 @@ const baseStyle = {
 const size = {
   lg: {
     fontSize: "lg",
-    pl: 4,
-    pr: 4,
+    px: 4,
     h: 12,
     borderRadius: "md",
   },
 
   md: {
     fontSize: "md",
-    pl: 4,
-    pr: 4,
+    px: 4,
     h: 10,
     borderRadius: "md",
   },
 
   sm: {
     fontSize: "sm",
-    pl: 3,
-    pr: 3,
+    px: 3,
     h: 8,
     borderRadius: "sm",
   },
+
+  xs: {
+    fontSize: "xs",
+    px: 2,
+    h: 6,
+    borderRadius: "sm",
+  },
 }
 
 const sizes = {
@@ -51,6 +55,10 @@ const sizes = {
     field: size.sm,
     addon: size.sm,
   },
+  xs: {
+    field: size.xs,
+    addon: size.xs,
+  },
 }
 
 function getDefaults(props: Record<string, any>) {

diff --git a/packages/theme/src/components/number-input.ts b/packages/theme/src/components/number-input.ts
@@ -1,5 +1,6 @@
 import { mode } from "@chakra-ui/theme-tools"
 import Input from "./input"
+import typography from "../foundations/typography"
 
 const parts = ["field", "stepper", "stepperGroup"]
 
@@ -32,19 +33,25 @@ const baseStyle = (props: Record<string, any>) => ({
   stepper: baseStyleStepper(props),
 })
 
-function getSize(size: "sm" | "md" | "lg") {
-  const sizeStyle = Input.sizes?.[size]
+function getSize(size: "xs" | "sm" | "md" | "lg") {
+  const sizeStyle = Input.sizes[size]
 
   const radius = {
     lg: "md",
     md: "md",
     sm: "sm",
+    xs: "sm",
   }
 
+  const resolvedFontSize = typography.fontSizes[sizeStyle.field.fontSize]
+
   return {
-    field: sizeStyle?.field,
+    field: {
+      ...sizeStyle.field,
+      verticalAlign: "top",
+    },
     stepper: {
-      fontSize: size === "lg" ? "14px" : "10px",
+      fontSize: `calc(${resolvedFontSize} * 0.75)`,
       _first: {
         borderTopRightRadius: radius[size],
       },
@@ -58,6 +65,7 @@ function getSize(size: "sm" | "md" | "lg") {
 }
 
 const sizes = {
+  xs: getSize("xs"),
   sm: getSize("sm"),
   md: getSize("md"),
   lg: getSize("lg"),

diff --git a/packages/theme/src/components/pin-input.ts b/packages/theme/src/components/pin-input.ts
@@ -26,6 +26,12 @@ const sizes = {
     h: 8,
     borderRadius: "sm",
   },
+  xs: {
+    fontSize: "xs",
+    w: 6,
+    h: 6,
+    borderRadius: "sm",
+  },
 }
 
 const variants = {

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,
 }
diff --git a/packages/theme/src/components/textarea.ts b/packages/theme/src/components/textarea.ts
@@ -17,6 +17,7 @@ const variants = {
 }
 
 const sizes = {
+  xs: Input.sizes.xs.field,
   sm: Input.sizes.sm.field,
   md: Input.sizes.md.field,
   lg: Input.sizes.lg.field,

diff --git a/website/pages/docs/form/input.mdx b/website/pages/docs/form/input.mdx
@@ -32,17 +32,19 @@ Here's a basic usage example of the `Input` component:
 
 ### Changing the size of the Input
 
-There are three sizes of an Input:
+The `Input` component comes in four sizes. The default is `md`.
 
-- `sm` (`24px`)
-- `md` (`32px`)
-- `lg` (`40px`)
+- `xs` (`24px`)
+- `sm` (`32px`)
+- `md` (`40px`)
+- `lg` (`48px`)
 
 ```jsx
 <Stack spacing={3}>
-  <Input placeholder="large size" size="lg" />
-  <Input placeholder="default size" size="md" />
+  <Input placeholder="extra small size" size="xs" />
   <Input placeholder="small size" size="sm" />
+  <Input placeholder="medium size" size="md" />
+  <Input placeholder="large size" size="lg" />
 </Stack>
 ```
 

diff --git a/website/pages/docs/form/number-input.mdx b/website/pages/docs/form/number-input.mdx
@@ -182,23 +182,31 @@ the input.
 
 ```jsx
 <Stack shouldWrapChildren direction="row">
-  <NumberInput size="sm" defaultValue={15} min={10}>
+  <NumberInput size="xs" maxW={16} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />
       <NumberDecrementStepper />
     </NumberInputStepper>
   </NumberInput>
 
-  <NumberInput size="md" defaultValue={15} min={10}>
+  <NumberInput size="sm" maxW={20} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />
       <NumberDecrementStepper />
     </NumberInputStepper>
   </NumberInput>
 
-  <NumberInput size="lg" defaultValue={15} min={10}>
+  <NumberInput size="md" maxW={24} defaultValue={15} min={10}>
+    <NumberInputField />
+    <NumberInputStepper>
+      <NumberIncrementStepper />
+      <NumberDecrementStepper />
+    </NumberInputStepper>
+  </NumberInput>
+
+  <NumberInput size="lg" maxW={32} defaultValue={15} min={10}>
     <NumberInputField />
     <NumberInputStepper>
       <NumberIncrementStepper />