docs: update usage for using as="li" for Text component (#899)

trendmicro-frontend · Jul 22, 2024 · 6872a93 · 6872a93
1 parent bd07350
commit 6872a93
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/react-docs/pages/components/text/index.page.mdx b/packages/react-docs/pages/components/text/index.page.mdx
@@ -40,6 +40,14 @@ You can format the `Text` component by passing `fontSize`, `lineHeight`, or othe
 
 {render('./the-as-prop')}
 
+## Commonly Asked Questions
+
+### Show bullet when using as `li` props
+
+The default value for `display` props is `block` which causes the bullet points of list items to disappear. Setting `display="list-item"` will restore their visibility.
+
+{render('./text-as-li')}
+
 ## Props
 
 ### Text

diff --git a/packages/react-docs/pages/components/text/text-as-li.js b/packages/react-docs/pages/components/text/text-as-li.js
@@ -0,0 +1,18 @@
+import { Text } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+  </>
+);
+
+export default App;