Skip to content

[OUDS] Button component#2804

Merged
vprothais merged 22 commits intoouds/mainfrom
ouds/main-his-btn-comp
Feb 26, 2025
Merged

[OUDS] Button component#2804
vprothais merged 22 commits intoouds/mainfrom
ouds/main-his-btn-comp

Conversation

@hannahiss
Copy link
Member

@hannahiss hannahiss commented Nov 26, 2024 •
edited
Loading

Related issues

#2753

Description

Implement button component:

  • use tokens from Tokenator
  • standard variants : default, strong, minimal, negative
  • variants on colored backgrounds : default, strong, minimal
  • add some documentation about forbidden variant: negative on colored background
  • With icon
    • Text and icon:
      • icon is in px and does not grow with text zoom
      • works with <svg>, <img> and font icon
      • use of :has to use all right tokens
    • Icon only:
      • icon is in rem groes with text zoom
      • works with <svg>, <img> and font icon
  • HTML button tags (button classes work with <a role="button">, <button type="submit">, <input type="button">, <input type="submit"> and <input type="reset">
  • Disabled state
  • Loading state:
    • Indeterminate time:
      • 2 versions proposed, with additional span into the button (like Bootstrap and Boosted do) which requires the use of :has (and makes text and spinner overlap) or without (change compared to Bootstrap and Boosted)
      • choose the implementation
      • implement and test accessibility with Vincent A. and provide live example
    • Determinate time
      • Animation to do: to see how to do it with or without a span, but should be similar to indeterminate
      • implement and test accessibility with Vincent A. and provide live example (without animation)
  • Skeleton state: has been removed and will be implemented as a component later
  • On colored bg variants must be shown on an orange background (surface/brand/primary (#F79E00)
  • Block buttons examples
  • Variables
    • CSS
    • Sass
    • Sass mixins
    • Component tokens
  • implement bootstrap compatibility:
    • standard buttons: primary, secondary, success, danger, warning, info, light, dark
    • Outline buttons: outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light, outline-dark
  • No Bootstrap compatibility
    • Small and large buttons (no .btn-sm and .btn-lg classes, so do nothing)
  • Deleted variants:
    • No outline buttons (which does not exist in Bootstrap, and can be replaced with minimal buttons)
    • Button plugin (toggle button)
  • Migration guide
  • Migration guide from Boosted: to be finished and completed with the last decisions
  • Replace btn classes in other documentation pages

TODO : remaining tasks and questions after first version

  • Bug on hover of menu button when screen width is reduced
  • Shouldn't we do the close button in this PR?
  • What about button group?
  • Should the btn classes be changed in the test html files?
  • Should the btn classes be changed in the Bootstrap example files? => no (reverted)
  • Should the btn classes be changed in the cheatsheet example? => no (reverted)

Motivation & Context

Basis component of the library
This PR should be merged after #2802

Types of change

  • New feature with some breaking changes

Live previews

@hannahiss hannahiss changed the title Button component [OUDS] Button component Nov 27, 2024
@hannahiss hannahiss changed the base branch from ouds/main-lmp-tokens-font to ouds/main-lmp-tokens-colors November 27, 2024 17:13
@netlify
Copy link

netlify bot commented Nov 28, 2024 •
edited
Loading

✅ Deploy Preview for boosted ready!

Name Link
🔨 Latest commit e9d05e2
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/67bef258862a7f0008c12f22
😎 Deploy Preview https://deploy-preview-2804--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@louismaximepiton louismaximepiton force-pushed the ouds/main-lmp-tokens-colors branch from 8d41cf0 to 11e7727 Compare November 29, 2024 14:10
@louismaximepiton louismaximepiton added this to the OUDS milestone Dec 12, 2024
vprothais
vprothais reviewed Jan 9, 2025
View reviewed changes
@hannahiss hannahiss marked this pull request as ready for review January 9, 2025 17:32
@hannahiss hannahiss requested a review from vprothais January 10, 2025 13:06
louismaximepiton
louismaximepiton requested changes Jan 21, 2025
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the long review, I still haven't checked the component metrics in details yet, mostly about the spinner, but they look fine already, Good job 🎉.
It's mostly typos, questions and some things to tackle.

Still need to check the relation between tokens/variables and the component as well but it should be fine already.

We can uncomment things in:

  • Introduction -> Link to uncomment

hannahiss
hannahiss commented Jan 24, 2025
View reviewed changes
@louismaximepiton
Copy link
Member

louismaximepiton commented Jan 27, 2025

We should probably map .btn-link to .btn-minimal

nilloq
nilloq reviewed Jan 28, 2025
View reviewed changes
Copy link
Member

@nilloq nilloq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Take some feedback into account

Base automatically changed from ouds/main-lmp-tokens-colors to ouds/main January 29, 2025 10:53
@hannahiss @nilloq @louismaximepiton
feat(component): add Button component
9d00d23 
---------------

Co-authored-by: Samuel Collin <samuel.collin@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
hannahiss
hannahiss commented Feb 17, 2025
View reviewed changes
Copy link
Member Author

@hannahiss hannahiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Loading buttons still to fix and enhance...

louismaximepiton and others added 4 commits February 18, 2025 10:46
@louismaximepiton
fix(review)
6cc9dbf
@hannahiss
Remove default definition of --bs-btn-loading-time in buttons.scss. A…
b51960b 
…dapt live examples and add examples with icons. Refactor js to have only one code for determinate and undetermined loading time
@hannahiss
doc
1676a43
@hannahiss
fix cspell
d47f150
@hannahiss
Copy link
Member Author

hannahiss commented Feb 19, 2025

We should probably map .btn-link to .btn-minimal

This should be treated in the Link PR

vprothais
vprothais requested changes Feb 24, 2025
View reviewed changes
vprothais
vprothais reviewed Feb 25, 2025
View reviewed changes
@vprothais vprothais merged commit e8ee751 into ouds/main Feb 26, 2025
14 of 15 checks passed
@vprothais vprothais deleted the ouds/main-his-btn-comp branch February 26, 2025 11:20
@Aniort
Copy link
Contributor

Aniort commented Feb 28, 2025

ok 👌 a11y review

@Franco-Riccitelli
Copy link

Franco-Riccitelli commented Mar 3, 2025 •
edited
Loading

For the design review, the Buttons all look ok.

@louismaximepiton louismaximepiton linked an issue Mar 25, 2025 that may be closed by this pull request
[OUDS] Create component - Button #2753
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nilloq nilloq nilloq left review comments

@vprothais vprothais vprothais approved these changes

@louismaximepiton louismaximepiton Awaiting requested review from louismaximepiton

Assignees

No one assigned

Labels

None yet

Projects

🟣 [Orange-Boosted-Bootstrap] PRs Board
Archived in project

Milestone

OUDS v1

Development

Successfully merging this pull request may close these issues.

[OUDS] Create component - Button

6 participants

@hannahiss @louismaximepiton @Aniort @Franco-Riccitelli @nilloq @vprothais