From cb39d4ec82b3cf83cf4266c2aa0ea9f9451ca428 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 14 Mar 2023 13:07:33 -0400 Subject: [PATCH 1/2] fix(Dropdown): updated styling to resolve unexpected spacing --- .../components/ContextSelector/context-selector.scss | 5 +++-- src/patternfly/components/Dropdown/dropdown.scss | 9 ++++++--- src/patternfly/components/OptionsMenu/options-menu.scss | 5 +++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/patternfly/components/ContextSelector/context-selector.scss b/src/patternfly/components/ContextSelector/context-selector.scss index 79a3700b23..82eba1f0ab 100644 --- a/src/patternfly/components/ContextSelector/context-selector.scss +++ b/src/patternfly/components/ContextSelector/context-selector.scss @@ -35,7 +35,8 @@ // Toggle icon arrow --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-context-selector__toggle-icon--MarginLeft: auto; + --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -195,7 +196,6 @@ position: relative; display: flex; align-items: center; - justify-content: space-between; width: 100%; padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft); color: var(--pf-c-context-selector__toggle--Color); @@ -286,6 +286,7 @@ } .pf-c-context-selector__toggle-icon { + padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft); margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight); margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft); color: var(--pf-c-context-selector__toggle-icon--Color, inherit); diff --git a/src/patternfly/components/Dropdown/dropdown.scss b/src/patternfly/components/Dropdown/dropdown.scss index ecccab5972..79bad4a2b8 100644 --- a/src/patternfly/components/Dropdown/dropdown.scss +++ b/src/patternfly/components/Dropdown/dropdown.scss @@ -110,8 +110,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " // Toggle Arrow --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md); - --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); + --pf-c-dropdown__toggle-icon--MarginRight: 0; + --pf-c-dropdown__toggle-icon--MarginLeft: auto; --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -171,6 +172,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm); // badge toggle icon + --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0; --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs); --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0; @@ -246,7 +248,6 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " position: relative; display: flex; align-items: center; - justify-content: space-between; min-width: var(--pf-c-dropdown__toggle--MinWidth); max-width: 100%; padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft); @@ -596,6 +597,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } > .pf-c-badge { + --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft); --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft); --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight); } @@ -610,6 +612,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } .pf-c-dropdown__toggle-icon { + padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft); margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight); margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft); line-height: var(--pf-c-dropdown__toggle-icon--LineHeight); diff --git a/src/patternfly/components/OptionsMenu/options-menu.scss b/src/patternfly/components/OptionsMenu/options-menu.scss index 933ed74598..f43bb1726c 100644 --- a/src/patternfly/components/OptionsMenu/options-menu.scss +++ b/src/patternfly/components/OptionsMenu/options-menu.scss @@ -28,7 +28,8 @@ // Toggle arrow --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-options-menu__toggle-icon--MarginLeft: auto; + --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -137,7 +138,6 @@ position: relative; display: flex; align-items: center; - justify-content: space-between; min-width: var(--pf-c-options-menu__toggle--MinWidth); max-width: 100%; padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft); @@ -214,6 +214,7 @@ } .pf-c-options-menu__toggle-icon { + padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft); margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight); margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft); From b185c7ea035b47e52ff39190566933e05f3c655c Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 15 Mar 2023 11:29:56 -0400 Subject: [PATCH 2/2] fix(Dropdown): refactored to use gap --- .../ContextSelector/context-selector.scss | 12 ++++---- .../components/Dropdown/dropdown.scss | 30 ++++++++----------- .../components/OptionsMenu/options-menu.scss | 13 ++++---- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/patternfly/components/ContextSelector/context-selector.scss b/src/patternfly/components/ContextSelector/context-selector.scss index 82eba1f0ab..a4c761267b 100644 --- a/src/patternfly/components/ContextSelector/context-selector.scss +++ b/src/patternfly/components/ContextSelector/context-selector.scss @@ -7,6 +7,7 @@ --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm); --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300); --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300); @@ -34,9 +35,8 @@ --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md); // Toggle icon arrow - --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-context-selector__toggle-icon--MarginLeft: auto; - --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); + --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -195,6 +195,7 @@ .pf-c-context-selector__toggle { position: relative; display: flex; + column-gap: var(--pf-c-context-selector__toggle--ColumnGap); align-items: center; width: 100%; padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft); @@ -279,16 +280,17 @@ .pf-c-context-selector__toggle-text { @include pf-text-overflow; + flex: 1 1 auto; font-size: var(--pf-c-context-selector__toggle-text--FontSize); font-weight: var(--pf-c-context-selector__toggle-text--FontWeight); line-height: var(--pf-c-context-selector__toggle-text--LineHeight); + text-align: left; } } .pf-c-context-selector__toggle-icon { + padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight); padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft); - margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight); - margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft); color: var(--pf-c-context-selector__toggle-icon--Color, inherit); } diff --git a/src/patternfly/components/Dropdown/dropdown.scss b/src/patternfly/components/Dropdown/dropdown.scss index 79bad4a2b8..227cdf5f33 100644 --- a/src/patternfly/components/Dropdown/dropdown.scss +++ b/src/patternfly/components/Dropdown/dropdown.scss @@ -6,6 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-dropdown__toggle--MinWidth: 0; --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md); --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal); @@ -110,9 +111,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " // Toggle Arrow --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md); - --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); - --pf-c-dropdown__toggle-icon--MarginRight: 0; - --pf-c-dropdown__toggle-icon--MarginLeft: auto; + --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle-icon--MarginLeft: 0; --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -162,16 +163,12 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal); --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200); - // Image - --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change - --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change - --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm); - // Divider --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm); --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm); // badge toggle icon + --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0; --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0; --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs); --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0; @@ -247,6 +244,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " .pf-c-dropdown__toggle { position: relative; display: flex; + column-gap: var(--pf-c-dropdown__toggle--ColumnGap); align-items: center; min-width: var(--pf-c-dropdown__toggle--MinWidth); max-width: 100%; @@ -288,6 +286,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } &.pf-m-split-button { + --pf-c-dropdown__toggle--ColumnGap: 0; + padding: 0; &:not(.pf-m-disabled) { @@ -597,9 +597,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } > .pf-c-badge { + --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight); --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft); --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft); - --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight); } .pf-c-dropdown__toggle-text { @@ -608,12 +608,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } .pf-c-dropdown__toggle-text { - flex: 0 1 auto; + flex: 1 1 auto; + text-align: left; } .pf-c-dropdown__toggle-icon { + padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight); padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft); - margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight); margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft); line-height: var(--pf-c-dropdown__toggle-icon--LineHeight); color: var(--pf-c-dropdown__toggle-icon--Color, inherit); @@ -629,14 +630,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " display: inline-flex; flex-shrink: 0; align-self: center; - margin-top: var(--pf-c-dropdown__toggle-image--MarginTop); - margin-right: var(--pf-c-dropdown__toggle-image--MarginRight); - margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom); line-height: 1; - - &:last-child { - --pf-c-dropdown__toggle-image--MarginRight: 0; - } } // Loading spinner diff --git a/src/patternfly/components/OptionsMenu/options-menu.scss b/src/patternfly/components/OptionsMenu/options-menu.scss index f43bb1726c..3946766833 100644 --- a/src/patternfly/components/OptionsMenu/options-menu.scss +++ b/src/patternfly/components/OptionsMenu/options-menu.scss @@ -5,6 +5,7 @@ --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-options-menu__toggle--MinWidth: 0; --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm); --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300); @@ -27,9 +28,8 @@ --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md); // Toggle arrow - --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-options-menu__toggle-icon--MarginLeft: auto; - --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--md); + --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -137,6 +137,7 @@ .pf-c-options-menu__toggle { position: relative; display: flex; + column-gap: var(--pf-c-options-menu__toggle--ColumnGap); align-items: center; min-width: var(--pf-c-options-menu__toggle--MinWidth); max-width: 100%; @@ -206,6 +207,9 @@ .pf-c-options-menu__toggle-text { @include pf-text-overflow; + + flex: 1 1 auto; + text-align: left; } .pf-c-options-menu__toggle-icon, @@ -214,9 +218,8 @@ } .pf-c-options-menu__toggle-icon { + padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight); padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft); - margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight); - margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft); .pf-c-options-menu.pf-m-top.pf-m-expanded & { transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));