✨ New internal component: InputWrapper (equinor#2395)

* ✨ Adornments support in `Input` component (equinor#2354) * 🚧 WIP * 📝 Added story * wip * 🚧 WIP * 🚧 WIP * 🚧 wip * 🚚 Moved over `Input` adornment changes * ♻️ Added `OldInput` for interim development * 🐛 Fixed textarea outline * ♻️ back to new input * 🔥 removed OldInput * Testing something old * updated snapshots * its something * ♻️ working version before testing styles * ♻️ Further testing and tweaking * 📸 ✅ Updated test & snapshots * ♻️ working example * 🚚 Moved typographymixin * ♻️ Started cleaning up helpertext * 📸 Updated snapshots * Working example with colored helpertext * 🚧 WIP * 🚧 WIP * tweaks * Added description * ♻️ Textfield using `InputWrapper` (equinor#2416) * ✨ Adornments support in `Input` component (equinor#2354) * 🚧 WIP * 📝 Added story * wip * 🚧 WIP * 🚧 WIP * 🚧 wip * 🚚 Moved over `Input` adornment changes * ♻️ Added `OldInput` for interim development * 🐛 Fixed textarea outline * ♻️ back to new input * 🔥 removed OldInput * Testing something old * updated snapshots * its something * ♻️ working version before testing styles * ♻️ Further testing and tweaking * 📸 ✅ Updated test & snapshots * ♻️ working example * 🚚 Moved typographymixin * ♻️ Started cleaning up helpertext * ♻️ Working with just input * 🚧 WIP * ♻️ Fixed helper text & colors * ♻️ changed to usecallback * ⚰️ Removed unused files * ♻️ improvements to input * ♻️ Simplified adornment width * 🐛 Fixed new variant in Textarea * ♻️ Textfield with discriminating union * ♻️ re-introduced old proxy component * Fiex typing * 🗑️ Cleaning up files * Added overridablecomponent to input * 🏷️ Made as optional in overridableComponent * 🐛 Fix aria-describedby when no helpertext is provided * ♻️ Updated Textarea with input * Cleaning up helpertext * ♻️ Tweak adornments * 📸 Update snapshots * ♻️ Working textarea within Textfield * ⏪ Reverted adornment styling changes * Cleanup * ♻️ Update Textfield rstories * 📸 Update snapshots * ♻️ Re-added support for manual width * ♻️ Refactor `Search` to use new `InputWrapper` (equinor#2481) * ♻️ Initial rewrite of Search * ♻️ Re-introduce height on input due to compact * 📝 Updated search docs * ♻️ Introduces Inputwrapper * ✅ Updated test * 🐛 Fixed bugs * 🗑️ Clean code * Updated snapshots * 🔥 Removed unused files * 🐛 Fixed height for when multilines * 📸 Updated snapshots * 🚨 Cleaned up some linting warnings * 📝 Wording
denektenina · Oct 19, 2022 · 3ece415 · 3ece415
1 parent 75cbaaf
commit 3ece415
Show file tree

Hide file tree

Showing 46 changed files with 1,426 additions and 2,177 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,5 +15,5 @@
   "editor.formatOnSave": true,
   "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "task.allowAutomaticTasks": "off",
+  "task.allowAutomaticTasks": "off"
 }
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts
@@ -55,6 +55,7 @@ export const selectTokens: ComponentToken = {
   entities: {
     button: {
       height: '24px',
+      width: '24px',
       spacings: {
         left: spacingSmall,
         right: spacingSmall,

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -44,21 +44,6 @@ const Container = styled.div`
   position: relative;
 `
 
-const StyledInput = styled(Input)(
-  ({
-    theme: {
-      entities: { button },
-    },
-  }) => {
-    return css`
-      padding-right: calc(
-        ${button.spacings.left} + ${button.spacings.right} +
-          (${button.height} * 2)
-      );
-    `
-  },
-)
-
 const StyledList = styled(List)(
   ({ theme }) => css`
     background-color: ${theme.background};
@@ -76,11 +61,8 @@ const StyledButton = styled(Button)(
       entities: { button },
     },
   }) => css`
-    position: absolute;
     height: ${button.height};
     width: ${button.height};
-    right: ${button.spacings.right};
-    top: ${button.spacings.top};
   `,
 )
 
@@ -600,7 +582,7 @@ function AutocompleteInner<T>(
         />
 
         <Container {...getComboboxProps()}>
-          <StyledInput
+          <Input
             {...getInputProps(
               // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               getDropdownProps({
@@ -615,30 +597,38 @@ function AutocompleteInner<T>(
             readOnly={readOnly}
             onFocus={openSelect}
             onClick={openSelect}
+            rightAdornmentsWidth={24 * 2 + 8 + 8}
+            rightAdornments={
+              <>
+                {showClearButton && (
+                  <StyledButton
+                    variant="ghost_icon"
+                    disabled={disabled || readOnly}
+                    aria-label={'clear options'}
+                    title="clear"
+                    onClick={clear}
+                  >
+                    <Icon data={close} size={16} />
+                  </StyledButton>
+                )}
+                {!readOnly && (
+                  <StyledButton
+                    variant="ghost_icon"
+                    {...getToggleButtonProps({
+                      disabled: disabled || readOnly,
+                    })}
+                    aria-label={'toggle options'}
+                    title="open"
+                  >
+                    <Icon
+                      data={isOpen ? arrow_drop_up : arrow_drop_down}
+                    ></Icon>
+                  </StyledButton>
+                )}
+              </>
+            }
             {...other}
           />
-          {showClearButton && (
-            <StyledButton
-              variant="ghost_icon"
-              disabled={disabled || readOnly}
-              aria-label={'clear options'}
-              title="clear"
-              onClick={clear}
-              style={{ right: 32 }}
-            >
-              <Icon data={close} size={16} />
-            </StyledButton>
-          )}
-          <StyledButton
-            variant="ghost_icon"
-            {...getToggleButtonProps({ disabled: disabled || readOnly })}
-            aria-label={'toggle options'}
-            title="open"
-          >
-            {!readOnly && (
-              <Icon data={isOpen ? arrow_drop_up : arrow_drop_down}></Icon>
-            )}
-          </StyledButton>
         </Container>
         {disablePortal ? (
           optionsList

diff --git a/packages/eds-core-react/src/components/Input/Input.docs.mdx b/packages/eds-core-react/src/components/Input/Input.docs.mdx
@@ -52,4 +52,14 @@ It's important to link the `Input` to the corresponding label.
 
 Compact `Input` using `EdsProvider`.
 
-<Story id="inputs-input--compact" />
+<Story id="inputs-input--compact" />
+
+### With Adornments
+
+
+<Story id="inputs-input--with-adornments" />
+
+### Casted as textarea
+
+
+<Story id="inputs-input--casted" />
diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react'
+import { Story, ComponentMeta } from '@storybook/react'
+import { anchor } from '@equinor/eds-icons'
 import { Input, InputProps, Label, EdsProvider, Density } from '../..'
-import { Story } from '@storybook/react/types-6-0'
-import { ComponentMeta } from '@storybook/react'
+import styled from 'styled-components'
 import { Stack } from './../../../.storybook/components'
 import page from './Input.docs.mdx'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
 
 export default {
   title: 'Inputs/Input',
@@ -19,7 +22,7 @@ export default {
   decorators: [
     (Story) => {
       return (
-        <Stack>
+        <Stack align="stretch" direction="column">
           <Story />
         </Stack>
       )
@@ -30,53 +33,20 @@ export default {
 export const Introduction: Story<InputProps> = (args) => {
   return <Input {...args} />
 }
-Introduction.decorators = [
-  (Story) => {
-    return (
-      <Stack direction="column" align="start">
-        <Story />
-      </Stack>
-    )
-  },
-]
 
 export const Types: Story<InputProps> = () => (
   <>
     <div>
-      <Label htmlFor="textfield-normal" label="Normal" />
-      <Input
-        id="textfield-normal"
-        placeholder="Placeholder text"
-        autoComplete="off"
-      />
+      <Label htmlFor="textfield-normal" label="Text" />
+      <Input id="textfield-normal" autoComplete="off" />
     </div>
     <div>
       <Label htmlFor="textfield-number" label="Number" />
-      <Input
-        type="number"
-        id="textfield-number"
-        placeholder="Placeholder text"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-search" label="Search" />
-      <Input
-        type="search"
-        id="textfield-search"
-        placeholder="Placeholder text"
-      />
+      <Input type="number" id="textfield-number" />
     </div>
     <div>
       <Label htmlFor="textfield-password" label="Password" />
-      <Input
-        type="password"
-        id="textfield-password"
-        placeholder="Placeholder text"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-email" label="Email" />
-      <Input type="email" id="textfield-email" placeholder="Placeholder text" />
+      <Input type="password" id="textfield-password" />
     </div>
   </>
 )
@@ -144,15 +114,6 @@ export const ReadOnly: Story<InputProps> = () => (
   </>
 )
 ReadOnly.storyName = 'Read only'
-ReadOnly.decorators = [
-  (Story) => {
-    return (
-      <Stack direction="column" align="start">
-        <Story />
-      </Stack>
-    )
-  },
-]
 
 export const Accessiblity: Story<InputProps> = () => {
   // To wrap the input component inside the label element is not yet supported
@@ -163,15 +124,6 @@ export const Accessiblity: Story<InputProps> = () => {
     </>
   )
 }
-Accessiblity.decorators = [
-  (Story) => {
-    return (
-      <Stack direction="column" align="start">
-        <Story />
-      </Stack>
-    )
-  },
-]
 
 export const Compact: Story<InputProps> = () => {
   // To wrap the input component inside the label element is not yet supported
@@ -198,3 +150,103 @@ Compact.decorators = [
     )
   },
 ]
+
+const SmallButton = styled(Button)`
+  height: 24px;
+  width: 24px;
+`
+
+export const WithAdornments: Story<InputProps> = () => {
+  return (
+    <EdsProvider>
+      <Label htmlFor="adornments-default" label="Default" />
+      <Input
+        type="text"
+        id="adornments-default"
+        placeholder="Placeholder text Placeholder text"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-error" label="Error" />
+      <Input
+        type="text"
+        id="adornments-error"
+        variant="error"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-warning" label="Warning" />
+      <Input
+        type="text"
+        id="adornments-warning"
+        variant="warning"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-success" label="Success" />
+      <Input
+        type="text"
+        id="adornments-success"
+        variant="success"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-disabled" label="Disabled" />
+      <Input
+        type="text"
+        id="adornments-disabled"
+        disabled
+        placeholder="Placeholder text Placeholder text"
+        value="Some text Some textSome textSome text"
+        leftAdornments={
+          <SmallButton disabled variant="ghost_icon">
+            IT
+          </SmallButton>
+        }
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-readonly" label="Readonly" />
+      <Input
+        type="text"
+        id="adornments-readonly"
+        readOnly
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+    </EdsProvider>
+  )
+}
+
+export const casted: Story<InputProps> = (args) => {
+  return <Input as="textarea" {...args} />
+}