Skip to content

Commit

Permalink
docs: removing pf spacer references (#1250)
Browse files Browse the repository at this point in the history 
* Removing pf spacer references

* docs: remove comments and format whitespace

---------

Co-authored-by: Steven Spriggs <[email protected]>
  • Loading branch information
@markcaron @zeroedin
markcaron and zeroedin authored Oct 4, 2023
1 parent 0c2d42b commit f0ec515
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 158 deletions.
60 changes: 9 additions & 51 deletions docs/foundations/spacing.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ tags:

{%- endcall %}

{% call foundations.section("Style") -%}
<section class="section section--palette-default container">
<h2 id="style" class="section-title pfe-jump-links-panel__section">Style</h2>

<h3>Base increment</h3>

Expand All @@ -24,62 +25,20 @@ tags:

<p>There are a variety of spacers available which can be used for different spacing needs, which are all divisible by 4. To keep the system simple, there’s only one scale for spacers that applies to components, patterns, and layouts. The smallest spacer is 4px and the largest is 80px. New spacers are added based on design needs, so do not create any new spacers, combine different spacers instead.</p>

<table style="width:100%;" class="spacer-table">
<tr>
<th>Variable</th>
<th>Amount</th>
<th>Example</th>
</tr>
<tr>
<td>--pf-global--spacer--xs</td>
<td>4px</td>
<td><img src="{{ '/assets/spacing/4px.svg' | url }}" alt="4px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--sm</td>
<td>8px</td>
<td><img src="{{ '/assets/spacing/8px.svg' | url }}" alt="8px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--md</td>
<td>16px</td>
<td><img src="{{ '/assets/spacing/16px.svg' | url }}" alt="16px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--lg</td>
<td>24px</td>
<td><img src="{{ '/assets/spacing/24px.svg' | url }}" alt="24px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--xl</td>
<td>32px</td>
<td><img src="{{ '/assets/spacing/32px.svg' | url }}" alt="32px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--2xl</td>
<td>48px</td>
<td><img src="{{ '/assets/spacing/48px.svg' | url }}" alt="48px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--3xl</td>
<td>64px</td>
<td><img src="{{ '/assets/spacing/64px.svg' | url }}" alt="64px spacer"></td>
</tr>
<tr>
<td>--pf-global--spacer--4xl</td>
<td>80px</td>
<td><img src="{{ '/assets/spacing/80px.svg' | url }}" alt="80px spacer"></td>
</tr>

</table>
{% spacerTokensTable
headline="",
caption="",
headingLevel="4",
tokens="--rh-space-xs,--rh-space-sm,--rh-space-md,--rh-space-lg,--rh-space-xl,--rh-space-2xl,--rh-space-3xl,--rh-space-4xl,--rh-space-5xl,--rh-space-6xl,--rh-space-7xl"%}
{% endspacerTokensTable %}

<h3>Applying spacers</h3>

<p>The size of an element dictates its spatial relationship with other elements in a layout, i.e. small elements need less space and large elements need more space. For example, use small spacers to define the spacing between text styles or buttons and use large spacers to define the vertical rhythm in a layout or spacing between sections.</p>

<img src="{{ '/assets/spacing/spacing-application-1.svg' | url }}" alt="How to apply spacing" style="">

{%- endcall %}
</section>

{% call foundations.section("Typography") -%}

Expand Down Expand Up @@ -535,4 +494,3 @@ tags:
<h2>Foundations</h2>
<p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
{% endfeedback %}

49 changes: 25 additions & 24 deletions elements/rh-card/docs/10-style.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

## Style
Cards can be used in light and dark themes. They act as a blank canvas where
Cards can be used in light and dark themes. They act as a blank canvas where
elements and styles can be placed inside.

{% example palette="light",
Expand All @@ -26,10 +26,10 @@
src="../card-theme-dark.svg" %}

### Color
Cards are secondary layouts that shouldn’t command too much attention and
blend in with whatever background they’re placed on. The card container is the
only required element and it consists of a background color and rounded
corners. A thin border is required if the card background is the same color as
Cards are secondary layouts that shouldn’t command too much attention and
blend in with whatever background they’re placed on. The card container is the
only required element and it consists of a background color and rounded
corners. A thin border is required if the card background is the same color as
the background it's placed on.

<div class="multi-column--min-400-wide margin-top--4">
Expand All @@ -40,7 +40,7 @@
alt="White card colors",
src="../card-color-light-white.svg" %}
<figcaption class="footnote">
A white card with a light gray border is the most common use case in the
A white card with a light gray border is the most common use case in the
light theme
</figcaption>
</figure>
Expand All @@ -51,7 +51,7 @@
alt="Gray card colors",
src="../card-color-light-gray.svg" %}
<figcaption class="footnote">
A light gray card without a border can also be used as an alternate
A light gray card without a border can also be used as an alternate
option
</figcaption>
</figure>
Expand All @@ -62,7 +62,7 @@
alt="Black card colors",
src="../card-color-dark-black.svg" %}
<figcaption class="footnote">
A black card with a dark gray border is the most common use case in the
A black card with a dark gray border is the most common use case in the
dark theme
</figcaption>
</figure>
Expand All @@ -79,8 +79,8 @@
</div>

