[OUDS] Divider component #2932

nilloq · 2025-03-31T08:39:15Z

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

https://deploy-preview-2932--boosted.netlify.app/

Checklist

Contribution

I have read the contributing guidelines

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

netlify · 2025-03-31T08:40:59Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`061c143`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/67ee8725c6080d0008f5eb00
😎 Deploy Preview	https://deploy-preview-2932--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Copilot

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

Copilot · 2025-04-01T14:58:17Z

site/content/docs/0.3/migration.md

+- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into is the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.
+


The phrase 'merged into is the new' is grammatically incorrect. Consider revising it to 'has been merged into the new' for clarity.

Suggested change

- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into is the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.

- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.

Copilot · 2025-04-01T14:58:17Z

site/content/docs/0.3/migration-from-boosted.md

+- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into is the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.
+


The phrase 'merged into is the new' is awkward. Consider updating it to 'has been merged into the new' to improve readability.

Suggested change

- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into is the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.

- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.

Copilot · 2025-04-01T14:58:18Z

site/content/docs/0.3/content/reboot.md

+The `<hr>` color is automically adjusted according to the color modes or on colored backgrounds.
+


The word 'automically' appears to be a misspelling. It should be corrected to 'automatically'.

Suggested change

The `<hr>` color is automically adjusted according to the color modes or on colored backgrounds.

The `<hr>` color is automatically adjusted according to the color modes or on colored backgrounds.

louismaximepiton

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.

louismaximepiton · 2025-04-01T14:59:29Z

scss/helpers/_vr.scss

