feat: add typography-hint-xs and typography-error-xs classes (#3006)

vuestorefront · Oct 6, 2023 · c753696 · c753696
1 parent 3c56fb2
commit c753696
Show file tree

Hide file tree

Showing 43 changed files with 118 additions and 114 deletions.
diff --git a/.changeset/brave-foxes-confess.md b/.changeset/brave-foxes-confess.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/typography': minor
+---
+
+Add typography-hint-xs and typography-error-xs classes
diff --git a/apps/docs/components/.vuepress/components/TypographyList.vue b/apps/docs/components/.vuepress/components/TypographyList.vue
@@ -44,9 +44,11 @@ const typographyClasses = [
   ['error-lg', 'fontSize.lg', 'lineHeight.7'],
   ['error-base', 'fontSize.base', 'lineHeight.6'],
   ['error-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['error-xs', 'fontSize.xs', 'lineHeight.4'],
   ['hint-lg', 'fontSize.lg', 'lineHeight.7'],
   ['hint-base', 'fontSize.base', 'lineHeight.6'],
   ['hint-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['hint-xs', 'fontSize.xs', 'lineHeight.4'],
 ];
 
 export default {

diff --git a/apps/preview/next/pages/examples/SfInput.tsx b/apps/preview/next/pages/examples/SfInput.tsx
@@ -172,7 +172,12 @@ function Example() {
             <p className="text-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
           )}
           {state.get.helpText && (
-            <p className={classNames('text-xs mt-0.5', state.get.disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p
+              className={classNames(
+                'typography-hint-xs mt-0.5',
+                state.get.disabled ? 'text-disabled-500' : 'text-neutral-500',
+              )}
+            >
               {state.get.helpText}
             </p>
           )}
@@ -183,7 +188,7 @@ function Example() {
         {state.get.characterLimit && !state.get.readonly ? (
           <p
             className={classNames(
-              'text-xs mt-0.5',
+              'typography-error-xs mt-0.5',
               state.get.disabled ? 'text-disabled-500' : getCharacterLimitClass(),
             )}
           >

diff --git a/apps/preview/next/pages/examples/SfTextarea.tsx b/apps/preview/next/pages/examples/SfTextarea.tsx
@@ -109,7 +109,7 @@ function Example() {
           disabled={state.get.disabled}
           readOnly={state.get.readonly}
           onChange={onChange}
-          className={classNames('w-full', {
+          className={classNames('w-full block', {
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': state.get.disabled,
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-neutral-500': state.get.readonly,
           })}
@@ -118,12 +118,12 @@ function Example() {
       <div className="flex justify-between">
         <div>
           {state.get.invalid && !state.get.disabled && (
-            <p className="typography-text-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
+            <p className="typography-error-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
           )}
           {state.get.helpText && (
             <p
               className={classNames(
-                'typography-text-xs mt-0.5',
+                'typography-hint-xs mt-0.5',
                 state.get.disabled ? 'text-disabled-500' : 'text-neutral-500',
               )}
             >
@@ -139,7 +139,7 @@ function Example() {
         {state.get.characterLimit && !state.get.readonly ? (
           <p
             className={classNames(
-              'typography-text-xs mt-0.5',
+              'typography-error-xs mt-0.5',
               state.get.disabled ? 'text-disabled-500' : getCharacterLimitClass(),
             )}
           >

diff --git a/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx b/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx
@@ -15,7 +15,7 @@ export default function CheckboxLeading() {
         </label>
       </div>
       <div className="flex justify-between ml-8">
-        <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+        <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       </div>
     </>
   );

diff --git a/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx b/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx
@@ -15,7 +15,7 @@ export default function CheckboxTrailing() {
         <SfCheckbox value="value" className="peer" id="checkbox" />
       </div>
       <div className="flex justify-between ml-3">
-        <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+        <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       </div>
     </>
   );

diff --git a/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx b/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx
@@ -64,17 +64,19 @@ export default function AddressForm() {
             invalid={!streetIsValid}
           />
         </label>
-        {!streetIsValid && (
-          <strong className="typography-error-sm text-negative-700 font-medium">Please provide a street name</strong>
-        )}
-        <small className="typography-text-xs text-neutral-500">Street address or P.O. Box</small>
+        <div className="flex flex-colr mt-0.5">
+          {!streetIsValid && (
+            <strong className="typography-error-sm text-negative-700 font-medium">Please provide a street name</strong>
+          )}
+          <small className="typography-hint-xs text-neutral-500 mt-0.5">Street address or P.O. Box</small>
+        </div>
       </div>
       <div className="w-full flex flex-col gap-0.5 md:w-[120px]">
         <label>
           <span className="typography-text-sm font-medium">Apt#, Suite, etc</span>
           <SfInput name="aptNo" className="mt-0.5" />
         </label>
-        <small className="typography-text-xs text-neutral-500">Optional</small>
+        <small className="typography-hint-xs text-neutral-500 mt-0.5">Optional</small>
       </div>
       <label className="w-full flex flex-col gap-0.5">
         <span className="typography-text-sm font-medium">City</span>
@@ -102,7 +104,9 @@ export default function AddressForm() {
         <SfButton type="reset" variant="secondary" className="w-full md:w-auto">
           Clear all
         </SfButton>
-        <SfButton className="w-full md:w-auto">Save</SfButton>
+        <SfButton type="submit" className="w-full md:w-auto">
+          Save
+        </SfButton>
       </div>
     </form>
   );

diff --git a/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx b/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx
@@ -321,7 +321,7 @@ export default function ComboboxBasic() {
       {!isDisabled && isValid === false && (
         <p className="text-negative-700 typography-text-sm font-medium mt-0.5">No option selected</p>
       )}
-      <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+      <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       <DisableSwitch
         className={classNames({ hidden: isOpen })}
         onChangeHandler={onDisabledChangeHandler}

diff --git a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
@@ -656,7 +656,7 @@ export default function FormFields() {
                 >
                   {label}
                 </span>
-                <span className={classNames('typography-text-xs block', { 'text-disabled-500': disabled })}>
+                <span className={classNames('typography-hint-xs block mt-0.5', { 'text-disabled-500': disabled })}>
                   {hint}
                 </span>
               </span>

diff --git a/apps/preview/next/pages/showcases/Input/InputCharacters.tsx b/apps/preview/next/pages/showcases/Input/InputCharacters.tsx
@@ -54,7 +54,7 @@ export default function InputWithLimit() {
         <div>
           {invalid && !disabled && <p className="text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>}
           {helpText && (
-            <p className={classNames('text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p className={classNames('typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
               {helpText}
             </p>
           )}
@@ -63,7 +63,12 @@ export default function InputWithLimit() {
           ) : null}
         </div>
         {characterLimit && !readonly ? (
-          <p className={classNames('text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
+          <p
+            className={classNames(
+              'typography-error-xs mt-0.5',
+              disabled ? 'text-disabled-500' : getCharacterLimitClass(),
+            )}
+          >
             {charsCount}
           </p>
         ) : null}

diff --git a/apps/preview/next/pages/showcases/Input/InputDisabled.tsx b/apps/preview/next/pages/showcases/Input/InputDisabled.tsx
@@ -12,7 +12,7 @@ export default function DisabledInputDemo() {
       </label>
       <div className="flex justify-between">
         <div>
-          <p className="text-xs text-disabled-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-disabled-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>

diff --git a/apps/preview/next/pages/showcases/Input/InputInvalid.tsx b/apps/preview/next/pages/showcases/Input/InputInvalid.tsx
@@ -13,7 +13,7 @@ export default function InvalidInput() {
       <div className="flex justify-between">
         <div>
           <p className="text-sm text-negative-700 font-medium mt-0.5">Error</p>
-          <p className="text-xs text-neutral-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>

diff --git a/apps/preview/next/pages/showcases/Input/InputReadonly.tsx b/apps/preview/next/pages/showcases/Input/InputReadonly.tsx
@@ -12,7 +12,7 @@ export default function ReadonlyInput() {
       </label>
       <div className="flex justify-between">
         <div>
-          <p className="text-xs text-neutral-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>

diff --git a/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx b/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx
@@ -36,8 +36,8 @@ export default function RadioAlignment() {
           </label>
         ))}
       </div>
-      <div className="flex justify-between mt-2">
-        <p className="text-xs text-neutral-500">Help text</p>
+      <div className="flex justify-between">
+        <p className="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
       </div>
     </>
   );

diff --git a/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx b/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx
@@ -34,8 +34,8 @@ export default function RadioWithLabelSmall() {
           </label>
         ))}
       </div>
-      <div className="flex justify-between mt-2 ml-2">
-        <p className="text-xs text-neutral-500">Help text</p>
+      <div className="flex justify-between">
+        <p className="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
       </div>
     </>
   );

diff --git a/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx b/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx
@@ -18,7 +18,7 @@ export default function SwitchAlignment() {
         />
         <span className="text-base ml-[10px] text-gray-900 cursor-pointer font-body">Label</span>
       </label>
-      <span className="text-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
+      <span className="typography-hint-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
     </>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx b/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx
@@ -18,7 +18,7 @@ export default function SwitchAlignment() {
           }}
         />
       </label>
-      <span className="text-xs mt-0.5 block text-gray-500">Help text</span>
+      <span className="typography-hint-xs mt-0.5 block text-gray-500">Help text</span>
     </>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx
@@ -17,13 +17,9 @@ export default function TextareaAutoresize() {
     <>
       <label>
         <span className="typography-text-sm font-medium">Description</span>
-        <SfTextarea ref={textareaRef} className="w-full h-max-[500px]" size="sm" aria-label="Label size sm" />
+        <SfTextarea ref={textareaRef} className="w-full h-max-[500px] block" size="sm" aria-label="Label size sm" />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx
@@ -33,7 +33,7 @@ export default function TextareaWithLimit() {
           invalid={invalid}
           disabled={disabled}
           onChange={onChange}
-          className="w-full mt-0.5"
+          className="w-full mt-0.5 block"
         />
       </label>
       <div className="flex justify-between mt-0.5">
@@ -42,13 +42,13 @@ export default function TextareaWithLimit() {
             <p className="typography-text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>
           )}
           {helpText && (
-            <p className={classNames('typography-text-xs', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p className={classNames('typography-hint-xs', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
               {helpText}
             </p>
           )}
         </div>
         {characterLimit && !readonly ? (
-          <p className={classNames('typography-text-xs', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
+          <p className={classNames('typography-error-xs', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
             {charsCount}
           </p>
         ) : null}

diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx
@@ -11,14 +11,10 @@ export default function DisabledTextareaDemo() {
         <SfTextarea
           disabled
           placeholder="Write something about yourself..."
-          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
         />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-disabled-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-disabled-500  mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx
@@ -8,13 +8,11 @@ export default function InvalidTextarea() {
     <>
       <label>
         <span className="typography-text-sm font-medium">Description</span>
-        <SfTextarea invalid placeholder="Write something about yourself..." className="w-full" />
+        <SfTextarea invalid placeholder="Write something about yourself..." className="w-full block" />
       </label>
       <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-sm text-negative-700 font-medium mt-0.5">The field cannot be empty</p>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
+        <p className="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
+        <p className="typography-hint-xs text-neutral-500">Do not include personal or financial information.</p>
       </div>
     </>
   );

diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx
@@ -10,15 +10,11 @@ export default function ReadonlyTextarea() {
         <span className="typography-text-sm font-medium">Description</span>
         <SfTextarea
           value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
-          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
           readOnly
         />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }

diff --git a/apps/preview/nuxt/pages/examples/SfInput.vue b/apps/preview/nuxt/pages/examples/SfInput.vue
@@ -22,7 +22,7 @@
     <div class="flex justify-between">
       <div>
         <p v-if="invalid && !disabled" class="text-sm text-negative-700 font-medium mt-0.5">{{ errorText }}</p>
-        <p v-if="helpText" :class="['text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
+        <p v-if="helpText" :class="['typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
           {{ helpText }}
         </p>
         <p v-if="requiredText && required" class="mt-1 text-sm font-normal text-neutral-500 before:content-['*']">
@@ -31,7 +31,7 @@
       </div>
       <p
         v-if="characterLimit && !readonly"
-        :class="['text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
+        :class="['typography-error-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
       >
         {{ charsCount }}
       </p>

diff --git a/apps/preview/nuxt/pages/examples/SfTextarea.vue b/apps/preview/nuxt/pages/examples/SfTextarea.vue
@@ -15,7 +15,7 @@
         v-bind="state"
         v-model="value"
         :class="[
-          'w-full',
+          'w-full block',
           {
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': disabled,
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-neutral-500': readonly,
@@ -28,7 +28,7 @@
         <p v-if="invalid && !disabled" class="typography-text-sm text-negative-700 font-medium mt-0.5">
           {{ errorText }}
         </p>
-        <p v-if="helpText" :class="['typography-text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
+        <p v-if="helpText" :class="['typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
           {{ helpText }}
         </p>
         <p
@@ -40,7 +40,7 @@
       </div>
       <p
         v-if="characterLimit && !readonly"
-        :class="['typography-text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
+        :class="['typography-error-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
       >
         {{ charsCount }}
       </p>

diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
@@ -6,7 +6,7 @@
     </label>
   </div>
   <div class="flex justify-between ml-8">
-    <p class="text-xs mt-0.5 text-neutral-500">Help text</p>
+    <p class="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
   </div>
 </template>
 <script lang="ts" setup>

diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue
@@ -6,7 +6,7 @@
     <SfCheckbox id="checkbox" v-model="modelValue" value="value" class="peer" />
   </div>
   <div class="flex justify-between ml-3">
-    <p class="text-xs mt-0.5 text-neutral-500">Help text</p>
+    <p class="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
   </div>
 </template>
 <script lang="ts" setup>