From 6872a93d1f1c4ec3db6b83aab4b2cfa91bc75c26 Mon Sep 17 00:00:00 2001
From: trend-alan-bie <141993185+trend-alan-bie@users.noreply.github.com>
Date: Mon, 22 Jul 2024 17:52:49 +0800
Subject: [PATCH] docs: update usage for using as="li" for Text component
(#899)
---
.../pages/components/text/index.page.mdx | 8 ++++++++
.../pages/components/text/text-as-li.js | 18 ++++++++++++++++++
2 files changed, 26 insertions(+)
create mode 100644 packages/react-docs/pages/components/text/text-as-li.js
diff --git a/packages/react-docs/pages/components/text/index.page.mdx b/packages/react-docs/pages/components/text/index.page.mdx
index f884ffa311..e3770ee2b0 100644
--- 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
new file mode 100644
index 0000000000..1a218061a2
--- /dev/null
+++ 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 = () => (
+ <>
+
+ This is an example with bullet points.
+
+
+ This is an example with bullet points.
+
+
+ This is an example with bullet points.
+
+ >
+);
+
+export default App;