Tweak design of field atoms

sumup-oss · May 22, 2023 · 78a1cc0 · 78a1cc0
1 parent eb445e6
commit 78a1cc0
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 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
@@ -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
@@ -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};
 
   [disabled] &,
   .${CLASS_DISABLED} & {
@@ -58,15 +61,19 @@ 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;
 
   [disabled] &,
   .${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};
 
@@ -43,32 +45,44 @@ 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} & {
       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};
 
     [disabled] &,
     .${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};
 
     [disabled] &,
     .${CLASS_DISABLED} & {
@@ -109,7 +123,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
@@ -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"
           >
             <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
@@ -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
@@ -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/...uit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/...uit-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
@@ -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,