Create a rounded button widget for Floating action buttons
Closed, DeclinedPublic
Actions

Assigned To

None

Authored By

	RHo
	Nov 29 2018, 7:20 PM

Description

Use case

Coming out of the work on the help panel (see T206717) was a need for a floating action button that is:

anchored to a fixed position
appears in front of *all content* on the screen.

Proposal:

Since the button should appear more prominently and clearly seen as 'above' all other content, it is proposed we could add a config option to make the primary button have rounded corners and a more prominent drop shadow.
Example:

(prototype here: http://reetssydney.github.io/prototypes/help-pane-v1/index.html)

This task is meant for a general discussion and collection of this pattern need and to decide if it

should be implemented only context-specific or
be part of the library and (in follow-up tasks) how to best implement it

Related Objects
Search...

Status	Assigned	Task
Open	None	T277047 Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components
Open	None	T280330 Support Floating tools and dialogs at the bottom of the viewport
Declined	None	T210770 Create a rounded button widget for Floating action buttons

Event Timeline

RHo created this task.Nov 29 2018, 7:20 PM

Restricted Application added a project: UI-Standardization. · View Herald TranscriptNov 29 2018, 7:20 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

RHo added a subscriber: Volker_E.Nov 29 2018, 7:20 PM

RHo added a subscriber: • kostajh.

Jdforrester-WMF subscribed.Nov 30 2018, 8:32 PM

I'd be inclined to keep any code for this downstream in MediaWiki, in a suitably named widget (e.g. FloatingButtonWidget) to discourage it being used in other contexts :)

How would an icon-only version look, I'd assume circular? (in which case you may want to increase the height of the labelled version).

In T210770#4790179, @Esanders wrote:

I'd be inclined to keep any code for this downstream in MediaWiki, in a suitably named widget (e.g. FloatingButtonWidget) to discourage it being used in other contexts :)

That's a fair point.

How would an icon-only version look, I'd assume circular? (in which case you may want to increase the height of the labelled version).

Yes it should look circular like so:

Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Dec 16 2018, 11:22 PM

RHo mentioned this in T212890: Help panel: design - CTA on mobile view should be circular.Jan 3 2019, 8:06 PM

Declined for now. We'll keep requests for such buttons on the radar, but from current use cases there's only the Help panel featuring this treatment and – from library maintenance and performance perspective – it is better to have this treatment code-wise living in the extension.

Volker_E moved this task from Backlog to Declined / Duplicate / Invalid on the UI-Standardization-Kanban board.Feb 26 2019, 2:16 AM

Volker_E moved this task from Backlog to Invalid/Declined/Duplicate on the OOUI board.Apr 27 2019, 8:12 AM

RHo mentioned this in T278134: FloatingButton: Add FloatingButton component to Codex.Mar 22 2021, 7:29 PM

RHo mentioned this in T280330: Support Floating tools and dialogs at the bottom of the viewport.Apr 16 2021, 10:49 AM

RHo added a parent task: T280330: Support Floating tools and dialogs at the bottom of the viewport.