From 116e90d390e74fdf5f10f715ec75ddbf2bb2da74 Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Tue, 21 Nov 2023 12:37:16 -0500 Subject: [PATCH] fix(styles): change the default line height to normal [ci visual] --- packages/styles/src/mixins/_mixins.scss | 2 +- packages/styles/src/progress-indicator.scss | 13 +- packages/styles/src/quick-view.scss | 11 +- .../tests/__snapshots__/styles.test.ts.snap | 526 ++++++++++++++++++ 4 files changed, 543 insertions(+), 9 deletions(-) diff --git a/packages/styles/src/mixins/_mixins.scss b/packages/styles/src/mixins/_mixins.scss index 409c4c93c0..afaf80b307 100644 --- a/packages/styles/src/mixins/_mixins.scss +++ b/packages/styles/src/mixins/_mixins.scss @@ -3,7 +3,7 @@ // utils @mixin fd-reset { font-size: var(--sapFontSize); - line-height: var(--sapContent_LineHeight); + line-height: normal; color: var(--sapTextColor); font-family: var(--sapFontFamily); font-weight: normal; diff --git a/packages/styles/src/progress-indicator.scss b/packages/styles/src/progress-indicator.scss index 1f0b0eec38..6f233cf582 100644 --- a/packages/styles/src/progress-indicator.scss +++ b/packages/styles/src/progress-indicator.scss @@ -248,13 +248,14 @@ $fd-progress-indicator-states: ( &__overflow { @include fd-reset(); + @include fd-set-paddings-y-equal(0.25rem); + @include fd-set-paddings-x(0.5rem, 0); @include fd-flex-vertical-center() { + gap: 0.5rem; justify-content: space-between; } - @include fd-set-padding-left(0.5rem); - overflow: hidden; white-space: normal; max-width: 95vw; @@ -262,18 +263,16 @@ $fd-progress-indicator-states: ( &__overflow-close { @include fd-reset(); - @include fd-set-margin-left(0.5rem); + @include fd-flex-center(); + @include fd-set-width(1.4375rem); + @include fd-set-height(1.375rem); @include fd-focus() { outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); } cursor: pointer; - width: 1.4375rem; - height: 1.375rem; - margin: 0.125rem; text-align: center; - line-height: 1.6rem; background: transparent; [class*='sap-icon'] { diff --git a/packages/styles/src/quick-view.scss b/packages/styles/src/quick-view.scss index 45b4af20a6..1ad2e1d3f9 100644 --- a/packages/styles/src/quick-view.scss +++ b/packages/styles/src/quick-view.scss @@ -27,6 +27,10 @@ $fd-quick-view-group-item-indent: 0.75rem; padding: 1rem; background-color: var(--sapGroup_ContentBackground); + .#{$fd-namespace}-form-item { + gap: 0.25rem; + } + .#{$fd-namespace}-bar { padding: 0; @@ -50,7 +54,13 @@ $fd-quick-view-group-item-indent: 0.75rem; } &__subheader-text { + @include fd-flex(column) { + gap: 0.25rem; + justify-content: center; + } + max-width: 100%; + height: 100%; min-width: 0; // fix for flex width https://github.com/philipwalton/flexbugs#flexbug-17 } @@ -58,7 +68,6 @@ $fd-quick-view-group-item-indent: 0.75rem; @include fd-reset(); @include fd-ellipsis(); - margin-top: 0.25rem; color: var(--sapTile_TextColor); } diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 22e23a73bc..e9d1b4953e 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -879,6 +879,532 @@ exports[`Check stories > BTP/Navigation/Horizontal Navigation > Story Navigation " `; +exports[`Check stories > BTP/Navigation/Horizontal Navigation > Story NavigationHorizontalWithExpander > Should match snapshot 1`] = ` +"
+ +
+" +`; + exports[`Check stories > BTP/Navigation/Vertical Navigation > Story Navigation > Should match snapshot 1`] = ` "