Remove distinction between horizontal rules with and without margin

[lyubomir-popov]

Component/pattern to amend

Depending on what comes after a line, we use no margin bottom (when followed by text), or .5rem margin-bottom (when followed by images, buttons, etc). This makes things look nicer, but complicates usage - pretty much every pr I review I leave a bunch of comments to apply the p-rule class to remove margins where they are not needed.

In the interest of simplifying the framework, let's drop this distinction and deprecate the p-rule class. This way, every hr will have a .5rem margin-bottom, no exxceptions to document or explain.

Preview:

[jmuzina]

@lyubomir-popov Does this mean we'll be removing the Rule page in v5? Or just removing the p-rule (and its modifiers) classes?

[jmuzina]

Made an initial draft of a deprecation. Will open a PR after hearing about the above comment.

[bartaz]

We need to first clearly decide what do we want to keep.

Sure, default p-rule can likely get replaced by clean <hr />, but we have muted version, highlighted version, accented version.

Migrating all those on top of "base" <hr /> seems like a stretch. Having rule component gives it a nice obvious place in the design system, with possibility of optional variants, etc.

So I'm kind of leaning towards keeping p-rule, just making sure it looks as <hr /> does (with bottom margin).

[pastelcyborg]

Building on our conversation last week, I still think that, for most (all?) of our components, we could remove the <hr> entirely and utilize borders to achieve the desired effect. This would hopefully mean that independent <hr> elements are sparingly used.

[pastelcyborg]

A PR by @petesfrench, #5241, completes this work. @lyubomir-popov, please see comment in that PR regarding some minor design issues.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14224.

This message was autogenerated