Skip to content

[OUDS] Divider component #2932

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

Merged
merged 5 commits into from
Apr 8, 2025

Conversation

nilloq
Copy link
Member

@nilloq nilloq commented Mar 31, 2025

Related issues

Closes #2826

Description

Default <hr> styled in reboot
New divider helpers for horizontal and vertical rules

Motivation & Context

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

@nilloq nilloq linked an issue Mar 31, 2025 that may be closed by this pull request
@nilloq nilloq changed the base branch from main to ouds/main March 31, 2025 08:40
Copy link

netlify bot commented Mar 31, 2025

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit d90cf34
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/67f516397367d40008e6c819
😎 Deploy Preview https://deploy-preview-2932--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.

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR introduces a new Dividers component to provide horizontal and vertical rule helpers and updates the corresponding documentation and migration guides. Key changes include:

  • Adding a new "Dividers" entry in the sidebar.
  • Updating migration documentation to reference the new Dividers helper.
  • Creating a new Dividers documentation file and updating horizontal rule examples in reboot.

Reviewed Changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
site/data/sidebar.yml Added a new "Dividers" entry to the sidebar navigation.
site/content/docs/0.3/migration.md Updated migration documentation with Dividers helper details.
site/content/docs/0.3/migration-from-boosted.md Updated migration-from-boosted documentation for dividers.
site/content/docs/0.3/helpers/dividers.md Added new documentation for Dividers helpers.
site/content/docs/0.3/content/reboot.md Revised horizontal rule examples and descriptions.
Files not reviewed (2)
  • scss/_variables.scss: Language not supported
  • scss/helpers/_vr.scss: Language not supported

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

Maybe an <hr> to change in:

  • color-palette.md
  • maybe a .vr example to uncomment in stacks.md
  • Some hr and vr might be broken in the doc: homepage for example

We can safely remove vertical-rule.md file.

Copy link
Member

Choose a reason for hiding this comment

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

I'mwondering if we should add vertical-align somehow to make sure people don't struggle too much in block context. Tried it using inline-blocks and the rendering was weird.

@louismaximepiton louismaximepiton moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 2, 2025
@louismaximepiton louismaximepiton added this to the OUDS milestone Apr 2, 2025
@nilloq nilloq force-pushed the ouds/main-2826-sco-divider-component branch from 245ed97 to 061c143 Compare April 3, 2025 13:03
@nilloq nilloq requested a review from louismaximepiton April 3, 2025 13:04
@nilloq nilloq force-pushed the ouds/main-2826-sco-divider-component branch from 061c143 to be13e06 Compare April 7, 2025 08:38
@nilloq
Copy link
Member Author

nilloq commented Apr 7, 2025

Taken into account your global comment:

  • Update color-palette.md
  • I don't find any .vr example to uncomment in stacks.md?
  • search <hr> usage in documentation and update accordingly to recommendation
  • remove vertical-rule.md file.

@louismaximepiton louismaximepiton merged commit 78594d0 into ouds/main Apr 8, 2025
11 checks passed
@louismaximepiton louismaximepiton deleted the ouds/main-2826-sco-divider-component branch April 8, 2025 12:30
@github-project-automation github-project-automation bot moved this from Dev Review In Progress to Done in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

[OUDS] Component Creation - Divider
2 participants