Merge pull request #546 from Atom-Learning/feat/fields-lg-size

feat: added lg size for input fields
Atom-Learning · Jul 25, 2023 · 79895fa · 79895fa
2 parents d05e857 + 1da23ef
commit 79895fa
Show file tree

Hide file tree

Showing 27 changed files with 1,548 additions and 148 deletions.
diff --git a/documentation/content/components.form.primitives.input.md b/documentation/content/components.form.primitives.input.md
@@ -19,6 +19,16 @@ tabs:
       <CodeBlock live={true} preview={true} code={`<Input placeholder="Placeholder text" css={{ width: 300 }} />`} language={"tsx"} />
 
 
+      All components that use input accept three size variants- "sm" | "md" | "lg"
+
+
+      <CodeBlock live={true} preview={true} code={`<Flex css={{ flexDirection: 'column' }}>
+        <Input placeholder="Small variant" css={{ width: 300 }} size="sm" />
+        <Input placeholder="Medium variant" css={{ width: 300, mt: '$2' }} size="md" />
+        <Input placeholder="Large variant" css={{ width: 300, mt: '$2' }} size="lg" />
+      </Flex>`} language={"tsx"} />
+
+
       ## Accessibility
 
 

diff --git a/lib/src/components/combobox/Combobox.test.tsx b/lib/src/components/combobox/Combobox.test.tsx
@@ -41,4 +41,19 @@ describe('Combobox component', () => {
 
     expect(combobox).toHaveValue('Apple')
   })
