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;