diff --git a/.changeset/brave-foxes-confess.md b/.changeset/brave-foxes-confess.md new file mode 100644 index 0000000000..066f484115 --- /dev/null +++ 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 index faeed80162..75d7dd264f 100644 --- 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 index d644ad42ce..05bd29396c 100644 --- a/apps/preview/next/pages/examples/SfInput.tsx +++ b/apps/preview/next/pages/examples/SfInput.tsx @@ -172,7 +172,12 @@ function Example() {
{state.get.errorText}
)} {state.get.helpText && ( -+
{state.get.helpText}
)} @@ -183,7 +188,7 @@ function Example() { {state.get.characterLimit && !state.get.readonly ? (diff --git a/apps/preview/next/pages/examples/SfTextarea.tsx b/apps/preview/next/pages/examples/SfTextarea.tsx index e76d4cc65a..aa81fec574 100644 --- 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() {
{state.get.errorText}
+{state.get.errorText}
)} {state.get.helpText && (@@ -139,7 +139,7 @@ function Example() { {state.get.characterLimit && !state.get.readonly ? (
diff --git a/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx b/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx index b5a12b2da6..fe8c0651f9 100644 --- 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() {
Help text
+Help text
Help text
+Help text
Help Text
+Help Text
Error
-Help Text
+Help Text
Help Text
+Help Text
Help text
+Help text
Help text
+Help text
Do not include personal or financial information.
-Do not include personal or financial information.
> ); } diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx index 3942a01dc6..a644cb8f9a 100644 --- 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" />{errorText}
)} {helpText && ( -+
{helpText}
)}+
{charsCount}
) : null} diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx index 22ed6a9e35..a847f01fcd 100644 --- 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() {Do not include personal or financial information.
-Do not include personal or financial information.
> ); } diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx index 7b0ce5816c..4ff374a9ea 100644 --- 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() { <>The field cannot be empty
-Do not include personal or financial information.
-The field cannot be empty
+Do not include personal or financial information.
Do not include personal or financial information.
-Do not include personal or financial information.
> ); } diff --git a/apps/preview/nuxt/pages/examples/SfInput.vue b/apps/preview/nuxt/pages/examples/SfInput.vue index d4a33e87b9..445e94f114 100644 --- a/apps/preview/nuxt/pages/examples/SfInput.vue +++ b/apps/preview/nuxt/pages/examples/SfInput.vue @@ -22,7 +22,7 @@{{ errorText }}
-+
{{ helpText }}
@@ -31,7 +31,7 @@
{{ charsCount }}
diff --git a/apps/preview/nuxt/pages/examples/SfTextarea.vue b/apps/preview/nuxt/pages/examples/SfTextarea.vue index af5462eb87..7c81a13f23 100644 --- 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 @@{{ errorText }}
-+
{{ helpText }}
{{ charsCount }}
diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue index baf0fd145f..93445b0f9c 100644 --- a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue +++ b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue @@ -6,7 +6,7 @@Help text
+Help text
The field cannot be empty
-Do not include personal or financial information.
-The field cannot be empty
+Do not include personal or financial information.
Do not include personal or financial information.
-Do not include personal or financial information.
+ diff --git a/packages/sfui/typography/index.ts b/packages/sfui/typography/index.ts index d6784de3de..c6f34f7daf 100644 --- a/packages/sfui/typography/index.ts +++ b/packages/sfui/typography/index.ts @@ -70,17 +70,22 @@ export default plugin.withOptions( ['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'], - ].reduce((p, [name, fontSize, lineHeight, fontFamily]) => { - p[name] = { - fontSize: theme(fontSize), - lineHeight: theme(lineHeight), - fontFamily: fontFamily ? theme(fontFamily) : undefined, - }; - return p; - }, {} as Record