Square bullets aren't square

[liyaxin116]

Describe the bug
When customize the bullet icon, the square bullet is not square.

To Reproduce
Steps to reproduce the behavior:

1. Choose the "square" bullet in the menu

3. The bullet is not square, is more like a rectangle.

Expected behavior
The bullet should be square:

Device Information

• OS: macOS
• Browser: Edge

[JiuqingSong]

Interesting one. At least on Windows it is showing as a square, but on Mac it is a rectangle.

We can change the menu text of demo site to be Rectangle, but the enum name is already Square which we should not change it.

@jvillalobos fyi.

[jvillalobos]

Sounds more like a bug or design choice on Edge for Mac. Does it repro in Chrome or Safari?

[liyaxin116]

OK, then we will change the name on Outlook Mac from "square" to "rectangle" too.

[jerperdue]

@jvillalobos and @JiuqingSong This repros on all browsers I tried on Mac: Edge, Chrome, and Safari. OWA doesn't yet support square bullets otherwise they might have the same issue.

I don't think the solution is renaming it to "Rectangle" bullets. Users expect a "Square" bullet option that looks like a square. Is there anything we can do to fix the appearance on Mac?

[JiuqingSong]

Ok, I think I found the problem. CSS already support the bullet type "square", but we are actually using a square character for the list type. We should use the build-in "square" list style here.

@juliaroldi would you please take a look. Thanks.