From f0ec5155270ed82a922acccd39d3adf6f057709b Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Wed, 4 Oct 2023 13:40:59 -0400 Subject: [PATCH] docs: removing pf spacer references (#1250) * Removing pf spacer references * docs: remove comments and format whitespace --------- Co-authored-by: Steven Spriggs --- docs/foundations/spacing.njk | 60 +++--------------- elements/rh-card/docs/10-style.md | 49 ++++++++------- elements/rh-jump-links/docs/10-style.md | 55 ++++++++-------- elements/rh-popover/docs/10-style.md | 42 +++++++------ elements/rh-progress-steps/docs/10-style.md | 69 +++++++++++---------- package-lock.json | 4 +- 6 files changed, 121 insertions(+), 158 deletions(-) diff --git a/docs/foundations/spacing.njk b/docs/foundations/spacing.njk index a98e2357f2..6c4ee83307 100644 --- a/docs/foundations/spacing.njk +++ b/docs/foundations/spacing.njk @@ -14,7 +14,8 @@ tags: {%- endcall %} -{% call foundations.section("Style") -%} +
+

Style

Base increment

@@ -24,54 +25,12 @@ tags:

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableAmountExample
--pf-global--spacer--xs4px4px spacer
--pf-global--spacer--sm8px8px spacer
--pf-global--spacer--md16px16px spacer
--pf-global--spacer--lg24px24px spacer
--pf-global--spacer--xl32px32px spacer
--pf-global--spacer--2xl48px48px spacer
--pf-global--spacer--3xl64px64px spacer
--pf-global--spacer--4xl80px80px spacer
+ {% 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 %}

Applying spacers

@@ -79,7 +38,7 @@ tags: How to apply spacing -{%- endcall %} +
{% call foundations.section("Typography") -%} @@ -535,4 +494,3 @@ tags:

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.

{% endfeedback %} - diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 5789ae7cfd..ec1fd311a6 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -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", @@ -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.
@@ -40,7 +40,7 @@ alt="White card colors", src="../card-color-light-white.svg" %}
- 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
@@ -51,7 +51,7 @@ alt="Gray card colors", src="../card-color-light-gray.svg" %}
- 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
@@ -62,7 +62,7 @@ alt="Black card colors", src="../card-color-dark-black.svg" %}
- 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
@@ -79,8 +79,8 @@
### 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.
@@ -97,16 +97,16 @@
### 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. @@ -116,7 +116,7 @@ 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", @@ -124,7 +124,7 @@ %} ### Small screens - {% example + {% example palette="light", width=360, alt="Card layout on mobile", @@ -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 here. + 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. ### Desktop {% example palette="light", @@ -157,4 +159,3 @@ width=360, alt="Card spacing on mobile", src="../card-spacing-mobile.svg" %} - diff --git a/elements/rh-jump-links/docs/10-style.md b/elements/rh-jump-links/docs/10-style.md index 7fcc020b14..fec0172773 100644 --- a/elements/rh-jump-links/docs/10-style.md +++ b/elements/rh-jump-links/docs/10-style.md @@ -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 Open tabs, 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 Open tabs, the only difference is the uppercase label on top. {% example palette="light", @@ -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", @@ -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", @@ -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 @@ -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 %} diff --git a/elements/rh-popover/docs/10-style.md b/elements/rh-popover/docs/10-style.md index f7aad70652..93762e1a27 100644 --- a/elements/rh-popover/docs/10-style.md +++ b/elements/rh-popover/docs/10-style.md @@ -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", @@ -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 %} @@ -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) @@ -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 %} diff --git a/elements/rh-progress-steps/docs/10-style.md b/elements/rh-progress-steps/docs/10-style.md index 351c4d88ff..27a6692381 100644 --- a/elements/rh-progress-steps/docs/10-style.md +++ b/elements/rh-progress-steps/docs/10-style.md @@ -1,8 +1,8 @@ ## Style - Progress steps contain **at least three** step indicators. They are positioned - on a thin horizontal or vertical line and organized sequentially from left to + Progress steps contain **at least three** step indicators. They are positioned + on a thin horizontal or vertical line and organized sequentially from left to right or top to bottom. {% example palette="lightest", @@ -12,19 +12,19 @@ ### Visual elements - Progress steps display circles or icons that indicate where a user is in the - completion process. The appearance of these states change as a user moves + Progress steps display circles or icons that indicate where a user is in the + completion process. The appearance of these states change as a user moves through each step of the task. - - **Finished step** - A green circle with a check mark indicates a user has + - **Finished step** - A green circle with a check mark indicates a user has completed a previous step. - - **Current step** - A bright red circle with a pink border indicates a user + - **Current step** - A bright red circle with a pink border indicates a user is viewing or completing the current step. - - **Error step** - A dark red circle with an exclamation mark indicates there + - **Error step** - A dark red circle with an exclamation mark indicates there is an issue a user should be aware of. - - **Next or Final step** - A white circle with a light gray border indicates + - **Next or Final step** - A white circle with a light gray border indicates the next or final step has not been visited yet. - - **Progress bar** - A dark gray bar in between Finished and Current steps + - **Progress bar** - A dark gray bar in between Finished and Current steps indicates how much progress a user has made. {% example palette="lightest", @@ -34,13 +34,13 @@ ### Text labels - Every step must have a text label indicating what a user has and will - accomplish. Each text label should be written clearly and use ideally - **one word** to avoid crowding. If two words need to be used, set + Every step must have a text label indicating what a user has and will + accomplish. Each text label should be written clearly and use ideally + **one word** to avoid crowding. If two words need to be used, set them in **Sentence case** only. {% alert title="Helpful tip" %} - Always try to write text labels as short as possible. If there are more than + Always try to write text labels as short as possible. If there are more than three steps, reduce the amount of characters. {% endalert %} @@ -54,12 +54,12 @@ ### Horizontal - The Horizontal orientation can be stretched or squeezed to fit different - desktop or tablet layouts, it can also be used on mobile if there are fewer + The Horizontal orientation can be stretched or squeezed to fit different + desktop or tablet layouts, it can also be used on mobile if there are fewer steps with short text labels. {% alert state="warning", title="Warning" %} - Do not write text labels with **more than two words** as space + Do not write text labels with **more than two words** as space can become crowded when breakpoints get smaller or when text is translated. {% endalert %} @@ -70,13 +70,13 @@ ### Vertical - The Vertical orientation can be used on desktop or tablet if the content - within needs to be positioned on the right instead of underneath. It can also - be used on mobile if the horizontal orientation has more steps or text labels + The Vertical orientation can be used on desktop or tablet if the content + within needs to be positioned on the right instead of underneath. It can also + be used on mobile if the horizontal orientation has more steps or text labels with more words. {% alert state="warning", title="Warning" %} - Do not write text labels with **more than two words** as space can become + Do not write text labels with **more than two words** as space can become crowded when breakpoints get smaller or when text is translated. {% endalert %} @@ -88,35 +88,36 @@ ## Responsive design - Progress steps mostly remain the same on large and small screens. When the - horizontal orientation becomes crowded, it will switch to the vertical + Progress steps mostly remain the same on large and small screens. When the + horizontal orientation becomes crowded, it will switch to the vertical orientation. ### Desktop - ![Progress steps component responsive design, desktop]({{ + ![Progress steps component responsive design, desktop]({{ '../progress-steps-responsive-desktop.svg' | url }}){} ### Tablet - ![Progress steps component responsive design, tablet]({{ - '../progress-steps-responsive-tablet.svg' | url + ![Progress steps component responsive design, tablet]({{ + '../progress-steps-responsive-tablet.svg' | url }}){style="--inline-img-max-width:768px;"} ### Mobile - ![Progress steps component responsive design, mobile]({{ + ![Progress steps component responsive design, mobile]({{ '../progress-steps-responsive-mobile.svg' | url }}){style=} ## Spacing - Progress steps use [PatternFly 4 - spacers](https://www.patternfly.org/v4/guidelines/spacers){target="_blank"} - to define spacing values between elements. - - {% example palette="lightest", - width=687, - alt="Progress steps component spacing", - src="../progress-steps-spacing.svg" %} +{% example palette="lightest", + width=687, + alt="Progress steps component spacing", + src="../progress-steps-spacing.svg" %} +{% spacerTokensTable + caption='', + headingLevel="3", + tokens="--rh-space-xl" %} +{% endspacerTokensTable %} diff --git a/package-lock.json b/package-lock.json index 1c491277a0..4f2ce5e5de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@rhds/elements", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@rhds/elements", - "version": "1.1.0", + "version": "1.1.1", "license": "MIT", "dependencies": { "@patternfly/elements": "^2.4.0",