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.

Sign up for GitHub

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

Jump to bottom

Docs: precise how to add new .order-* classes in 'Layout > Columns' #40821

Merged
merged 8 commits into from
Oct 9, 2024
Merged

Docs: precise how to add new .order-* classes in 'Layout > Columns' #40821

merged 8 commits into from
Oct 9, 2024

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Sep 12, 2024 •
edited
Loading

Description

This PR suggests improving our documentation to fix #40816.

The following sentence is IMO misleading as we don't have Sass variables handling this set or .order-* utilities:

If you need more .order-* classes, you can modify the default number via Sass variable.

Internally, these utilities are generated thanks to:

bootstrap/scss/_utilities.scss

Lines 335 to 348 in dcec1df

"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),

So this PR improves the explanation by creating a dedicated paragraph that actually explains how to add a new .order-{breakpoint}-{number} utility.

Type of changes

  • Enhancement (non-breaking change)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #40816

@julien-deramond julien-deramond mentioned this pull request Sep 12, 2024
Closed
3 tasks
@julien-deramond julien-deramond requested a review from a team September 12, 2024 09:44
@TobiGr
Copy link
Contributor

TobiGr commented Sep 12, 2024

Thank you! This adds the missing info to the docs. Problem solved.

louismaximepiton
louismaximepiton approved these changes Oct 1, 2024
View reviewed changes
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.

I like it, just wondering if we should link or paste the same information in here: https://main--twbs-bootstrap.netlify.app/docs/5.3/utilities/flex/#order.

Approving since it's already better than the actual

@louismaximepiton
Copy link
Member

Tried something to follow our API guide on how to modify utilities. Feel free to revert it.

I like it, just wondering if we should link or paste the same information in here: https://main--twbs-bootstrap.netlify.app/docs/5.3/utilities/flex/#order.

Definitely not, since we don't do it on other utilities pages.

@julien-deramond
Copy link
Member Author

Thanks for the proposal @louismaximepiton. It's indeed working like that. The only thing I saw is that .order-last is generated before .order-6 in the list; but that's not an issue. Let's go with this solution.

@julien-deramond julien-deramond merged commit 15c1324 into main Oct 9, 2024
14 checks passed
@julien-deramond julien-deramond deleted the main-jd-improve-order-utility-management branch October 9, 2024 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TobiGr TobiGr TobiGr left review comments

@louismaximepiton louismaximepiton louismaximepiton approved these changes

Assignees
No one assigned
Labels
docs enhancement v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Docs] Column order classes missing Sass variable name
3 participants
@julien-deramond @TobiGr @louismaximepiton