Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUDS] feat: Add 'Borders' token, utilities and documentation #2687

Merged
merged 44 commits into from
Sep 18, 2024

Conversation

vprothais
Copy link
Collaborator

@vprothais vprothais commented Aug 9, 2024

Related issues

Closes #2582
Linked to #2589

Description

Add Border utilities based on design tokens with corresponding documentation.

LM:

  • Kept the change of .border-pill and .border-circle in the doc but should surely be backported in Bootstrap as well.
  • Should we introduce parts of the doc with a tutorial to see the semantic variables in action in components tokens later on?
Branch ouds/main ouds/main-vp-border-token Inflate/deflate
ouds-web.css size 360 607 357 712 -1% (-2895 B)
ouds-web-bootstrap size 360 835 365 337 +1% (+4502 B)
ouds-web-grid.css size 73 461 73 461 0% (0 B)
ouds-web-reboot.css size 19 357 19 047 -2% (-310 B)
ouds-web-utilities.css size 117 910 115 153 -2% (-2757 B)

Todo

  • Finalize documentation concerning border opacity (see description in [OUDS] Tokens: Border #2582)
  • Finalize documentation concerning variables, sass variables and maps
  • Compare documentation with Bootstrap version (current version is based on Boosted one)
  • Add content to both migration documentation
  • Add unit test

To add to #2589

  • Uncomment elements whenever colors (and so border colors) will be reintroduced.

Types of change

  • New feature (non-breaking change which adds functionality)

Live previews

Checklist

Contribution

Accessibility

  • My change follows accessibility good practices; I have at least run axe

Design

  • My change respects the design guidelines defined in Orange Design System
  • My change is compatible with a responsive display

Development

  • My change follows the developer guide
  • I have added JavaScript unit tests to cover my changes
  • I have added SCSS unit tests to cover my changes

Documentation

  • My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

  • My change introduces changes to the migration guide
  • My new component is well displayed in Storybook
  • My new component is compatible with RTL
  • Manually run BrowserStack tests
  • Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
  • Code review
  • Design review
  • A11y review

After the merge

@vprothais vprothais added this to the OUDS milestone Aug 9, 2024
Copy link

netlify bot commented Aug 9, 2024

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit a80afa1
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/66eabb78d02aeb00080a374f
😎 Deploy Preview https://deploy-preview-2687--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.

@vprothais vprothais marked this pull request as draft August 9, 2024 15:37
@vprothais vprothais changed the title feat(utilities): Add 'Borders' token and documentation [OUDS] feat: Add 'Borders' token, utilities and documentation Aug 9, 2024
@louismaximepiton louismaximepiton marked this pull request as ready for review August 23, 2024 11:51
@louismaximepiton louismaximepiton force-pushed the ouds/main-vp-border-token branch from fe3cd7a to 0c094b8 Compare August 26, 2024 07:10
@louismaximepiton louismaximepiton added the docs Improvements or additions to documentation label Aug 27, 2024
@louismaximepiton louismaximepiton marked this pull request as draft September 4, 2024 09:25
@louismaximepiton louismaximepiton marked this pull request as ready for review September 4, 2024 15:25
Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

I haven't finished the review yet, here are some first comments

site/layouts/shortcodes/bootstrap-compatibility.html Outdated Show resolved Hide resolved
site/content/docs/0.0/utilities/opacity.md Outdated Show resolved Hide resolved
site/content/docs/0.0/utilities/opacity.md Outdated Show resolved Hide resolved
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-start root-border-var
@if $enable-bootstrap-compatibility {
Copy link
Member

@julien-deramond julien-deramond Sep 16, 2024

Choose a reason for hiding this comment

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

Let's let that like this for now, but this is not final, as a lot of Sass component variables depend on var(--bs-border-radius).
For instance, the header is a bit broken (active state of menu items) in our docs.

scss/_utilities.scss Outdated Show resolved Hide resolved
scss/_variables.scss Outdated Show resolved Hide resolved
@julien-deramond julien-deramond self-requested a review September 18, 2024 09:29
Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

Helped to finalize the PR. LGTM! 🚀
Good job all!

@julien-deramond julien-deramond merged commit 05c34d7 into ouds/main Sep 18, 2024
12 checks passed
@julien-deramond julien-deramond deleted the ouds/main-vp-border-token branch September 18, 2024 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css docs Improvements or additions to documentation
Projects
Status: In Progress
Development

Successfully merging this pull request may close these issues.

[OUDS] Tokens: Border
3 participants