Tweak design of field atoms

sumup-oss · May 22, 2023 · 8ac68d7 · 8ac68d7
1 parent b9500fc
commit 8ac68d7
Show file tree

Hide file tree

Showing 13 changed files with 174 additions and 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
@@ -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"
           >
             <path
-              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3 11a1 1 0 0 1-1.41 0L8 9.41 6.41 11A1 1 0 0 1 5 9.59L6.59 8 5 6.41A1 1 0 0 1 5 5a1 1 0 0 1 1.41 0L8 6.59 9.59 5A1 1 0 0 1 11 5a1 1 0 0 1 0 1.41L9.41 8 11 9.59A1 1 0 0 1 11 11z"
+              clip-rule="evenodd"
+              d="M10.534 1.5c-1.126-2-3.942-2-5.069 0l-5.069 9C-.73 12.5.678 15 2.931 15h10.138c2.253 0 3.661-2.5 2.534-4.5l-5.069-9zm-3.229 8.687a1.25 1.25 0 1 1 1.39 2.08 1.25 1.25 0 0 1-1.39-2.08zM7.293 4.27A1 1 0 0 1 9 4.977v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 .293-.708z"
               fill="currentColor"
+              fill-rule="evenodd"
             />
           </svg>
         </div>

diff --git 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
@@ -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
@@ -45,7 +45,10 @@ export interface FieldLabelTextProps extends HTMLAttributes<HTMLSpanElement> {
 
 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<FieldLabelTextProps, 'hideLabel'>) =>
 
 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
@@ -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 (
         <IconWrapper>
-          <Alert role="presentation" size="16" />
+          <Notify role="presentation" size="16" />
         </IconWrapper>
       );
     }

diff --git 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"
           >
             <path
-              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3 11a1 1 0 0 1-1.41 0L8 9.41 6.41 11A1 1 0 0 1 5 9.59L6.59 8 5 6.41A1 1 0 0 1 5 5a1 1 0 0 1 1.41 0L8 6.59 9.59 5A1 1 0 0 1 11 5a1 1 0 0 1 0 1.41L9.41 8 11 9.59A1 1 0 0 1 11 11z"
+              clip-rule="evenodd"
+              d="M10.534 1.5c-1.126-2-3.942-2-5.069 0l-5.069 9C-.73 12.5.678 15 2.931 15h10.138c2.253 0 3.661-2.5 2.534-4.5l-5.069-9zm-3.229 8.687a1.25 1.25 0 1 1 1.39 2.08 1.25 1.25 0 0 1-1.39-2.08zM7.293 4.27A1 1 0 0 1 9 4.977v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 .293-.708z"
               fill="currentColor"
+              fill-rule="evenodd"
             />
           </svg>
         </div>

diff --git 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
@@ -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/...uit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/...uit-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
@@ -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 {