hi @bmartinezcalvo - There are many other use cases as well documented on T327426#8549928 - can these please be added to the known use cases in the description?

Inline actions in groups on the History, Watchlist, Recent Changes etc pages:

IP reveal button for the Temp accounts work:

The reply button on Talk pages (Discussion Tools):

In T352201#9364542, @RHo wrote:

hi @bmartinezcalvo - There are many other use cases as well documented on T327426#8549928 - can these please be added to the known use cases in the description?

Inline actions in groups on the History, Watchlist, Recent Changes etc pages:

IP reveal button for the Temp accounts work:

The reply button on Talk pages (Discussion Tools):

@RHo thank you! Added all these use cases in the task description.

Based on the Vector22 context, I think neutral-quiet-progressive buttons style in Codex with 24px height and 4px left/right margins will work for our small button.

See T351660 for rationale and explorations.

Should part of the work in this task include determining the need for a different button style for smaller buttons for the use-cases listed, not only creating a smaller version of existing styles?.

This is something that @DTorsani-WMF could potentially work on to taking over from the explorations started earlier for the inline button group use case. See task description in T327426 for more info.

Let's please ensure that we

1. go for a minimum size of 24x24 px (which would be a WCAG AAA success criteria, but it's also basic usability) and not lower, while many usability and mobile guidelines (like Apple's and Google's) recommend 44x44 pixels (Apple Human Interface Guidelines) or 48x48 dp (Google Material Design) in regards to better usability, for example on touch interfaces, also for users with motion limitations and some more.
2. We document extensively that using this size should be the absolute exception and not the rule. Also from a consistency and visual harmony perspective, to not run into views where smaller and default buttons are mixed and mashed.

Another example: TSP has an icon-only small button which will trigger a popover for User Info Card.

In T352201#10876784, @KColeman-WMF wrote:

Another example: TSP has an icon-only small button which will trigger a popover for User Info Card.

What are the dimensions of the button?

In T352201#10876952, @gonyeahialam wrote:

In T352201#10876784, @KColeman-WMF wrote:

Another example: TSP has an icon-only small button which will trigger a popover for User Info Card.

What are the dimensions of the button?

It uses a 24x24px small button with 14px icon set within it. It's based on the WIP Figma button that was shared.

@gonyeahialam has been contributing this design and these are the final decisions on the Small Button size:

Specifications:


• Button size: @size-150 (24px)
• Icon size: @icon-small
• Text:
  • @font-size-medium
  • @font weight-bold by default (with option of Normal)
• Padding:
  • Between StartIcon and Label: @spacing-25 (4px)
  • Left and Right sides: @spacing-35 (6px)

Recommendations for Small Button

• Use Small Button when you need to put a button alongside or between texts or when space is limited.
• Use non-capital letter to make it fit better with surrounding texts.
• Use Bold weight by default. Normal weight is permissible in some specific cases to blend more with surrounding texts.
• Avoid using the Small Button on touchable screens and use Medium Button size (32px) if possible.

This task is ready for implementation. Thank you @gonyeahialam for this contribution!

El T352201#10906080, @gonyeahialam escribió:

@DSmit-WMF Volunteered to implement this and would update us when she begins work

Great, thank you @gonyeahialam and @DSmit-WMF!

Question @gonyeahialam and @bmartinezcalvo .

1. It says 'Use Bold weight by default. Normal weight is permissible in some specific cases to blend more with surrounding texts.'. Does this mean we need to support setting a weight via props?

The weight prop is already used for 'normal', 'primary', 'quiet' :

/**
		 * Visual prominence of Button.
		 *
		 * @values 'normal', 'primary', 'quiet'
		 */
		weight: {
			type: String as PropType<ButtonWeight>,
			default: 'normal',
			validator: buttonWeightValidator
		},

So this would be something new. and that also means it can be used for the other button variants, because people can combine props as they want. Also wondering what is a good name then since bold = normal now.

2. Icons are inserted by the user inserting the button so the user is responsible for the correct icon size. we could add this to the docs to use the small icon size

Hey @DSmit-WMF,

1. It says 'Use Bold weight by default. Normal weight is permissible in some specific cases to blend more with surrounding texts.'. Does this mean we need to support setting a weight via props?

DST discussed this and decided that the normal font weight for small buttons shouldn't be built into the Codex Button component, since it would be confusing to add a prop to cover this especially since it only applies to a single button size. Instead, people can set the style font-weight: @font-weight-normal on small buttons in their feature code.

Change #1160902 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[design/codex@main] Button: create small size

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

Change #1162939 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Button: Reformat button size docs

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

Change #1160902 merged by jenkins-bot:

[design/codex@main] Button: create small size

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

Change #1162939 merged by jenkins-bot:

[design/codex@main] docs, Button: Reformat button size docs

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

Change #1163459 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v2.1.0 to v2.2.0

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

Change #1163459 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.1.0 to v2.2.0

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

hey @bmartinezcalvo, could you please check the remaining acceptance criteria and close this if they're done?