refactor: divider documentation by nilloq · Pull Request #2978 · Orange-OpenSource/Orange-Boosted-Bootstrap

nilloq · 2025-04-15T13:36:07Z

Related issues

#2977

Description

Update Divider documenation

Motivation & Context

Following design review in order to be more structured and comprehensive

Types of change

Refactoring (non-breaking change)

Live previews

https://deploy-preview-2978--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

netlify · 2025-04-15T13:37:31Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`522ff26`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/680f7e3cf754f80008843800
😎 Deploy Preview	https://deploy-preview-2978--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.

louismaximepiton

It looks way better, just some questions because I can't remember the meetng we had about it

louismaximepiton · 2025-04-16T09:56:32Z

+description: Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections.
+group: helpers
+aliases:
+  - "/docs/helpers/divider/"


Should we add ? for links compatibility

Suggested change

- "/docs/helpers/divider/"

- "/docs/helpers/divider/"

- "/docs/helpers/dividers/"

/docs/helpers/dividers only exist since 0.4, I don't think anyone has bookmarked it yet. ;-)

If a page has already been published, the file exists in the gh-pages branch. If we don't keep this alias for new versions, Hugo will not generate a new page with a redirection, and when we'll update the doc we will not overwrite the existing file. Therefore we will have the old page available on /dividers/ and the new one on /divider/. I would keep the alias, even if you're not wrong, nobody should have bookmarked the page.

Ok noted. I add the link for compatibility

louismaximepiton · 2025-04-16T10:07:01Z

We've lost the colored bg part, I can't remember if it was asked or not 🤔

You have some examples in the color section, isn't it enough?

vprothais · 2025-04-28T07:45:02Z

+description: Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections.
+group: helpers
+aliases:
+  - "/docs/helpers/divider/"


If a page has already been published, the file exists in the gh-pages branch. If we don't keep this alias for new versions, Hugo will not generate a new page with a redirection, and when we'll update the doc we will not overwrite the existing file. Therefore we will have the old page available on /dividers/ and the new one on /divider/. I would keep the alias, even if you're not wrong, nobody should have bookmarked the page.

vprothais · 2025-04-28T08:49:08Z

+
+## 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, prefer using a border CSS property on a `<div>` or our [border utilities]({{< docsref "/utilities/borders" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`).


Maybe we should be less specific and say "on an element" or "on an HTML element" rather than "on a div" ?

Ok for me, I updated the doc

vprothais · 2025-04-28T08:52:41Z

+{{< example class="d-flex flex-column gap-1" >}}
+<div><hr class="border-muted"></div>
+<div><hr class="border-emphasized"></div>
+<div><hr class="border-brand-primary"></div>


I think we could remove the <div> element around the <hr> on these 3 examples. It is not needed, and it will make it easier to see the hr element.

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 15, 2025

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 15, 2025

boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 15, 2025

nilloq requested review from louismaximepiton and vprothais April 15, 2025 13:41

louismaximepiton reviewed Apr 16, 2025

View reviewed changes

nilloq requested a review from louismaximepiton April 17, 2025 07:37

louismaximepiton approved these changes Apr 28, 2025

View reviewed changes

boosted-bot moved this from Need Dev Review to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 28, 2025

vprothais requested changes Apr 28, 2025

View reviewed changes

boosted-bot moved this from Need Lead Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 28, 2025

nilloq added 5 commits April 28, 2025 14:53

refactor: divider documentation

154566f

typo: fix cspell issue

a12e650

docs: update following LMP review

14c3fdd

docs: fix cspell issue

6a1b617

fix: following vp review

522ff26

nilloq force-pushed the 2977-ouds-refactor-divider-link-documentation-following-design-review branch from e3bb682 to 522ff26 Compare April 28, 2025 13:10

nilloq requested a review from vprothais April 28, 2025 13:22

vprothais self-assigned this Apr 29, 2025

vprothais approved these changes Apr 29, 2025

View reviewed changes

boosted-bot moved this from Dev Review In Progress to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 29, 2025

vprothais merged commit 761b9a1 into ouds/main Apr 29, 2025
15 checks passed

vprothais deleted the 2977-ouds-refactor-divider-link-documentation-following-design-review branch April 29, 2025 08:48

github-project-automation Bot moved this from Need Lead Dev Review to Done in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 29, 2025

	- "/docs/helpers/divider/"
	- "/docs/helpers/divider/"
	- "/docs/helpers/dividers/"


		## 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, prefer using a border CSS property on a `<div>` or our [border utilities]({{< docsref "/utilities/borders" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`).

Conversation

nilloq commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Description

Motivation & Context

Types of change

Live previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Uh oh!

netlify Bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nilloq commented Apr 15, 2025 •

edited

Loading

netlify Bot commented Apr 15, 2025 •

edited

Loading