Add utility classes to remove left/right and top/bottom spacing

[jameswilson]

Describe the bug

There are no utility classes to zero out top/bottom or left/right spacing at all breakpoints. (For this example, we'll use padding but the same could be said for margin.)

The nearest available approaches currently include:

• the rvt-p-all-none which overzealously affects both top/bottom and left/right spacing, and thus requires adding back top/bottom padding with rvt-p-tb-sm.
• the rvt-p-lr-none-sm-up and similar, which do not account for smallest screens (i.e. less than 30em wide) and therefore ends up with double-padding at the smallest screen sizes where whitespace is at a premium.

Documentation for Adding utility classes to existing component markup states the following; emphasis is mine:

Aside from spacing and width, you should avoid using utilities to change the appearance of built-in components when possible.

Expected behavior

Be able to remove the inherent left/right or top/bottom whitespace provided by a Rivet component by adding a single class. E.g., [ rvt-p-lr-none ].

Relevant context (required)

Example: A Rivet Alert banner for Campus/Site-wide Notice.

Double padding of Rivet Alert on small screens:

Fix for double padding:

Steps to reproduce

1. Implement any component that contains default left/right padding, e.g. the Rivet Alert component.
2. Remove the default whitespace by adding [ rvt-p-lr-none-sm-up ].
3. Add back necessary whitespace via another mechanism on a different element. E.g. Inside the component's top-level div, add a <div class="rvt-container-xl">.
4. Resize viewport to less than 30em.

[scottanthonymurray]

Fixed in 2.6.0