Button: Evaluate the need for smaller/inline button styles
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	bmartinezcalvo
	Nov 28 2023, 5:25 PM

Description

Background

In T338021: [EPIC] Determine guidelines/recommendation for sizing of form components we are exploring the possibility of implementing a large size for buttons and for items. We also need to explore the possibility of adding a small size (24px?). But in this case, the small size would be applied just in buttons.

Known use cases

	"Hide" button in the Table of contents T351660: Align buttons in pinnable menus with Codex styles
	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).
	Edit on section headings.
	Proposed "show IP" quiet button for IP Masking (will have same custom CSS to adjust line-height).

Design spec

Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.

Previous explorations

Component spec sheet

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

Design

Design the Figma spec sheet and add it in this task
Update the component in the Figma library. This step will be done by a DST member.
Update guidelines on Codex for "Using links and buttons" in Style Guide

Code

Implement the component in Codex

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved	Design	bwang	T351660 Align buttons in pinnable menus with Codex styles
		Open		None	T352201 Button: Evaluate the need for smaller/inline button styles

Event Timeline

bmartinezcalvo created this task.Nov 28 2023, 5:25 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 28 2023, 5:25 PM

bmartinezcalvo updated the task description. (Show Details)Nov 28 2023, 5:25 PM

bmartinezcalvo mentioned this in T338021: [EPIC] Determine guidelines/recommendation for sizing of form components.

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):

bmartinezcalvo updated the task description. (Show Details)Nov 28 2023, 6:10 PM

bmartinezcalvo updated the task description. (Show Details)

bmartinezcalvo attached a referenced file: F35568874: Screen Shot 2022-10-14 at 8.14.55 AM.png. (Show Details)

bmartinezcalvo attached a referenced file: F36352837: image.png. (Show Details)

bmartinezcalvo attached a referenced file: F36353886: image.png. (Show Details)

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.

JScherer-WMF added a subtask: T351660: Align buttons in pinnable menus with Codex styles.Nov 28 2023, 11:28 PM

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Dec 4 2023, 9:52 PM

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.

bmartinezcalvo mentioned this in T351660: Align buttons in pinnable menus with Codex styles.Dec 5 2023, 3:51 PM

CCiufo-WMF mentioned this in T352803: Implement small button variant in Codex.Dec 5 2023, 7:25 PM

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.

bmartinezcalvo merged a task: T352803: Implement small button variant in Codex.Dec 6 2023, 12:12 PM

bmartinezcalvo added a subscriber: bwang.

CCiufo-WMF changed the status of subtask T351660: Align buttons in pinnable menus with Codex styles from Open to Stalled.Dec 6 2023, 7:31 PM

CCiufo-WMF removed a subtask: T351660: Align buttons in pinnable menus with Codex styles.

CCiufo-WMF added a parent task: T351660: Align buttons in pinnable menus with Codex styles.Dec 6 2023, 7:33 PM

CCiufo-WMF updated the task description. (Show Details)

CCiufo-WMF moved this task from Inbox to Proposed Component Updates on the Codex board.Dec 6 2023, 7:35 PM

CCiufo-WMF renamed this task from Button: Small size to Button: Evaluate the need for smaller/inline button styles.Dec 19 2023, 4:51 PM

Jdlrobson mentioned this in T352804: Use Codex small button styles for the pin/unpin buttons.Jan 11 2024, 6:36 PM

CCiufo-WMF edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.Jan 16 2024, 2:30 PM

CCiufo-WMF moved this task from Now to Later on the Design-System-Team (Design-System-Product-Roadmap) board.

DTorsani-WMF updated the task description. (Show Details)Feb 1 2024, 7:03 PM

CCiufo-WMF added a project: Design.Feb 15 2024, 8:32 PM

bwang mentioned this in T358392: Prepare for Design System Gap Analysis with Design System Team .Mar 1 2024, 4:30 PM

	F35568874: Screen Shot 2022-10-14 at 8.14.55 AM.png
	Nov 28 2023, 6:10 PM

	F41543768: Captura de pantalla 2023-11-28 a las 18.24.04.png
	Nov 28 2023, 5:25 PM

	F41543798: image.png
	Nov 28 2023, 5:52 PM

Button: Evaluate the need for smaller/inline button stylesOpen, Needs TriagePublicActions