Multiple products have introduced a floating button in their UI, making this a candidate for evaluation to add to the DSG/as a Codex component via the DST governance model.## Background
Note this captures the floating button only, not floating tools and dialogs (see T280330).
**Examples** (to be expanded)### Description
A prominent button that floats on top of the UI
### History
Multiple products have introduced a floating button in their UI, making this a candidate for evaluation to add to the DSG/as a Codex component via the DST governance model. 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.
- Appears more prominently and clearly seen as "above" all other content
| Outdated Example: | Current example as of Nov 2022 | Example in different states
| {F27325763 width=30%} | {F35720282 width=50%} | {F35720291 width=70%}
### Known use cases
| Growth - Help panel button {F36810248} {F36816107} | Growth - Structured task button next to help {F36815909} | Web - Vector 2022 toggle width button {F36816090} |
=== Original proposal### Existing implementations
**Wikimedia community:**
Coming out of the work on the help panel (see T206717) was a need for a floating action button that is:- GrowthExperiments Newcomer help panel open/close button and structured task button
- Vector 2022 [[ https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/resources/skins.vector.es6/limitedWidthToggle.less | content width toggler ]]
- anchored to a fixed position**External libraries:**
- Vuetify: [[ https://vuetifyjs.com/en/components/floating-action-buttons/ | Floating action buttons ]]
- appears in front of *all content* on the screen.- Material Design: [[ https://m2.material.io/components/buttons-floating-action-button#usage | Floating action buttons ]]
Proposal:**Wikimedia Design Style Guide links:**
Since the button should appear more prominently and clearly seen as 'above' all other content,- n/a, not included in the DSG
### Open questions
- Are any of the following are in scope for the Codex component itself? it is proposed we could add a config option to makOr are the primary button have rounded corners and a more prominent drop shadow.y MediaWiki-specific?
| Outdated Example: | Current example as of Nov 2022 | Example in different states
| {F27325763 width=30%} | {F35720282 width=50%} | {F35720291 width=70%} - Z-index (i.e. should the component take care of placing itself on top of all other content? What happens when there are multiple floating buttons?)
- X and Y placement (i.e. should we pre-define a location on top of the UI here? What happens when there are multiple floating buttons?)
- What states should the FloatingButton have?
- Are there any limits on which icons can be used? Should there be default icons for expand/collapse, for example?
- Some FloatingButtons will trigger another element to appear, change state while that element is visible, then return to the default state when the element is dismissed. How will the FloatingButton and a potential parent/sibling component communicate? We are not building other floating tools as part of this task, but we should consider how to prepare FloatingButton in a way that will work with future components.
---
## Codex implementation
### Component task owners
- Designer: //add the main designer's name//
- Developer: //add the main developer's name//
### 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. //
A component spec sheet has not been created yet.
| Component spec sheet |
---
## Acceptance criteria
### Minimum viable product (MVP)
MVP includes basic layout, default states, and most important functionality. The scope of the MVP for this component is defined as follows:
- [] [to be added]
### Future work
Other features to be implemented as part of separate tasks:
- [to be added]