### Layout
A card features header, body, and footer sections. Those sections should
include a limited amount of content to ensure that the card doesn’t become too
A card features header, body, and footer sections. Those sections should
include a limited amount of content to ensure that the card doesn’t become too
tall.

<div class="multi-column--min-400-wide">
Expand All @@ -97,16 +97,16 @@
</div>

### Header
The header section is required, it introduces what the content is and
The header section is required, it introduces what the content is and
shouldn’t be hidden.

### Body
The body section can include a headline, text, an icon, or sometimes an image.
The body section can include a headline, text, an icon, or sometimes an image.
The body section describes the content in more detail and shouldn’t be hidden.

### Footer
The footer section can include normal links or a call to action. It can be
hidden if necessary if there’s content included where a user can take an
The footer section can include normal links or a call to action. It can be
hidden if necessary if there’s content included where a user can take an
action.


Expand All @@ -116,15 +116,15 @@
Cards will get thinner or move below each other on smaller screens.

### Large screens
{% example
{% example
palette="light",
width=784,
alt="Card layout on desktop",
src="../card-layout-desktop.svg"
%}

### Small screens
{% example
{% example
palette="light",
width=360,
alt="Card layout on mobile",
Expand All @@ -134,15 +134,17 @@

## Spacing

Cards use [PatternFly 4
spacers](https://www.patternfly.org/v4/guidelines/spacers) to define spacing
values between elements.
{% spacerTokensTable
caption='',
headingLevel="3",
tokens="--rh-space-lg, --rh-space-xl, --rh-space-2xl, --rh-space-3xl" %}
{% endspacerTokensTable %}

### Container padding
Container padding defines how far away content is from the edges of the
component. When cards become wider, the container padding increases. When they
become thinner, the container padding decreases. See more examples <a
href="https://xd.adobe.com/view/a337ad48-4c5a-4e75-aec1-cc0cfe52098d-f664/">here</a>.
Container padding defines how far away content is from the edges of the
component. When cards become wider, the container padding increases. When they
become thinner, the container padding decreases. <a
href="https://xd.adobe.com/view/a337ad48-4c5a-4e75-aec1-cc0cfe52098d-f664/">See more examples</a>.

### Desktop
{% example palette="light",
Expand All @@ -157,4 +159,3 @@
width=360,
alt="Card spacing on mobile",
src="../card-spacing-mobile.svg" %}

55 changes: 28 additions & 27 deletions elements/rh-jump-links/docs/10-style.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

## Style

Jump links are fixed on the page and follow a user as they scroll. It moves
them to a section of content when the corresponding link is selected. It looks
visually similar to <a href=".../tabs">Open tabs</a>, the only difference is
Jump links are fixed on the page and follow a user as they scroll. It moves
them to a section of content when the corresponding link is selected. It looks
visually similar to <a href=".../tabs">Open tabs</a>, the only difference is
the uppercase label on top.

{% example palette="light",
Expand All @@ -27,18 +27,18 @@
src="../jump-links-theme-dark.svg" %}

### Label
Jump links display a label at the top indicating there are section links that
Jump links display a label at the top indicating there are section links that
a user can select. This label isn’t interactive.

### Section links
Jump links feature links that float to the right of an anchor line, they
Jump links feature links that float to the right of an anchor line, they
represent the different sections that are available to select.

### Nested section links
Sections that contain lots of content can be broken into nested sections for
better organization and hierarchy. Nested section links are positioned under
their parent section link and indented slightly. There are guidelines about
how many section links can be included, but no guidelines about how many
Sections that contain lots of content can be broken into nested sections for
better organization and hierarchy. Nested section links are positioned under
their parent section link and indented slightly. There are guidelines about
how many section links can be included, but no guidelines about how many
nested section links can be included.

{% example palette="light",
Expand All @@ -48,7 +48,7 @@
src="../jump-links-nested.svg" %}

### Active indicator bar
A red indicator bar highlights what the active section is. It’s positioned on
A red indicator bar highlights what the active section is. It’s positioned on
top of the anchor line, not adjacent.

{% example palette="light",
Expand All @@ -62,7 +62,7 @@
Jump links can be used on all screen sizes.

### Breakpoints
Jump links are displayed in layout on large screens, but on small screens it’s
Jump links are displayed in layout on large screens, but on small screens it’s
wrapped in a disclosure which is collapsed until a user expands the panel.

### Desktop
Expand Down Expand Up @@ -94,19 +94,20 @@

## Spacing

Jump links use [PatternFly 4
spacers](https://www.patternfly.org/v4/guidelines/spacers) to define
spacing values between elements.

{% example palette="light",
width=385,
class="inline-flex centered",
alt="Jump links spacing on desktop",
src="../jump-links-spacing.svg" %}

{% example palette="light",
width=872,
class="inline-flex centered",
alt="Jump links spacing on mobile",
src="../jump-links-spacing-2.svg" %}

{% example palette="light",
width=385,
class="inline-flex centered",
alt="Jump links spacing on desktop",
src="../jump-links-spacing.svg" %}

{% example palette="light",
width=872,
class="inline-flex centered",
alt="Jump links spacing on mobile",
src="../jump-links-spacing-2.svg" %}

{% spacerTokensTable
caption='',
headingLevel="3",
tokens="--rh-space-sm, --rh-space-md, --rh-space-lg, --rh-space-xl" %}
{% endspacerTokensTable %}
42 changes: 22 additions & 20 deletions elements/rh-popover/docs/10-style.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

## Style

A popover should include text and interactive elements like a close button and
A popover should include text and interactive elements like a close button and
links.

{% example palette="lightest",
Expand All @@ -11,12 +11,12 @@

### Variants

**Black and white** are the two popover variants available for use depending
**Black and white** are the two popover variants available for use depending
on the content and color of the background.

{% alert state="warning", title="Warning" %}
A heading does not need to be included, but if links are not included
either, use a [Tooltip]({{
A heading does not need to be included, but if links are not included
either, use a [Tooltip]({{
'/elements/tooltip' | url }}){target="_blank"} component instead.
{% endalert %}

Expand Down Expand Up @@ -54,9 +54,9 @@

## Theme

For popovers and [tooltips]({{ '/elements/tooltip' | url }}){target="_blank"},
the themes are inverted. For example, light theme popovers are **black* and
should be used on light backgrounds; dark theme popovers are **white** and
For popovers and [tooltips]({{ '/elements/tooltip' | url }}){target="_blank"},
the themes are inverted. For example, light theme popovers are **black* and
should be used on light backgrounds; dark theme popovers are **white** and
should be used on dark backgrounds.

### Black (light backgrounds)
Expand All @@ -76,31 +76,33 @@

## Responsive design

A popover has the same proportions and spacing on both large and small
A popover has the same proportions and spacing on both large and small
screens.

### Large screens

![Popover component responsive design, large screens]({{
'../popover-responsive-design-lg.svg' | url
![Popover component responsive design, large screens]({{
'../popover-responsive-design-lg.svg' | url
}}){style="--inline-img-max-width:1000px;"}

### Small screens

![Popover component responsive design, small screens]({{
'../popover-responsive-design-sm.svg' | url
![Popover component responsive design, small screens]({{
'../popover-responsive-design-sm.svg' | url
}}){style="--inline-img-max-width:360px;"}


## Spacing

A popover uses [PatternFly 4
spacers](https://www.patternfly.org/v4/guidelines/spacers) to define
spacing values between elements. Each popover orientation contains the same
amount of spacing in between the component and icon.
Each popover orientation contains the same amount of spacing in between the component and icon.

{% example palette="lightest",
width=392,
alt="Popover component spacing",
src="../popover-spacing.svg" %}
{% example palette="lightest",
width=392,
alt="Popover component spacing",
src="../popover-spacing.svg" %}

{% spacerTokensTable
caption='',
headingLevel="3",
tokens="--rh-space-lg, --rh-space-xl" %}
{% endspacerTokensTable %}
Loading

0 comments on commit f0ec515

Please sign in to comment.