8000 fix(content): add class support to styled elements by mcoker · Pull Request #6511 · patternfly/patternfly · GitHub
[go: up one dir, main page]
Skip to content

fix(content): add class support to styled elements#6511

Merged
mcoker merged 1 commit intopatternfly:v6from
mcoker:issue-5966
Apr 9, 2024
Merged

fix(content): add class support to styled elements#6511
mcoker merged 1 commit intopatternfly:v6from
mcoker:issue-5966

Conversation

@mcoker
Copy link
Contributor
@mcoker mcoker commented Apr 4, 2024 •
edited
Loading

fixes #5966

This keeps the existing functionality (just writing HTML without classes), at least for the time being. IMO it's worth looking at whether we want to keep that and how useful it is.

The only difference I could find is this small shift with the plain list in the plain html in content wrapper example. I glanced at that nothing stood out as to what's causing it?

Apr-04-2024 10-39-47

And because the SCSS is a little complicated, including the compiled CSS below

:where(:root),
:where(.pf-v6-c-content) {
  --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
  --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
  --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
  --pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
  --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
  --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
  --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
  --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
  --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
  --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
  --pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
  --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
  --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
  --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
  --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
  --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
  --pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
  --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
  --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
  --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
  --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
  --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
  --pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
  --pf-v6-c-content--dt--sm--MarginTop: 0;
  --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
}

.pf-v6-c-content {
  font-size: var(--pf-v6-c-content--FontSize);
  line-height: var(--pf-v6-c-content--LineHeight);
  color: var(--pf-v6-c-content--Color);
}
:is(.pf-v6-c-content--a, .pf-v6-c-content a) {
  color: var(--pf-v6-c-content--a--Color);
  text-decoration: var(--pf-v6-c-content--a--TextDecoration);
}
:is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
  --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
  --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
}

:is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
  color: var(--pf-v6-c-content--a--visited--Color);
}

:is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
  margin-block-start: var(--pf-v6-c-content--li--MarginTop);
}

:is(.pf-v6-c-content--p,
.pf-v6-c-content--dl,
.pf-v6-c-content--ol,
.pf-v6-c-content--ul,
.pf-v6-c-content--blockquote,
.pf-v6-c-content--small,
.pf-v6-c-content--pre,
.pf-v6-c-content--table,
.pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
  margin-block-end: var(--pf-v6-c-content--MarginBottom);
}

:is(.pf-v6-c-content--h1,
.pf-v6-c-content--h2,
.pf-v6-c-content--h3,
.pf-v6-c-content--h4,
.pf-v6-c-content--h5,
.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
  margin: 0;
  font-family: var(--pf-v6-c-content--heading--FontFamily);
}
:is(.pf-v6-c-content--h1,
.pf-v6-c-content--h2,
.pf-v6-c-content--h3,
.pf-v6-c-content--h4,
.pf-v6-c-content--h5,
.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
  margin-block-start: 0;
}
:is(.pf-v6-c-content--h1,
.pf-v6-c-content--h2,
.pf-v6-c-content--h3,
.pf-v6-c-content--h4,
.pf-v6-c-content--h5,
.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
  margin-block-end: 0;
}

:is(.pf-v6-c-content--ol,
.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
  margin: 0;
}
:is(.pf-v6-c-content--ol,
.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
  padding-inline-start: 0;
  margin-inline-start: 0;
  list-style: none;
}

:is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
  margin-block-start: var(--pf-v6-c-content--h1--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h1--MarginBottom);
  font-size: var(--pf-v6-c-content--h1--FontSize);
  font-weight: var(--pf-v6-c-content--h1--FontWeight);
  line-height: var(--pf-v6-c-content--h1--LineHeight);
}

:is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
  margin-block-start: var(--pf-v6-c-content--h2--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h2--MarginBottom);
  font-size: var(--pf-v6-c-content--h2--FontSize);
  font-weight: var(--pf-v6-c-content--h2--FontWeight);
  line-height: var(--pf-v6-c-content--h2--LineHeight);
}

:is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
  margin-block-start: var(--pf-v6-c-content--h3--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h3--MarginBottom);
  font-size: var(--pf-v6-c-content--h3--FontSize);
  font-weight: var(--pf-v6-c-content--h3--FontWeight);
  line-height: var(--pf-v6-c-content--h3--LineHeight);
}

:is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
  margin-block-start: var(--pf-v6-c-content--h4--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h4--MarginBottom);
  font-size: var(--pf-v6-c-content--h4--FontSize);
  font-weight: var(--pf-v6-c-content--h4--FontWeight);
  line-height: var(--pf-v6-c-content--h4--LineHeight);
}

