Add rule component

[andesol]

Done

• Add new component: p-rule

QA

• Open demo
• Review rule component docs and examples: https://vanilla-framework-4731.demos.haus/docs/patterns/rule

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

[webteam-app]

Demo starting at https://vanilla-framework-4731.demos.haus

[bartaz]

I think in between all the discussions and name changes we missed the scope of this component.

I'd like to end up in a place where we have one component to serve both as "thin" divider line, and as "thicker" divider line.

We discussed "divider", but this one is taken, so is "separator", and by getting back to "highlight-bar" we again reduced the scope of it to be just the thicker one.

My proposal is a "divider line" component (to have some distinction with the "divider" that I hope we will deprecate), which makes it a p-divider-line, that by default should look like current <hr class="u-no-margin--bottom" >. With an optional variant p-divider-line--highlighted that will use the highlight bar thickness.

[lyubomir-popov]

@bartaz just checked the typographic naming, "rule" or sometimes "ruler" seems to be the correct name. so p-rule or p-ruler maybe?

After all in html the tag <hr> is an abbreviation of "horizontal rule"

[bartaz]

@bartaz just checked the typographic naming, "rule" or sometimes "ruler" seems to be the correct name. so p-rule or p-ruler maybe?

After all in html the tag <hr> is an abbreviation of "horizontal rule"

@lyubomir-popov Good suggestion, thanks. "Ruler" sounds a bit like it is used to measure something.
So maybe a "rule". But that, on the other hand in common language sounds like "law" or other kind of "regulations"…
So p-divider-rule or p-horizontal-rule?

[lyubomir-popov]

@bartaz words have many meanings :) In any case I prefer to have them as short as possible, because it will be written by people tens of thousands of times... on that scale, the tiny savings add up.

[andesol]

I renamed it to p-rule and p-rule--highlight

PS: For reference, bootstrap has a vertical rule component

[bartaz]

I renamed it to p-rule and p-rule--highlight

One rule to rule them all!

PS: For reference, bootstrap has a vertical rule component

Good find, thanks!

[ClementChaumel]

What is the status on this?

[bartaz]

Update examples to include something like that:

https://canonical.com/careers/company-culture

[ClementChaumel]

@bartaz I also added the grid changes to the brochure site examples on this branch. I know it wasn't part of it initially. Let me know if you'd rather review them separately!

[bartaz]

This is not working well unfortunately.

It's fine on large screens, bigger than max-width:

But on a screens smaller than max-width, it still takes the whole width of the screen (because it is smaller than max width), while at the same time grid has padding:

This makes it trickier to implement, because we need to take that into account into width, similar to what is-fixed-width variant of current hr does:

vanilla-framework/scss/_base_hr.scss

Lines 20 to 40 in b54c450

	&.is-fixed-width {
	margin-left: auto;
	margin-right: auto;
	max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
	width: calc(100% - 2 * map-get($grid-margin-widths, small));
	@media (min-width: $threshold-4-6-col) {
	max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
	width: calc(100% - 2 * map-get($grid-margin-widths, default));
	}
	@media (min-width: $threshold-6-12-col) {
	max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
	width: calc(100% - 2 * map-get($grid-margin-widths, default));
	}
	.row &,
	.u-fixed-width & {
	width: 100%;
	}
	}

But, it needs to happen ONLY if it's outside of the grid containers. If it is inside row. Which is-fixed-width also takes into account.

So I guess porting whole is-fixed-width functionality into p-rule should solve it hopefully?

[lyubomir-popov]

@bartaz so why not just put that in the hr directly? the code is already there.

also what is $small-offset? this sounds very cryptic

[bartaz]

@bartaz so why not just put that in the hr directly? the code is already there.

I guess you mean using the styles of is-fixed-width directly on <hr> element by default, without a class name? That could work. My only worry is if someone is using <hr> outside of standard grid environment (like application layout). it may not be expected to have max width and auto margins.

This also reminds me… In the new Vanilla layout (that we have on design site and Vanilla), it will also not work out of the box, because it's not a centered standard grid anymore. You would need to put it inside strip or row anyway…

[bartaz]

When defined like this it will pollute global context (variables will be available inside whole vanilla and wherever its imported) which is not expected from such internal aliases.

And also, you seem to need them in one place only in the file, so not really needed I think?
And if we do reuse is-fixed-width from hr as suggested in other comment they will likely not be needed at all I guess?

[ClementChaumel]

Ah yes I didn't think of the scope issue! It's just that formulas like max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default)); can get unwieldy and hard to read very quickly!

[lyubomir-popov]

we just put .u-no-max-width in that case

[bartaz]

@ClementChaumel Based on the discussions on mattermost today, I guess we need to do it a bit differently than discussed in standup, because we can't remove bottom margin from hr without breaking stuff.

So let's keep the scope of p-rule as is currently. So;

• we don't change anything about existing base hr styles
• p-rule is a thin line, works like hr.u-no-margin--bottom, doesn't have any max-width (adapts to parent width)
• p-rule--highlighted is a thicker line

This we can release as non-breaking addition in 3.0, and during component refresh before 5.0 we can verify how we can adapt that if needed.

[lyubomir-popov]

+1, but please use the text from the brochure guide at the top, as the current one is not very accurate. It's important to mention that rules indicate the beginning of a group of elements, and that they visually tie together elemenents that might feel separate because they are in different columns

[bartaz]

LGTM!