listStyleType not respected in list

[jalexy12]

Hey all, reporting a bug here.

The listStyleType prop, even though documented and included in the type for UnorderedList isn't respected when passed. Codesandbox available here: https://codesandbox.io/s/liststyle-p5dxpk?file=/src/index.tsx

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that. The provided documentation does not contain information about the listStyleType prop for UnorderedList.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• How I can remove list style from UnorderedList? (updated: 12/01/2022, similarity score: 87%)
• How I can remove list style from UnorderedList? - Answer (updated: 12/01/2022, similarity score: 86%)
• UnorderedList list-style css discrepancy compared to Evergreen (updated: 08/02/2023, similarity score: 86%)

[SiTaggart]

Hi @jalexy12

That's actually a typing bug, we don't allow setting of list style as we supply UnorderedList and OrderedList with explicit list style type opinions.

Curious, though, what design led you to needing to set that?

[jalexy12]

hey Simon,

I was working on recreating the following component, I think I discovered in the meantime that it's a better fit for a Menu than recreating with a List anyways.

good to know regarding the list though in the future, appreciate it.

[SiTaggart]

Does clicking the option persist a value or perform an action. If it's the former, you might want a Combobox, or maybe a Menu Badge?

[jalexy12]

In this case it's actually a Link to a different page. It wasn't necessarily obvious looking at the original design, but I turned it into a menu with an href so now it's hoverable and a bit more clear that it links out somewhere. In this case I just made the MenuButton contain the Icon that expands the menu + a standard Menu for the popover:

<>
  <MenuButton {...menu} variant="reset" size="reset">
      <IconGroup items={items} />
   </MenuButton>
   <Menu {...menu} aria-label="Connections">
       {items.map(item => (
           <MenuItem {...menu} key={item.id} href={item.href}>
               <Box display="flex" alignItems="center">
                   <Icon logo={item.logo} isFirstChild={true} logoText={item.text} />
                   <Text as="span">{item.text}</Text>
                </Box>
             </MenuItem>
        ))}
    </Menu>
</>

[SiTaggart]

Perfect!!