From 8ac68d75ec9c360af966ea48f01399d93ad8a32a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 11 May 2023 22:18:12 +0200 Subject: [PATCH] Tweak design of field atoms --- .../__snapshots__/Checkbox.spec.tsx.snap | 7 ++- .../__snapshots__/CheckboxGroup.spec.tsx.snap | 3 ++ .../__snapshots__/CurrencyInput.spec.tsx.snap | 9 ++++ .../components/FieldAtoms/FieldLabelText.tsx | 9 +++- .../FieldAtoms/FieldValidationHint.tsx | 24 +++++++--- .../__snapshots__/ImageInput.spec.tsx.snap | 7 ++- .../Input/__snapshots__/Input.spec.tsx.snap | 41 +++++++++++++++++ .../__snapshots__/Pagination.spec.tsx.snap | 3 ++ .../__snapshots__/PageSelect.spec.tsx.snap | 3 ++ .../RadioButtonGroup.spec.tsx.snap | 3 ++ .../__snapshots__/SearchInput.spec.tsx.snap | 6 +++ .../Select/__snapshots__/Select.spec.tsx.snap | 23 ++++++++++ .../__snapshots__/TextArea.spec.tsx.snap | 44 +++++++++++++++++++ 13 files changed, 174 insertions(+), 8 deletions(-) diff --git a/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap index bfea4bc0c7..61e9b765f3 100644 --- a/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap +++ b/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap @@ -632,10 +632,13 @@ exports[`Checkbox Styles should render with invalid styles and an error message line-height: 1.25rem; display: block; margin-top: 4px; + margin-right: 4px; + margin-left: 4px; color: var(--cui-fg-subtle); -webkit-transition: color 120ms ease-in-out; transition: color 120ms ease-in-out; color: var(--cui-fg-danger); + font-weight: 700; } .cui-field-disabled .circuit-3 { @@ -705,8 +708,10 @@ exports[`Checkbox Styles should render with invalid styles and an error message xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/circuit-ui/components/CheckboxGroup/__snapshots__/CheckboxGroup.spec.tsx.snap b/packages/circuit-ui/components/CheckboxGroup/__snapshots__/CheckboxGroup.spec.tsx.snap index 1bac702b12..092f151d90 100644 --- a/packages/circuit-ui/components/CheckboxGroup/__snapshots__/CheckboxGroup.spec.tsx.snap +++ b/packages/circuit-ui/components/CheckboxGroup/__snapshots__/CheckboxGroup.spec.tsx.snap @@ -12,7 +12,10 @@ exports[`CheckboxGroup Styles should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap index 3301b28a2d..29565a3847 100644 --- a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap +++ b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap @@ -13,7 +13,10 @@ exports[`CurrencyInput Styles should render a currency as a prefix 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -158,7 +161,10 @@ exports[`CurrencyInput Styles should render a currency as a suffix 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -307,7 +313,10 @@ exports[`CurrencyInput Styles should render with default styles and format 1`] = .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx b/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx index ae870ba060..3259311392 100644 --- a/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx +++ b/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx @@ -45,7 +45,10 @@ export interface FieldLabelTextProps extends HTMLAttributes { const baseStyles = ({ theme }: StyleProps) => css` display: inline-block; + margin-right: ${theme.spacings.bit}; margin-bottom: ${theme.spacings.bit}; + margin-left: ${theme.spacings.bit}; + font-weight: ${theme.fontWeight.bold}; .${CLASS_DISABLED} & { color: var(--cui-fg-normal-disabled); @@ -57,14 +60,18 @@ const hiddenStyles = ({ hideLabel }: Pick) => const Text = styled('span')(baseStyles, hiddenStyles); -const Optional = styled('span')` +const optionalStyles = ({ theme }: StyleProps) => css` color: var(--cui-fg-subtle); + font-weight: ${theme.fontWeight.regular}; + font-style: italic; .${CLASS_DISABLED} & { color: var(--cui-fg-subtle-disabled); } `; +const Optional = styled('span')(optionalStyles); + /** * @private */ diff --git a/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx b/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx index 2b2bc3413e..017b9404ed 100644 --- a/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx +++ b/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx @@ -15,7 +15,7 @@ import { HTMLAttributes } from 'react'; import { css } from '@emotion/react'; -import { Confirm, Notify, Alert } from '@sumup/icons'; +import { Confirm, Notify } from '@sumup/icons'; import styled, { StyleProps } from '../../styles/styled'; import { typography } from '../../styles/style-mixins'; @@ -34,6 +34,8 @@ export interface FieldValidationHintProps const wrapperStyles = ({ theme }: StyleProps) => css` display: block; margin-top: ${theme.spacings.bit}; + margin-right: ${theme.spacings.bit}; + margin-left: ${theme.spacings.bit}; color: var(--cui-fg-subtle); transition: color ${theme.transitions.default}; @@ -42,30 +44,42 @@ const wrapperStyles = ({ theme }: StyleProps) => css` } `; -const validStyles = ({ showValid }: FieldValidationHintProps) => +const validStyles = ({ + theme, + showValid, +}: StyleProps & FieldValidationHintProps) => showValid && css` color: var(--cui-fg-success); + font-weight: ${theme.fontWeight.bold}; .${CLASS_DISABLED} & { color: var(--cui-fg-success-disabled); } `; -const warningStyles = ({ hasWarning }: FieldValidationHintProps) => +const warningStyles = ({ + theme, + hasWarning, +}: StyleProps & FieldValidationHintProps) => hasWarning && css` color: var(--cui-fg-warning); + font-weight: ${theme.fontWeight.bold}; .${CLASS_DISABLED} & { color: var(--cui-fg-warning-disabled); } `; -const invalidStyles = ({ invalid }: FieldValidationHintProps) => +const invalidStyles = ({ + theme, + invalid, +}: StyleProps & FieldValidationHintProps) => invalid && css` color: var(--cui-fg-danger); + font-weight: ${theme.fontWeight.bold}; .${CLASS_DISABLED} & { color: var(--cui-fg-danger-disabled); @@ -105,7 +119,7 @@ const getIcon = (props: FieldValidationHintProps) => { case props.invalid: { return ( - + ); } diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap index dbbcce1e2d..4c98f67b0a 100644 --- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap +++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap @@ -1980,10 +1980,13 @@ exports[`ImageInput Styles should render with invalid styles and an error messag line-height: 1.25rem; display: block; margin-top: 4px; + margin-right: 4px; + margin-left: 4px; color: var(--cui-fg-subtle); -webkit-transition: color 120ms ease-in-out; transition: color 120ms ease-in-out; color: var(--cui-fg-danger); + font-weight: 700; } .cui-field-disabled .circuit-13 { @@ -2112,8 +2115,10 @@ exports[`ImageInput Styles should render with invalid styles and an error messag xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap index 8fd7b9e0ed..eb7627e4d5 100644 --- a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap +++ b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap @@ -13,7 +13,10 @@ exports[`Input Styles should prioritize disabled over error styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -116,7 +119,10 @@ exports[`Input Styles should prioritize disabled over warning styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -218,7 +224,10 @@ exports[`Input Styles should render with a description when passed the validatio .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -291,6 +300,8 @@ exports[`Input Styles should render with a description when passed the validatio line-height: 1.25rem; display: block; margin-top: 4px; + margin-right: 4px; + margin-left: 4px; color: var(--cui-fg-subtle); -webkit-transition: color 120ms ease-in-out; transition: color 120ms ease-in-out; @@ -351,7 +362,10 @@ exports[`Input Styles should render with a prefix when passed the prefix prop 1` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -478,7 +492,10 @@ exports[`Input Styles should render with a suffix when passed the suffix prop 1` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -613,7 +630,10 @@ exports[`Input Styles should render with custom styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -727,7 +747,10 @@ exports[`Input Styles should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -840,7 +863,10 @@ exports[`Input Styles should render with disabled styles when passed the disable .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -942,7 +968,10 @@ exports[`Input Styles should render with invalid styles when passed the invalid .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1072,7 +1101,10 @@ exports[`Input Styles should render with readonly styles when passed the readOnl .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1187,7 +1219,10 @@ exports[`Input Styles should render with right aligned text 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1301,7 +1336,10 @@ exports[`Input Styles should render with valid styles when passed the showValid .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1414,7 +1452,10 @@ exports[`Input Styles should render with warning styles when passed the hasWarni .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap index 92dfc2bd21..a90594bf46 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -767,7 +767,10 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] .circuit-8 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; border: 0; clip: rect(0 0 0 0); height: 1px; diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap index 19497739b8..f8989eedbe 100644 --- a/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap @@ -14,7 +14,10 @@ HTMLCollection [ .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; border: 0; clip: rect(0 0 0 0); height: 1px; diff --git a/packages/circuit-ui/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.tsx.snap index 907f18bf6e..54bd880d69 100644 --- a/packages/circuit-ui/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.tsx.snap +++ b/packages/circuit-ui/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.tsx.snap @@ -12,7 +12,10 @@ exports[`RadioButtonGroup Styles should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap index 4d80963c31..844c73dc49 100644 --- a/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap +++ b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap @@ -13,7 +13,10 @@ exports[`SearchInput should grey out icon when disabled 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -140,7 +143,10 @@ exports[`SearchInput should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap index d88f7ecf0b..20a445c074 100644 --- a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap +++ b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap @@ -13,7 +13,10 @@ exports[`Select Styles should not render with invalid styles when also passed th .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -192,7 +195,10 @@ exports[`Select Styles should render with a prefix when passed the prefix prop 1 .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -396,7 +402,10 @@ exports[`Select Styles should render with a tooltip when passed a validation hin .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -499,6 +508,8 @@ select:not(:active)~.circuit-7 { line-height: 1.25rem; display: block; margin-top: 4px; + margin-right: 4px; + margin-left: 4px; color: var(--cui-fg-subtle); -webkit-transition: color 120ms ease-in-out; transition: color 120ms ease-in-out; @@ -605,7 +616,10 @@ exports[`Select Styles should render with a visually-hidden label 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; border: 0; clip: rect(0 0 0 0); height: 1px; @@ -803,7 +817,10 @@ exports[`Select Styles should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -992,7 +1009,10 @@ exports[`Select Styles should render with disabled styles when passed the disabl .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1170,7 +1190,10 @@ exports[`Select Styles should render with invalid styles when passed the invalid .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { diff --git a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap index f86019b876..985013fc14 100644 --- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap +++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap @@ -13,7 +13,10 @@ exports[`TextArea should prioritize disabled over error styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -116,7 +119,10 @@ exports[`TextArea should prioritize disabled over warning styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -218,7 +224,10 @@ exports[`TextArea should render minRows props as rows when passed if rows is aut .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -333,7 +342,10 @@ exports[`TextArea should render rows props when passed 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -447,7 +459,10 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -523,6 +538,8 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr line-height: 1.25rem; display: block; margin-top: 4px; + margin-right: 4px; + margin-left: 4px; color: var(--cui-fg-subtle); -webkit-transition: color 120ms ease-in-out; transition: color 120ms ease-in-out; @@ -580,7 +597,10 @@ exports[`TextArea should render with a prefix when passed the prefix prop 1`] = .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -707,7 +727,10 @@ exports[`TextArea should render with a suffix when passed the suffix prop 1`] = .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -838,7 +861,10 @@ exports[`TextArea should render with default styles 1`] = ` .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -951,7 +977,10 @@ exports[`TextArea should render with disabled styled when passed the disabled pr .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1053,7 +1082,10 @@ exports[`TextArea should render with invalid styles when passed the invalid prop .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1183,7 +1215,10 @@ exports[`TextArea should render with readonly styles when passed the readonly pr .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1298,7 +1333,10 @@ exports[`TextArea should render with valid styles when passed the showValid prop .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1411,7 +1449,10 @@ exports[`TextArea should render with warning styles when passed the hasWarning p .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 { @@ -1540,7 +1581,10 @@ exports[`TextArea should render without rows props when passed if rows is auto 1 .circuit-2 { display: inline-block; + margin-right: 4px; margin-bottom: 4px; + margin-left: 4px; + font-weight: 700; } .cui-field-disabled .circuit-2 {