[update] List style spacing, pfe-styles

[coreyvickery]

No description provided.

[coreyvickery]

List styles

Default

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

All Lists have 9px or 0.5rem of space between text or links. If text or links occupy only a single line, the line height is 2.0.

---

Rules

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

---

Unordered

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

48px spacer from the edge of the container to the edge of the text.

---

Ordered

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

48px spacer from the edge of the container to the edge of the text.

---

Unordered with Nested

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

48px spacer from edge to edge.

---

Ordered with Nested

Specs

Light theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-black-900 (#151515)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-400 (#06c)

Dark theme

• Text: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-white (#fff)
• Link: Red Hat Text, Regular, 18pt / 27 (1.5), $pf-color-blue-300 (#2b9af3)

Spacing

48px spacer from edge to edge.

Spacing legend
https://www.patternfly.org/v4/design-guidelines/styles/spacers

[castastrophe]

@coreyvickery These specs are gorgeous! @starryeyez024 Do we want to tackle these as styles in pfe-base or do we want to build a presentational component?

[starryeyez024]

These list styles are already a part of pfe-styles, in the pfe-base.css:
https://patternflyelements.com/elements/pfe-styles/demo/

Unfortunately the way HTML works, you have one place to define padding which includes the space that the number lives in. This is good in the sense that it allows for right alignment of the numbers themselves.

I used these files for reference, but perhaps they could be modified to reflect how HTML works, @coreyvickery ?
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/9bb612e0-efbe-4881-b634-88767ba69344/specs/
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/294d086b-9c58-4612-be42-d833c4debda6/

And also verified visually that these line up:

[castastrophe]

@starryeyez024 Do you think we can close this issue then if the styles already exist in pfe-styles or is there an implementation we're missing?

[coreyvickery]

@starryeyez024 Updated documentation with new images.

[starryeyez024]

@coreyvickery can you share the link to what you're referring to, and feel free to weigh in on Cassondra's question if you think we need to nudge any spacing. Otherwise I'd call this good.

[coreyvickery]

@starryeyez024 Sorry, here is the artboard in XD. The mauve spacer is 48px.

[coreyvickery]

@castastrophe Do you know if what exists in pfe-styles matches the above?

[castastrophe]

@coreyvickery I'm not sure. I'll make a note to do an audit.

[starryeyez024]

@coreyvickery https://patternflyelements.com/elements/pfe-styles/demo/

[coreyvickery]

@starryeyez024 @castastrophe The styles in the link above look good.