+
+  it('renders with lg size', async () => {
+    const { container } = render(
+      <Combobox openOnFocus aria-label="Favourite fruit">
+        <Combobox.Input id="fruit" size="lg" />
+        <Combobox.Popover>
+          <Combobox.List>
+            <Combobox.Option value="Apple" />
+          </Combobox.List>
+        </Combobox.Popover>
+      </Combobox>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
 })
diff --git a/lib/src/components/combobox/ComboboxInput.tsx b/lib/src/components/combobox/ComboboxInput.tsx
@@ -1,11 +1,13 @@
+import * as React from 'react'
+
 import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'
 
 import { styled, theme } from '~/stitches'
+import { Override } from '~/utilities/types'
 import { encodeBackgroundIcon } from '~/utilities'
 
-export const ComboboxInput = styled(BaseComboboxInput, {
+export const StyledComboboxInput = styled(BaseComboboxInput, {
   boxShadow: 'none', // prevent default iOS default styling
-  fontSize: '$md', // prevent iOS zooming on focus
   appearance: 'none',
   backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),
   backgroundPosition: 'right $space$3 top 50%, 0 0',
@@ -37,10 +39,37 @@ export const ComboboxInput = styled(BaseComboboxInput, {
     cursor: 'not-allowed'
   },
   variants: {
+    size: {
+      sm: {
+        height: '$3',
+        fontSize: '$sm',
+        lineHeight: 1.7
+      },
+      md: {
+        height: '$4',
+        fontSize: '$md',
+        lineHeight: 2
+      },
+      lg: {
+        height: '$5',
+        fontSize: '$md',
+        lineHeight: 2
+      }
+    },
     state: {
       error: {
         border: '1px solid $danger'
       }
     }
   }
 })
+
+export type ComboboxInputProps = React.ComponentProps<
+  typeof StyledComboboxInput
+>
+
+export const ComboboxInput: React.FC<ComboboxInputProps> = React.forwardRef(
+  ({ size = 'md', ...rest }, ref) => {
+    return <StyledComboboxInput size={size} {...rest} ref={ref} />
+  }
+)
diff --git a/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap b/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap
@@ -2,9 +2,8 @@
 
 exports[`Combobox component renders 1`] = `
 @media  {
-  .c-bYKHLS {
+  .c-ciFqjz {
     box-shadow: none;
-    font-size: var(--fontSizes-md);
     -webkit-appearance: none;
     appearance: none;
     background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
@@ -25,17 +24,17 @@ exports[`Combobox component renders 1`] = `
     width: 100%;
   }
 
-  .c-bYKHLS::placeholder {
+  .c-ciFqjz::placeholder {
     color: var(--colors-tonal300);
     opacity: 1;
   }
 
-  .c-bYKHLS:focus-within {
+  .c-ciFqjz:focus-within {
     border-color: var(--colors-primary);
     outline: none;
   }
 
-  .c-bYKHLS[disabled] {
+  .c-ciFqjz[disabled] {
     background-color: var(--colors-tonal100);
     color: var(--colors-tonal400);
     cursor: not-allowed;
@@ -80,6 +79,14 @@ exports[`Combobox component renders 1`] = `
   }
 }
 
+@media  {
+  .c-ciFqjz-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+}
+
 <div>
   <div
     class="c-PJLV"
@@ -92,7 +99,123 @@ exports[`Combobox component renders 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-label="Favourite fruit"
-      class="c-bYKHLS"
+      class="c-ciFqjz c-ciFqjz-fwoCmE-size-md"
+      data-reach-combobox-input=""
+      data-state="idle"
+      id="fruit"
+      role="combobox"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`Combobox component renders with lg size 1`] = `
+@media  {
+  .c-ciFqjz {
+    box-shadow: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
+    background-position: right var(--space-3) top 50%, 0 0;
+    background-repeat: no-repeat, repeat;
+    background-size: 20px auto, 100%;
+    border: 1px solid var(--colors-tonal300);
+    border-radius: var(--radii-0);
+    box-sizing: border-box;
+    color: var(--colors-tonal600);
+    cursor: text;
+    display: block;
+    font-family: var(--fonts-body);
+    height: var(--sizes-4);
+    padding-left: var(--space-3);
+    padding-right: var(--space-6);
+    transition: all 100ms ease-out;
+    width: 100%;
+  }
+
+  .c-ciFqjz::placeholder {
+    color: var(--colors-tonal300);
+    opacity: 1;
+  }
+
+  .c-ciFqjz:focus-within {
+    border-color: var(--colors-primary);
+    outline: none;
+  }
+
+  .c-ciFqjz[disabled] {
+    background-color: var(--colors-tonal100);
+    color: var(--colors-tonal400);
+    cursor: not-allowed;
+  }
+
+  .c-jJeEQg {
+    background: white;
+    border: solid 1px var(--colors-tonal100);
+    border-radius: var(--radii-0);
+    box-shadow: var(--shadows-1);
+    box-sizing: border-box;
+    font-family: var(--fonts-body);
+    font-size: var(--fontSizes-md);
+    outline: none;
+    padding: var(--space-1);
+    transform: translateY(var(--space-2));
+  }
+
+  .c-uYIcy {
+    color: var(--colors-tonal500);
+    cursor: pointer;
+    margin: 0;
+    padding: var(--space-2);
+  }
+
+  .c-uYIcy:hover,
+  .c-uYIcy[aria-selected="true"] {
+    background: var(--colors-tonal50);
+    border-radius: var(--radii-0);
+  }
+
+  .c-uYIcy [data-user-value] {
+    color: var(--colors-primary);
+  }
+
+  .c-cOrACU {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+
+@media  {
+  .c-ciFqjz-fwoCmE-size-md {
+    height: var(--sizes-4);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+
+  .c-ciFqjz-jAZHIx-size-lg {
+    height: var(--sizes-5);
+    font-size: var(--fontSizes-md);
+    line-height: 2;
+  }
+}
+
+<div>
+  <div
+    class="c-PJLV"
+    data-reach-combobox=""
+    data-state="idle"
+  >
+    <input
+      aria-autocomplete="both"
+      aria-controls="listbox--13"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Favourite fruit"
+      class="c-ciFqjz c-ciFqjz-jAZHIx-size-lg"
       data-reach-combobox-input=""
       data-state="idle"
       id="fruit"