@@ -1,8 +1,12 @@
 .vr {
  display: inline-block;
  align-self: stretch;
-  width: $vr-border-width;
+  // width: $vr-border-width; // OUDS mod: no width


Suggested change

// width: $vr-border-width; // OUDS mod: no width

// OUDS mod: no width

louismaximepiton · 2025-04-01T14:59:43Z

scss/helpers/_vr.scss

-  opacity: $hr-opacity;
+  margin: 0 $ouds-space-fixed-medium;
+  color: $ouds-color-border-default;
+  // background-color: currentcolor; // OUDS mod: no background color


Suggested change

// background-color: currentcolor; // OUDS mod: no background color

// OUDS mod: no background color

louismaximepiton · 2025-04-01T14:59:55Z

scss/helpers/_vr.scss

+  // background-color: currentcolor; // OUDS mod: no background color
+  border: 0;
+  border-left: $vr-border-width solid $ouds-color-border-default;
+  // opacity: $hr-opacity; // OUDS mod: no opacity


Suggested change

// opacity: $hr-opacity; // OUDS mod: no opacity

// OUDS mod: no opacity

louismaximepiton · 2025-04-01T15:00:50Z

site/content/docs/0.3/content/reboot.md

@@ -174,19 +174,33 @@ On colored backgrounds, links should have a different style. Visited links don't

 ## Horizontal rules

-The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top` and automatically inherit their `border-color` via `color`. They can be modified with border utilities.

 <!-- TODO: Check once the dividers have been designed -->


We can safely remove this.

louismaximepiton · 2025-04-01T15:04:12Z

site/content/docs/0.3/content/reboot.md

@@ -174,19 +174,33 @@ On colored backgrounds, links should have a different style. Visited links don't

 ## Horizontal rules

-The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top` and automatically inherit their `border-color` via `color`. They can be modified with border utilities.


This sentence looks wrong for me, either the border color inherits from color and so color utilities can be used, or we don't inherit and the end is fine.

louismaximepiton · 2025-04-01T16:06:53Z

site/content/docs/0.3/helpers/dividers.md

+
+## Horizontal rules
+
+Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, use a `<div>` styled with a `hr` class ensuring it is hidden from assistive technologies (e.g., `aria-hidden="true"`).


.hr doesn't exist. maybe we should implement it ?

Suggested change

Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, use a `<div>` styled with a `hr` class ensuring it is hidden from assistive technologies (e.g., `aria-hidden="true"`).

Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on a `<div>` or our [border utilities]({{< docsref "/utilities/border" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`).

Ok no .hr class

louismaximepiton · 2025-04-01T16:07:47Z

site/content/docs/0.3/helpers/dividers.md

+
+{{< example >}}
+<hr>
+<hr class="text-brand-primary">


Are we allowed to use text utilities to modify a border looking helper ?

Keep it in bootstrap compat

louismaximepiton · 2025-04-01T16:18:29Z

site/content/docs/0.3/helpers/dividers.md

+
+## Vertical rules
+
+Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements. They have `min-height` of `1em`.


TBH 1em looks a bit arbitrary, but I can't figure out why it shouldn't be this value.

Ok it comes from Boostrap

louismaximepiton · 2025-04-01T16:29:55Z

scss/helpers/_vr.scss

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 · 2025-04-01T16:46:03Z

site/content/docs/0.3/content/reboot.md

  <hr>
+  <hr class="border-emphasized border-medium">
+  <hr class="text-brand-primary border-thick">


Same question here, are we allowed to display this example ?

Removed from reboot

nilloq linked an issue Mar 31, 2025 that may be closed by this pull request

[OUDS] Component Creation - Divider #2826

Open

nilloq changed the base branch from main to ouds/main March 31, 2025 08:40

louismaximepiton requested review from louismaximepiton and Copilot April 1, 2025 14:56

Copilot AI reviewed Apr 1, 2025

View reviewed changes

louismaximepiton requested changes Apr 1, 2025

View reviewed changes

louismaximepiton added this to the OUDS milestone Apr 2, 2025

nilloq added 2 commits April 3, 2025 14:10

feat: first divider components implementation

72b87b0

fix: following LMP review

061c143

nilloq force-pushed the ouds/main-2826-sco-divider-component branch from 245ed97 to 061c143 Compare April 3, 2025 13:03

nilloq requested a review from louismaximepiton April 3, 2025 13:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[OUDS] Divider component #2932

[OUDS] Divider component #2932

nilloq commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading

Copilot AI left a comment

Copilot AI Apr 1, 2025

nilloq Apr 3, 2025

Copilot AI Apr 1, 2025

nilloq Apr 3, 2025

Copilot AI Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton left a comment

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

louismaximepiton Apr 1, 2025

louismaximepiton Apr 1, 2025

nilloq Apr 3, 2025

		- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into is the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.

		The `<hr>` color is automically adjusted according to the color modes or on colored backgrounds.

	The `<hr>` color is automically adjusted according to the color modes or on colored backgrounds.
	The `<hr>` color is automatically adjusted according to the color modes or on colored backgrounds.

	// width: $vr-border-width; // OUDS mod: no width
	// OUDS mod: no width

	// background-color: currentcolor; // OUDS mod: no background color
	// OUDS mod: no background color

	// opacity: $hr-opacity; // OUDS mod: no opacity
	// OUDS mod: no opacity


		## Horizontal rules

		Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, use a `<div>` styled with a `hr` class ensuring it is hidden from assistive technologies (e.g., `aria-hidden="true"`).


		## Vertical rules

		Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements. They have `min-height` of `1em`.

[OUDS] Divider component #2932

Are you sure you want to change the base?

[OUDS] Divider component #2932

Conversation

nilloq commented Mar 31, 2025 • edited Loading

Related issues

Description

Motivation & Context

Types of change

Live previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Checklist (for Core Team only)

netlify bot commented Mar 31, 2025 • edited Loading

✅ Deploy Preview for boosted ready!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Copilot AI Apr 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Copilot AI Apr 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Copilot AI Apr 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louismaximepiton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nilloq commented Mar 31, 2025 •

edited

Loading

netlify bot commented Mar 31, 2025 •

edited

Loading