Fix: label all letters capitalized

traefik · Jan 19, 2022 · 45aa5ed · 45aa5ed
1 parent 23eeaff
commit 45aa5ed
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/components/Label/Label.stories.tsx b/components/Label/Label.stories.tsx
@@ -24,7 +24,7 @@ export default {
 const Template: ComponentStory<typeof LabelForStory> = ({ id, ...args }) => (
   <Box>
     <LabelForStory htmlFor={id} css={{ mr: '$2' }} {...args}>
-      Email
+      Email field
     </LabelForStory>
     <input id={id} name="email" type="email" />
   </Box>
@@ -44,6 +44,16 @@ Capitalized.args = {
 };
 ignoreArgType('id', Capitalized);
 
+export const CapitalizedWords = Template.bind({});
+
+CapitalizedWords.args = {
+  id: 'capitalize-words',
+  transform: 'capitalizeWords'
+};
+ignoreArgType('id', CapitalizedWords);
+
+
+
 export const Uppercased = Template.bind({});
 Uppercased.args = {
   id: 'uppercase',

diff --git a/components/Text/Text.stories.tsx b/components/Text/Text.stories.tsx
@@ -40,6 +40,23 @@ export const Variant: ComponentStory<typeof TextForStory> = ({ variant, ...args
   </Flex>
 );
 
+export const Transform: ComponentStory<typeof TextForStory> = ({ transform, ...args }) => (
+  <Flex gap={2}>
+    <TextForStory {...args} >
+      default text
+    </TextForStory>
+    <TextForStory {...args} transform='uppercase'>
+      uppercase text
+    </TextForStory>
+    <TextForStory {...args} transform='capitalize'>
+      capitalize text
+    </TextForStory>
+    <TextForStory {...args} transform='capitalizeWords'>
+      capitalize each word
+    </TextForStory>
+  </Flex>
+);
+
 export const Size: ComponentStory<typeof TextForStory> = ({ size, ...args }) => (
   <>
     <TextForStory {...args} size="0">

diff --git a/components/Text/Text.tsx b/components/Text/Text.tsx
@@ -7,7 +7,7 @@ export const Text = styled('span', {
   margin: '0',
   fontFamily: '$rubik',
   fontVariantNumeric: 'tabular-nums',
-  display: 'block',
+  display: 'inline-block',
 
   variants: {
     size: {
@@ -76,8 +76,16 @@ export const Text = styled('span', {
         textTransform: 'uppercase',
       },
       capitalize: {
+        // WARNING: this will only work with block elements (display block/inline-block)
+        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
+        display: 'inline-block',
+        '&::first-letter': {
+          textTransform: 'uppercase',
+        }
+      },
+      capitalizeWords: {
         textTransform: 'capitalize',
-      },
+      }
     },
     noWrap: {
       true: {