Merge pull request #71 from supabase/fix/typography-text-key

fix: <Typography.Text> renders text correctly without <span> tags.
supabase · Jan 15, 2021 · 92621de · 92621de
2 parents 7660da0 + f131cce
commit 92621de
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 48 deletions.
diff --git a/src/components/Typography/Text.css b/src/components/Typography/Text.css
@@ -1,4 +1,3 @@
-
 span.sbui-typography {
   @apply text-sm;
 }
@@ -26,11 +25,11 @@ span.sbui-typography-small {
 .sbui-typography.sbui-typography-disabled {
   @apply text-gray-300 dark:text-gray-400;
   /* color: rgba(0,0,0,.25); */
-    cursor: not-allowed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .sbui-typography.sbui-typography-underline {
@@ -41,26 +40,26 @@ span.sbui-typography-small {
   @apply line-through;
 }
 
-.sbui-typography mark {
+mark.sbui-typography {
   padding: 0;
   background-color: #ffe58f;
 }
 
-.sbui-typography code {
+code.sbui-typography {
   /* margin: 0 .2em; */
-  padding: .2em .4em .1em;
+  padding: 0.2em 0.4em 0.1em;
   /* font-size: 85%; */
-  background: hsla(0,0%,58.8%,.1);
-  border: 1px solid hsla(0,0%,39.2%,.2);
+  background: hsla(0, 0%, 58.8%, 0.1);
+  border: 1px solid hsla(0, 0%, 39.2%, 0.2);
   border-radius: 3px;
 }
 
-.sbui-typography kbd {
+kbd.sbui-typography {
   /* margin: 0 .2em; */
-  padding: .15em .4em .1em;
+  padding: 0.15em 0.4em 0.1em;
   /* font-size: 90%; */
-  background: hsla(0,0%,58.8%,.06);
-  border: solid hsla(0,0%,39.2%,.2);
+  background: hsla(0, 0%, 58.8%, 0.06);
+  border: solid hsla(0, 0%, 39.2%, 0.2);
   border-width: 1px 1px 2px;
   border-radius: 3px;
-}
+}
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -2,21 +2,21 @@ import React from 'react'
 import './Text.css'
 
 interface Props {
-  className? :string, 
+  className?: string
   children: any
-  style?: React.CSSProperties, 
-  type?: 'default' | 'secondary' | 'success' | 'warning' | 'danger',
-  disabled? : boolean,
-  mark? : boolean, 
-  code? : boolean, 
-  keyboard? : boolean, 
-  underline? : boolean, 
-  strikethrough? : boolean, 
-  strong? : boolean
-  small? : boolean
+  style?: React.CSSProperties
+  type?: 'default' | 'secondary' | 'success' | 'warning' | 'danger'
+  disabled?: boolean
+  mark?: boolean
+  code?: boolean
+  keyboard?: boolean
+  underline?: boolean
+  strikethrough?: boolean
+  strong?: boolean
+  small?: boolean
 }
 
-function Text({ 
+function Text({
   className,
   children,
   style,
@@ -28,9 +28,8 @@ function Text({
   underline,
   strikethrough,
   strong,
-  small
+  small,
 }: Props) {
-
   let classes = ['sbui-typography']
   if (className) {
     classes.push(className)
@@ -43,33 +42,46 @@ function Text({
   if (disabled) {
     classes.push(`sbui-typography-disabled`)
   }
-  
+
   if (underline) {
     classes.push(`sbui-typography-underline`)
   }
 
   if (strikethrough) {
     classes.push(`sbui-typography-strikethrough`)
   }
- 
+
   if (small) {
     classes.push('sbui-typography-small')
   }
 
-  let content = []
-
-  if (code || mark || keyboard || strong) {
-    if(code) content.push(<code>{children}</code>)
-    if(mark) content.push(<mark>{children}</mark>)
-    if(keyboard) content.push(<kbd>{children}</kbd>)
-    if(strong) content.push(<strong>{children}</strong>)
-  } else {
-    content.push(children) 
-  }
-
+  if (code)
+    return (
+      <code style={style} className={classes.join(' ')}>
+        {children}
+      </code>
+    )
+  if (mark)
+    return (
+      <mark style={style} className={classes.join(' ')}>
+        {children}
+      </mark>
+    )
+  if (keyboard)
+    return (
+      <kbd style={style} className={classes.join(' ')}>
+        {children}
+      </kbd>
+    )
+  if (strong)
+    return (
+      <strong style={style} className={classes.join(' ')}>
+        {children}
+      </strong>
+    )
   return (
     <span style={style} className={classes.join(' ')}>
-      {content}
+      {children}
     </span>
   )
 }

diff --git a/src/components/Typography/Typography.stories.tsx b/src/components/Typography/Typography.stories.tsx
@@ -13,7 +13,7 @@ const { Title, Text, Link } = Typography
 
 export default {
   title: 'General/Typography',
-  component: Typography
+  component: Typography,
 }
 
 export const article = () => (
@@ -33,21 +33,33 @@ export const Titles = () => (
 )
 
 export const Texts = () => (
-  <Space size={2} direction="vertical">
+  <>
     <Text>Supabase UI (default)</Text>
+    <br />
     <Text type="secondary">Supabase UI (secondary)</Text>
+    <br />
     <Text type="success">Supabase UI (success)</Text>
+    <br />
     <Text type="warning">Supabase UI (warning)</Text>
+    <br />
     <Text type="danger">Supabase UI (danger)</Text>
+    <br />
     <Text disabled>Supabase UI (disabled)</Text>
+    <br />
     <Text mark>Supabase UI (mark)</Text>
+    <br />
     <Text code>Supabase UI (code)</Text>
+    <br />
     <Text keyboard>Supabase UI (keyboard)</Text>
+    <br />
     <Text underline>Supabase UI (underline)</Text>
+    <br />
     <Text strikethrough>Supabase UI (strikethrough)</Text>
+    <br />
     <Text strong>Supabase UI (strong)</Text>
+    <br />
     <Link href="https://supabase.io" target="_blank">
       Supabase (Link)
     </Link>
-  </Space>
-)
+  </>
+)