:is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
  margin-block-start: var(--pf-v6-c-content--h5--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h5--MarginBottom);
  font-size: var(--pf-v6-c-content--h5--FontSize);
  font-weight: var(--pf-v6-c-content--h5--FontWeight);
  line-height: var(--pf-v6-c-content--h5--LineHeight);
}

:is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
  margin-block-start: var(--pf-v6-c-content--h6--MarginTop);
  margin-block-end: var(--pf-v6-c-content--h6--MarginBottom);
  font-size: var(--pf-v6-c-content--h6--FontSize);
  font-weight: var(--pf-v6-c-content--h6--FontWeight);
  line-height: var(--pf-v6-c-content--h6--LineHeight);
}

:is(.pf-v6-c-content--small, .pf-v6-c-content small) {
  display: block;
  font-size: var(--pf-v6-c-content--small--FontSize);
  line-height: var(--pf-v6-c-content--small--LineHeight);
  color: var(--pf-v6-c-content--small--Color);
}
:is(.pf-v6-c-con
6880
tent--small, .pf-v6-c-content small):not(:last-child) {
  margin-block-end: var(--pf-v6-c-content--small--MarginBottom);
}

:is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
  padding-block-start: var(--pf-v6-c-content--blockquote--PaddingTop);
  padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBottom);
  padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingLeft);
  padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingRight);
  color: var(--pf-v6-c-content--blockquote--Color);
  border-inline-start: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor);
}

:is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
  height: var(--pf-v6-c-content--hr--Height);
  background-color: var(--pf-v6-c-content--hr--BackgroundColor);
  border: none;
}

:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
  padding-inline-start: var(--pf-v6-c-content--ol--PaddingLeft);
  margin-inline-start: var(--pf-v6-c-content--ol--MarginLeft);
}
:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
ul) {
  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
}
:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
ol) {
  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
}

:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
  padding-inline-start: var(--pf-v6-c-content--ul--PaddingLeft);
  margin-inline-start: var(--pf-v6-c-content--ul--MarginLeft);
  list-style: var(--pf-v6-c-content--ul--ListStyle);
}
:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
ul) {
  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
}
:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
ol) {
  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
}

:is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 576px) {
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
    grid-template: auto/auto 1fr;
    grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
    grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
  }
}

:is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
  font-weight: var(--pf-v6-c-content--dt--FontWeight);
}
:is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
  margin-block-start: var(--pf-v6-c-content--dt--MarginTop);
}
@media screen and (min-width: 576px) {
  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
    --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop);
  }
}
@media screen and (min-width: 576px) {
  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
    grid-column: 1;
  }
}

@media screen and (min-width: 576px) {
  :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
    grid-column: 2;
  }
}

@patternfly-build
Copy link
Collaborator
patternfly-build commented Apr 4, 2024 •
edited
Loading

Preview: https://patternfly-pr-6511.surge.sh

A11y report: https://patternfly-pr-6511-a11y.surge.sh

@mcoker mcoker marked this pull request as ready for review April 8, 2024 15:17
@mcoker mcoker requested a review from mattnolting April 8, 2024 16:37
wise-king-sullyman
wise-king-sullyman approved these changes Apr 8, 2024
View reviewed changes
Copy link
Collaborator
@wise-king-sullyman wise-king-sullyman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎸

mattnolting
mattnolting approved these changes Apr 9, 2024
View reviewed changes
Copy link
Collaborator
@mattnolting mattnolting left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! LPTM

@mcoker mcoker merged commit 867e36e into patternfly:v6 Apr 9, 2024
@patternfly-build
Copy link
Collaborator
patternfly-build commented Apr 9, 2024

🎉 This PR is included in version 6.0.0-alpha.118 🎉

The release is available on:

Your semantic-release bot 📦🚀

@mcoker mcoker mentioned this pull request Apr 9, 2024
Closed
mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Apr 9, 2024
@mcoker @mattnolting
fix(content): add class support to styled elements (patternfly#6511)
aad3d5d
mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Apr 9, 2024
@mcoker @mattnolting
fix(content): add class support to styled elements (patternfly#6511)
17b7db8
@kmcfaul kmcfaul mentioned this pull request Apr 15, 2024
Closed
@mcoker mcoker deleted the issue-5966 branch January 7, 2025 16:48
@patternfly-build patternfly-build mentioned this pull request Apr 16, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mattnolting mattnolting mattnolting approved these changes

@wise-king-sullyman wise-king-sullyman wise-king-sullyman approved these changes

@srambach srambach Awaiting requested review from srambach

@thatblindgeye thatblindgeye Awaiting requested review from thatblindgeye

Assignees

No one assigned

Labels

released on @alpha

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@mcoker @patternfly-build @mattnolting @wise-king-sullyman
0