From d9ebb82f8bb55492cad09ffeba873161f161132b Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 4 Aug 2022 09:57:53 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Adornments=20support=20in=20`Input`?= =?UTF-8?q?=20component=20(#2354)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🚧 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 --- .../Input/__snapshots__/Input.test.tsx.snap | 30 +++++++++ .../HelperText/HelperText.token.ts | 62 +++++++++++++++++++ .../InputWrapper/HelperText/HelperText.tsx | 52 ++++++++++++++++ .../InputWrapper/HelperText/index.ts | 1 + .../Search/__snapshots__/Search.test.tsx.snap | 17 ++++- .../__snapshots__/SingleSelect.test.tsx.snap | 19 ++++++ 6 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts diff --git a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap index e7eb5b8df3..74b57d7a9f 100644 --- a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap +++ b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap @@ -6,6 +6,9 @@ exports[`Input Matches snapshot 1`] = ` --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; + --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); + --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); + position: relative; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -15,10 +18,19 @@ exports[`Input Matches snapshot 1`] = ` -ms-flex-direction: row; flex-direction: row; border: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border: none; box-sizing: border-box; height: 36px; box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); background: var(--eds_ui_background__light,rgba(247,247,247,1)); + background: var(--eds_ui_background__light,rgba(247,247,247,1)); outline: 1px solid transparent; outline-offset: 0px; background: transparent; @@ -31,6 +43,24 @@ exports[`Input Matches snapshot 1`] = ` outline-offset: 0px; } +.c1 { + width: 100%; + border: none; + background: transparent; + padding-left: 8px; + padding-top: 6px; + padding-right: 8px; + padding-bottom: 6px; + background: transparent; + box-shadow: none; +} + +.c0:focus-within { + box-shadow: none; + outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1)); + outline-offset: 0px; +} + .c1 { width: 100%; border: none; diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts new file mode 100644 index 0000000000..485c079ae4 --- /dev/null +++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts @@ -0,0 +1,62 @@ +import { tokens } from '@equinor/eds-tokens' +import type { Spacing, Typography } from '@equinor/eds-tokens' + +const { + colors, + spacings: { comfortable }, + typography, +} = tokens + +export type HelperTextProps = { + background: string + typography: Typography + spacings: { + comfortable: Spacing + compact: Spacing + } +} + +export const helperText: HelperTextProps = { + background: colors.ui.background__light.hex, + typography: { + ...typography.input.helper, + color: colors.text.static_icons__tertiary.rgba, + }, + spacings: { + comfortable: { + left: comfortable.small, + right: comfortable.small, + top: comfortable.small, + bottom: '6px', + }, + compact: { + left: comfortable.small, + right: comfortable.small, + top: comfortable.xx_small, + bottom: '6px', + }, + }, +} + +const colorVariants = { + default: { + color: colors.text.static_icons__tertiary.hex, + disabledColor: colors.interactive.disabled__text.hex, + focusColor: colors.text.static_icons__tertiary.hex, + }, + error: { + color: colors.interactive.danger__text.hex, + disabledColor: colors.interactive.disabled__text.hex, + focusColor: colors.interactive.danger__hover.hex, + }, + warning: { + color: colors.interactive.warning__text.hex, + disabledColor: colors.interactive.disabled__text.hex, + focusColor: colors.interactive.warning__hover.hex, + }, + success: { + color: colors.interactive.success__text.hex, + disabledColor: colors.interactive.disabled__text.hex, + focusColor: colors.interactive.success__hover.hex, + }, +} diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx new file mode 100644 index 0000000000..6825f626d9 --- /dev/null +++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx @@ -0,0 +1,52 @@ +import { forwardRef, ReactNode, HTMLAttributes } from 'react' +import styled, { css } from 'styled-components' +import { typographyMixin } from '@equinor/eds-utils' +import { helperText as tokens } from './HelperText.token' + +type ContainerProps = { + color?: string +} + +const Container = styled.div(({ color }) => + css({ + display: 'grid', + gap: '8px', + gridAutoFlow: 'column', + alignItems: 'start', + justifyContent: 'start', + color, + }), +) +const Text = styled.p` + margin: 0; + ${typographyMixin(tokens.typography)}; +` + +type HelperTextProps = { + /** Helper text */ + text?: string + /** Icon */ + icon?: ReactNode + /** Color */ + color?: string +} & HTMLAttributes + +const TextfieldHelperText = forwardRef( + function TextfieldHelperText( + { text, icon, color = tokens.typography.color, ...rest }, + ref, + ) { + if (!text) { + return null + } + + return ( + + {icon} + {text} + + ) + }, +) + +export { TextfieldHelperText as HelperText } diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts new file mode 100644 index 0000000000..23c77d008a --- /dev/null +++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts @@ -0,0 +1 @@ +export { HelperText } from './HelperText' diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap index c82092cf68..c20cc63e1e 100644 --- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap +++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap @@ -103,6 +103,9 @@ exports[`Search Matches snapshot 1`] = ` } .c1 { + --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); + --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); + position: relative; --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; @@ -115,10 +118,19 @@ exports[`Search Matches snapshot 1`] = ` -ms-flex-direction: row; flex-direction: row; border: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border: none; box-sizing: border-box; height: 36px; box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); background: var(--eds_ui_background__light,rgba(247,247,247,1)); + background: var(--eds_ui_background__light,rgba(247,247,247,1)); outline: 1px solid transparent; outline-offset: 0px; } @@ -137,14 +149,17 @@ exports[`Search Matches snapshot 1`] = ` padding-top: 6px; padding-right: 8px; padding-bottom: 6px; + margin: 0; + color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); font-family: Equinor; font-size: 1.000rem; font-weight: 400; + line-height: 1.500em; -webkit-letter-spacing: 0.025em; -moz-letter-spacing: 0.025em; -ms-letter-spacing: 0.025em; letter-spacing: 0.025em; - line-height: 1.500em; + text-align: left; outline: none; } diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap index 3632b3af1b..5fc45059d2 100644 --- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap +++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap @@ -29,6 +29,9 @@ exports[`SingleSelect Matches snapshot 1`] = ` } .c4 { + --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); + --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); + position: relative; --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; @@ -55,6 +58,22 @@ exports[`SingleSelect Matches snapshot 1`] = ` outline-offset: 0px; } +.c6 { + width: 100%; + border: none; + background: transparent; + padding-left: 8px; + padding-top: 6px; + padding-right: 8px; + padding-bottom: 6px; +} + +.c4:focus-within { + box-shadow: none; + outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1)); + outline-offset: 0px; +} + .c6 { width: 100%; border: none;