Change 853464 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Use quiet ToggleButton quiet in Code demo

https://gerrit.wikimedia.org/r/853464

Change 853464 abandoned by VolkerE:

[design/codex@main] docs: Use quiet ToggleButton quiet in Code demo

Reason:

Abandoning for now until we've got progressive ToggleButtons

https://gerrit.wikimedia.org/r/853464

I don't know this is still under consideration, but personally I find the current (outlined) button more findable / legible in this context.

Also, I think that this part of our docs site is good enough for now and would be ok with just leaving things as they are until we re-vamp the site more broadly based on T324228: [EPIC] Codex as the Design System for Wikimedia.

If others agree with me, feel free to close this task.

In T322459#8483227, @egardner wrote:

I don't know this is still under consideration, but personally I find the current (outlined) button more findable / legible in this context.

@egardner the problem with the current Normal "Show code" button is that it competes with the component that the demo displays, specially in the Button component demo.

During the docs simplification work in T379299, @AnneT and I discussed this again. The "Show code" action is actually a ToggleButton. We determined that the quiet ToggleButton would not work as well here since it is too subtle, so we decided to leave this as-is. Do @Volker_E and @bmartinezcalvo agree, and therefore can we close this task?

El T322459#10429208, @DTorsani-WMF escribió:

During the docs simplification work in T379299, @AnneT and I discussed this again. The "Show code" action is actually a ToggleButton. We determined that the quiet ToggleButton would not work as well here since it is too subtle, so we decided to leave this as-is. Do @Volker_E and @bmartinezcalvo agree, and therefore can we close this task?

@DTorsani-WMF why do we need the "Show code" to be more prominent when it's toggled on? I think the important part when checking a demo is the component itself, so I would not make the rest of elements to be so prominent to avoid distracting the user from the component's review.

I think it's worth exploring how to improve the demo visualization to fix/improve this and other elements in these demos:

1. The style of the "Show code" button could be less prominent. In case we want to make these actions more prominent, we could use a muted line on top of the footer with buttons in the demo.
2. The ToggleButton guidelines recommend using the same text and icon in both off and on states. So we should label the button "Show code" in both toggled off and toggled on states.
3. We are currently using 3 styles of buttons in the demos (normal neutral ToggleButton for "Show code", quiet neutral Button for "Reset", and quiet progressive Button for "Copy code"). We could simplify them by using a quiet neutral Button or ToggleButton in all them.

Anyway, we could explore these and other improvements as part of T357703: Redesign the Configurable demo.

I like these ideas, thanks! I've added this task as a subtask of T357703.