From 78a1cc07e2aafc12f466901af36995b23b5f6fd0 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 1/2] Tweak design of field atoms --- .../__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 ++ .../__snapshots__/SearchInput.spec.tsx.snap | 6 +++ .../Select/__snapshots__/Select.spec.tsx.snap | 23 ++++++++++ .../__snapshots__/TextArea.spec.tsx.snap | 44 +++++++++++++++++++ 10 files changed, 162 insertions(+), 7 deletions(-) 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 6273bcbc36..88713d6c92 100644 --- a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap +++ b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap @@ -14,7 +14,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; } [disabled] .circuit-2, @@ -161,7 +164,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; } [disabled] .circuit-2, @@ -312,7 +318,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; } [disabled] .circuit-2, diff --git a/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx b/packages/circuit-ui/components/FieldAtoms/FieldLabelText.tsx index 9404a7c4db..ead2a83de9 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}; [disabled] &, .${CLASS_DISABLED} & { @@ -58,8 +61,10 @@ 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; [disabled] &, .${CLASS_DISABLED} & { @@ -67,6 +72,8 @@ const Optional = styled('span')` } `; +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 ddbb7665fe..4d55bcf520 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}; @@ -43,10 +45,14 @@ 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}; [disabled] &, .${CLASS_DISABLED} & { @@ -54,10 +60,14 @@ const validStyles = ({ showValid }: FieldValidationHintProps) => } `; -const warningStyles = ({ hasWarning }: FieldValidationHintProps) => +const warningStyles = ({ + theme, + hasWarning, +}: StyleProps & FieldValidationHintProps) => hasWarning && css` color: var(--cui-fg-warning); + font-weight: ${theme.fontWeight.bold}; [disabled] &, .${CLASS_DISABLED} & { @@ -65,10 +75,14 @@ const warningStyles = ({ hasWarning }: FieldValidationHintProps) => } `; -const invalidStyles = ({ invalid }: FieldValidationHintProps) => +const invalidStyles = ({ + theme, + invalid, +}: StyleProps & FieldValidationHintProps) => invalid && css` color: var(--cui-fg-danger); + font-weight: ${theme.fontWeight.bold}; [disabled] &, .${CLASS_DISABLED} & { @@ -109,7 +123,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 686f836669..d39ebcd118 100644 --- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap +++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap @@ -1985,10 +1985,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; } [disabled] .circuit-13, @@ -2119,8 +2122,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 e6aef6375d..bfbf59c4f4 100644 --- a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap +++ b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap @@ -14,7 +14,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; } [disabled] .circuit-2, @@ -119,7 +122,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; } [disabled] .circuit-2, @@ -223,7 +229,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; } [disabled] .circuit-2, @@ -297,6 +306,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; @@ -359,7 +370,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; } [disabled] .circuit-2, @@ -488,7 +502,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; } [disabled] .circuit-2, @@ -625,7 +642,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; } [disabled] .circuit-2, @@ -741,7 +761,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; } [disabled] .circuit-2, @@ -856,7 +879,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; } [disabled] .circuit-2, @@ -960,7 +986,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; } [disabled] .circuit-2, @@ -1092,7 +1121,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; } [disabled] .circuit-2, @@ -1209,7 +1241,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; } [disabled] .circuit-2, @@ -1325,7 +1360,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; } [disabled] .circuit-2, @@ -1440,7 +1478,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; } [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 84d31bc2ac..3ba73abc15 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -768,7 +768,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 53be6b1970..f63597d299 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 @@ -15,7 +15,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/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap index 3e2fa6415d..20faca66af 100644 --- a/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap +++ b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap @@ -14,7 +14,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; } [disabled] .circuit-2, @@ -143,7 +146,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; } [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 397005145a..23596c2497 100644 --- a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap +++ b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap @@ -14,7 +14,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; } [disabled] .circuit-2, @@ -195,7 +198,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; } [disabled] .circuit-2, @@ -401,7 +407,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; } [disabled] .circuit-2, @@ -505,6 +514,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; @@ -613,7 +624,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; @@ -813,7 +827,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; } [disabled] .circuit-2, @@ -1004,7 +1021,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; } [disabled] .circuit-2, @@ -1184,7 +1204,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; } [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 4f16a49cac..c3a682469b 100644 --- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap +++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap @@ -14,7 +14,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; } [disabled] .circuit-2, @@ -119,7 +122,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; } [disabled] .circuit-2, @@ -223,7 +229,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; } [disabled] .circuit-2, @@ -340,7 +349,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; } [disabled] .circuit-2, @@ -456,7 +468,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; } [disabled] .circuit-2, @@ -533,6 +548,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; @@ -592,7 +609,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; } [disabled] .circuit-2, @@ -721,7 +741,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; } [disabled] .circuit-2, @@ -854,7 +877,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; } [disabled] .circuit-2, @@ -969,7 +995,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; } [disabled] .circuit-2, @@ -1073,7 +1102,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; } [disabled] .circuit-2, @@ -1205,7 +1237,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; } [disabled] .circuit-2, @@ -1322,7 +1357,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; } [disabled] .circuit-2, @@ -1437,7 +1475,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; } [disabled] .circuit-2, @@ -1568,7 +1609,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; } [disabled] .circuit-2, From 5fee865d21f3a1fafda1e669d3eab124f509ca39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 11 May 2023 22:19:21 +0200 Subject: [PATCH 2/2] Increase border-radius of form fields --- .../__snapshots__/CurrencyInput.spec.tsx.snap | 6 ++-- .../circuit-ui/components/Input/Input.tsx | 2 +- .../Input/__snapshots__/Input.spec.tsx.snap | 26 ++++++++--------- .../__snapshots__/Pagination.spec.tsx.snap | 2 +- .../__snapshots__/PageSelect.spec.tsx.snap | 2 +- .../components/SearchInput/SearchInput.tsx | 2 +- .../__snapshots__/SearchInput.spec.tsx.snap | 4 +-- .../circuit-ui/components/Select/Select.tsx | 2 +- .../Select/__snapshots__/Select.spec.tsx.snap | 14 +++++----- .../components/Selector/Selector.tsx | 4 +-- .../__snapshots__/TextArea.spec.tsx.snap | 28 +++++++++---------- 11 files changed, 46 insertions(+), 46 deletions(-) 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 88713d6c92..5a560ce837 100644 --- a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap +++ b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap @@ -58,7 +58,7 @@ exports[`CurrencyInput Styles should render a currency as a prefix 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -186,7 +186,7 @@ exports[`CurrencyInput Styles should render a currency as a suffix 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -362,7 +362,7 @@ exports[`CurrencyInput Styles should render with default styles and format 1`] = background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx index 6f169a22f6..774118fdd1 100644 --- a/packages/circuit-ui/components/Input/Input.tsx +++ b/packages/circuit-ui/components/Input/Input.tsx @@ -121,7 +121,7 @@ const inputBaseStyles = ({ theme }: StyleProps) => css` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: ${theme.borderRadius.byte}; + border-radius: ${theme.borderRadius.kilo}; padding: ${theme.spacings.kilo} ${theme.spacings.mega}; transition: box-shadow ${theme.transitions.default}, padding ${theme.transitions.default}; 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 bfbf59c4f4..8627600502 100644 --- a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap +++ b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap @@ -36,7 +36,7 @@ exports[`Input Styles should prioritize disabled over error styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -144,7 +144,7 @@ exports[`Input Styles should prioritize disabled over warning styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -251,7 +251,7 @@ exports[`Input Styles should render with a description when passed the validatio background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -401,7 +401,7 @@ exports[`Input Styles should render with a prefix when passed the prefix prop 1` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -524,7 +524,7 @@ exports[`Input Styles should render with a suffix when passed the suffix prop 1` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -664,7 +664,7 @@ exports[`Input Styles should render with custom styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -783,7 +783,7 @@ exports[`Input Styles should render with default styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -901,7 +901,7 @@ exports[`Input Styles should render with disabled styles when passed the disable background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1008,7 +1008,7 @@ exports[`Input Styles should render with invalid styles when passed the invalid background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1143,7 +1143,7 @@ exports[`Input Styles should render with readonly styles when passed the readOnl background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1263,7 +1263,7 @@ exports[`Input Styles should render with right aligned text 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1382,7 +1382,7 @@ exports[`Input Styles should render with valid styles when passed the showValid background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1500,7 +1500,7 @@ exports[`Input Styles should render with warning styles when passed the hasWarni background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; 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 3ba73abc15..349a3a0c59 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -805,7 +805,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; 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 f63597d299..51d51c4a95 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 @@ -52,7 +52,7 @@ HTMLCollection [ background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.tsx index debb5ffb4e..f7df8cb1d7 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.tsx @@ -46,7 +46,7 @@ const clearButtonStyles = ({ theme }: StyleProps) => css` pointer-events: all !important; cursor: pointer !important; padding: 16px !important; - border-radius: ${theme.borderRadius.byte}; + border-radius: ${theme.borderRadius.kilo}; `; const ClearButton = styled(IconButton)(clearButtonStyles); 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 20faca66af..07102911e2 100644 --- a/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap +++ b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap @@ -45,7 +45,7 @@ exports[`SearchInput should grey out icon when disabled 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -177,7 +177,7 @@ exports[`SearchInput should render with default styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx index 30be1c571d..71252630e5 100644 --- a/packages/circuit-ui/components/Select/Select.tsx +++ b/packages/circuit-ui/components/Select/Select.tsx @@ -130,7 +130,7 @@ const selectBaseStyles = ({ theme }: StyleProps) => css` background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: ${theme.borderRadius.byte}; + border-radius: ${theme.borderRadius.kilo}; box-shadow: none; color: var(--cui-fg-normal); margin: 0; 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 23596c2497..0229a30bb4 100644 --- a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap +++ b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap @@ -42,7 +42,7 @@ exports[`Select Styles should not render with invalid styles when also passed th background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -236,7 +236,7 @@ exports[`Select Styles should render with a prefix when passed the prefix prop 1 background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -435,7 +435,7 @@ exports[`Select Styles should render with a tooltip when passed a validation hin background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -661,7 +661,7 @@ exports[`Select Styles should render with a visually-hidden label 1`] = ` background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -855,7 +855,7 @@ exports[`Select Styles should render with default styles 1`] = ` background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -1049,7 +1049,7 @@ exports[`Select Styles should render with disabled styles when passed the disabl background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; @@ -1232,7 +1232,7 @@ exports[`Select Styles should render with invalid styles when passed the invalid background-color: var(--cui-bg-normal); outline: none; border: 0; - border-radius: 8px; + border-radius: 12px; box-shadow: none; color: var(--cui-fg-normal); margin: 0; diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx index 1d134be1a4..b078e66caa 100644 --- a/packages/circuit-ui/components/Selector/Selector.tsx +++ b/packages/circuit-ui/components/Selector/Selector.tsx @@ -96,7 +96,7 @@ const baseStyles = ({ theme }: StyleProps) => css` color: var(--cui-fg-normal); text-align: center; position: relative; - border-radius: ${theme.borderRadius.byte}; + border-radius: ${theme.borderRadius.kilo}; transition: box-shadow ${theme.transitions.default}; &::before { @@ -109,7 +109,7 @@ const baseStyles = ({ theme }: StyleProps) => css` left: 0; width: 100%; height: 100%; - border-radius: ${theme.borderRadius.byte}; + border-radius: ${theme.borderRadius.kilo}; border: ${theme.borderWidth.kilo} solid var(--cui-border-normal); transition: border ${theme.transitions.default}; } 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 c3a682469b..21991c9ad8 100644 --- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap +++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap @@ -36,7 +36,7 @@ exports[`TextArea should prioritize disabled over error styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -144,7 +144,7 @@ exports[`TextArea should prioritize disabled over warning styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -251,7 +251,7 @@ exports[`TextArea should render minRows props as rows when passed if rows is aut background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -371,7 +371,7 @@ exports[`TextArea should render rows props when passed 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -490,7 +490,7 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -640,7 +640,7 @@ exports[`TextArea should render with a prefix when passed the prefix prop 1`] = background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -763,7 +763,7 @@ exports[`TextArea should render with a suffix when passed the suffix prop 1`] = background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -899,7 +899,7 @@ exports[`TextArea should render with default styles 1`] = ` background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1017,7 +1017,7 @@ exports[`TextArea should render with disabled styled when passed the disabled pr background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1124,7 +1124,7 @@ exports[`TextArea should render with invalid styles when passed the invalid prop background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1259,7 +1259,7 @@ exports[`TextArea should render with readonly styles when passed the readonly pr background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1379,7 +1379,7 @@ exports[`TextArea should render with valid styles when passed the showValid prop background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1497,7 +1497,7 @@ exports[`TextArea should render with warning styles when passed the hasWarning p background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; @@ -1631,7 +1631,7 @@ exports[`TextArea should render without rows props when passed if rows is auto 1 background-color: var(--cui-bg-normal); border: none; outline: 0; - border-radius: 8px; + border-radius: 12px; padding: 12px 16px; -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out; transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;