Lists missing list-style css
jcbjoe opened this issue · 5 comments
Description
Lists do not set the "list-style" css property. This causes an issue on Flex 2.0 which has a reset style. The reset style has the following code
ol,
ul {
list-style: none;
}
As the list component doesn't explicitly set "list-style" its just overwritten. It would be good to make the list component set the list-style property or even make it configurable via a prop
Link to Reproduction
https://codesandbox.io/s/nice-dust-mfpog0?file=/src/index.tsx
Steps to reproduce
- Make a Flex 2.0 instance within Twilio.
- Make a plugin which uses one of the lists.
Paste Core Version
17.3.0
Browser
No response
Operating System
- macOS
- Windows
- Linux
Additional Information
No response
Hi @jcbjoe!
This is by design, since most use cases benefit from the bullets and numbers as a visual indicator that the items are in a list. Can you share a screenshot of the UI?
If you need a list with list-style: none, you can use the Box component: https://codesandbox.io/s/goofy-faraday-c4m4y1?file=/src/index.tsx.
Hey @shleewhite!
Thanks for the reply.
My problem is the opposite, within Flex UI 2.0 visual indicators DO NOT show due to a reset style being applied to the UI as a whole. The reset style contains:
ol,
ul {
list-style: none;
}This reset style causes the List component to not show visual indicators due to it not having a "list-style" property.
What I'm asking is if the "list-style" property could be added to the List component to enforce the visual indicators to show.
Thanks,
Joe
Morning @shleewhite
This is brilliant thank you for sorting this :)
No problem! It will be available on npm once this PR merges: #2960
Going to close this issue.