Conversation
|
Preview: https://patternfly-pr-6102.surge.sh A11y report: https://patternfly-pr-6102-a11y.surge.sh |
|
@kmcfaul nice find! It's because we're effectively doing this - https://codepen.io/mcoker/pen/oNmmzQo. If you uncomment the first line and comment diff --git a/src/patternfly/components/DescriptionList/description-list.scss b/src/patternfly/components/DescriptionList/description-list.scss
index 845655ba6..8c19271ed 100644
--- a/src/patternfly/components/DescriptionList/description-list.scss
+++ b/src/patternfly/components/DescriptionList/description-list.scss
@@ -1,6 +1,7 @@
// @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
$pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+:root,
.#{$description-list} {
--#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
--#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
@@ -63,7 +64,9 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
// Display modifiers
--#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
--#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
+}
+.#{$description-list} {
display: grid;
grid-template-columns: var(--#{$description-list}--GridTemplateColumns);
row-gap: var(--#{$description-list}--RowGap);cc @srambach @mattnolting - looks like we'll need to figure something out with this. WDYT about just scoping the vars to both |
b7a6e1e to
faff368
Compare
Closes #6101
@mcoker Where should I be scoping
:rootvs.#{$description-list}? I tried to just include the variables in root but then the preview seems to break the horizontal styling so I think I'm dividing it in the wrong place.