From 29ad2197b791e012a0293f6c3c47c3184653eade Mon Sep 17 00:00:00 2001 From: Mike O'Donnell Date: Fri, 27 Oct 2023 11:54:16 -0400 Subject: [PATCH 1/5] fix(styles): card updates [ci visual] --- packages/styles/src/card.scss | 17 +- .../stories/Components/card/card.stories.js | 2 +- .../Components/card/object-card.example.html | 38 +- .../Components/card/table-card.example.html | 8 +- .../tests/__snapshots__/styles.test.ts.snap | 665 ++++++++++++++++-- 5 files changed, 640 insertions(+), 90 deletions(-) diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss index 553e64fa56..078118c6e1 100644 --- a/packages/styles/src/card.scss +++ b/packages/styles/src/card.scss @@ -193,8 +193,6 @@ $fd-card-header-outline-offset: 0.0625rem !default; @include fd-flex() { align-items: flex-end; } - - margin-top: 0.25rem; } &__subtitle { @@ -212,6 +210,7 @@ $fd-card-header-outline-offset: 0.0625rem !default; text-align: right; margin: var(--fdCard_Counter_Margin); white-space: nowrap; + color: var(--sapTile_TitleTextColor); @include fd-rtl() { margin: var(--fdCard_Counter_Margin_RTL); @@ -323,6 +322,10 @@ $fd-card-header-outline-offset: 0.0625rem !default; overflow: hidden; } + .#{$list} { + @include fd-set-paddings-x(0.125rem); + } + &:last-child { border-bottom-left-radius: $fd-card-border-radius; border-bottom-right-radius: $fd-card-border-radius; @@ -388,6 +391,10 @@ $fd-card-header-outline-offset: 0.0625rem !default; @include fd-reset(); padding-bottom: 0.5rem; + + h3 { + font-size: var(--sapFontSize); + } } &__content-group { @@ -411,8 +418,6 @@ $fd-card-header-outline-offset: 0.0625rem !default; } & > * { - margin-bottom: 0.25rem; - &:last-child { margin-bottom: 0; } @@ -441,6 +446,10 @@ $fd-card-header-outline-offset: 0.0625rem !default; } &--table { + .#{$block}__header { + padding-bottom: 0.5rem; + } + @include fd-compact-or-condensed() { .#{$block}__content { padding-bottom: 0.5rem; diff --git a/packages/styles/stories/Components/card/card.stories.js b/packages/styles/stories/Components/card/card.stories.js index b89718aa8b..6a3142fbd9 100644 --- a/packages/styles/stories/Components/card/card.stories.js +++ b/packages/styles/stories/Components/card/card.stories.js @@ -121,4 +121,4 @@ Component (class) | Description ` } } -}; \ No newline at end of file +}; diff --git a/packages/styles/stories/Components/card/object-card.example.html b/packages/styles/stories/Components/card/object-card.example.html index cae8b9ab79..112361af4c 100644 --- a/packages/styles/stories/Components/card/object-card.example.html +++ b/packages/styles/stories/Components/card/object-card.example.html @@ -19,23 +19,23 @@
-
Group Title 1
+

Group Title 1

- Label - Text + Label: + Text
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -43,14 +43,14 @@
Group Title 2
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -97,14 +97,14 @@

Group Title 1

- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -122,14 +122,14 @@

Group Title 2

- Label - Text + Label: + Text
- Label - Text + Label: + Text
diff --git a/packages/styles/stories/Components/card/table-card.example.html b/packages/styles/stories/Components/card/table-card.example.html index 8a74955296..0b3af74f04 100644 --- a/packages/styles/stories/Components/card/table-card.example.html +++ b/packages/styles/stories/Components/card/table-card.example.html @@ -15,7 +15,7 @@ - + Name Status @@ -28,7 +28,7 @@ - + Banana @@ -45,7 +45,7 @@ - + Pineapple @@ -62,7 +62,7 @@ - + Orange diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index e1ee662425..194d6c33ab 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -11190,23 +11190,23 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
-
Group Title 1
+

Group Title 1

- Label - Text + Label: + Text
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -11214,14 +11214,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
Group Title 2
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -11268,14 +11268,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -11293,14 +11293,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
- Label - Text + Label: + Text
- Label - Text + Label: + Text
@@ -11330,7 +11330,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh - + Name Status @@ -11343,7 +11343,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh - + Banana @@ -11360,7 +11360,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh - + Pineapple @@ -11377,7 +11377,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh - + Orange @@ -33569,57 +33569,417 @@ exports[`Check stories > Components/Rating Indicator > Story DifferentValues > S exports[`Check stories > Components/Rating Indicator > Story Disabled > Should match snapshot 1`] = ` "
+

Default:

- - + + - + - + - + - + - +
(2 of 5)
+
+

Default:

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ (2 of 5) +
+
" `; exports[`Check stories > Components/Rating Indicator > Story DisplayMode > Should match snapshot 1`] = ` "
-
-
- - +

Default:

+
+
+ + - - + + - - + + - - + + - - + + - - -
- (2 of 5) + + +
+ (2 of 5) +
+
+
+

Half values:

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ (2.5 of 5)
+
" `; @@ -33811,29 +34171,210 @@ exports[`Check stories > Components/Rating Indicator > Story HalfValues > Should exports[`Check stories > Components/Rating Indicator > Story NonInteractive > Should match snapshot 1`] = ` "
-
-
- - +

Default:

+
+
+ + - - + + - - + + - - + + - - + + - - -
- (2 of 5) + +
+ (2 of 5)
+
+ +
+

Half values:

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ (2.5 of 5) +
+
" `; From 7a9a474c10d336ba51001a8286e285fda9ca4bed Mon Sep 17 00:00:00 2001 From: Mike O'Donnell Date: Tue, 31 Oct 2023 14:24:50 -0400 Subject: [PATCH 2/5] fix(styles): pr comment [ci visual] --- packages/styles/src/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss index 078118c6e1..b78d2a8941 100644 --- a/packages/styles/src/card.scss +++ b/packages/styles/src/card.scss @@ -323,7 +323,7 @@ $fd-card-header-outline-offset: 0.0625rem !default; } .#{$list} { - @include fd-set-paddings-x(0.125rem); + @include fd-set-paddings-x(0.25rem); } &:last-child { From c33acb787551a95228a0d33c204037b25841e164 Mon Sep 17 00:00:00 2001 From: Mike O'Donnell Date: Wed, 1 Nov 2023 14:49:39 -0400 Subject: [PATCH 3/5] fix(styles): pr comments --- packages/styles/src/card.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss index b78d2a8941..6014f0aa82 100644 --- a/packages/styles/src/card.scss +++ b/packages/styles/src/card.scss @@ -193,6 +193,8 @@ $fd-card-header-outline-offset: 0.0625rem !default; @include fd-flex() { align-items: flex-end; } + + margin-top: 0.25rem; } &__subtitle { @@ -203,6 +205,7 @@ $fd-card-header-outline-offset: 0.0625rem !default; word-wrap: break-word; max-height: 2.5rem; max-width: 100%; + line-height: 1rem; } &__counter.#{$object-status} { @@ -210,7 +213,7 @@ $fd-card-header-outline-offset: 0.0625rem !default; text-align: right; margin: var(--fdCard_Counter_Margin); white-space: nowrap; - color: var(--sapTile_TitleTextColor); + color: var(--sapNeutralTextColor); @include fd-rtl() { margin: var(--fdCard_Counter_Margin_RTL); @@ -322,10 +325,6 @@ $fd-card-header-outline-offset: 0.0625rem !default; overflow: hidden; } - .#{$list} { - @include fd-set-paddings-x(0.25rem); - } - &:last-child { border-bottom-left-radius: $fd-card-border-radius; border-bottom-right-radius: $fd-card-border-radius; From 3182b5b0ed41e70e3d7288e457e9ce53700e8ced Mon Sep 17 00:00:00 2001 From: Mike O'Donnell Date: Tue, 7 Nov 2023 12:55:36 -0500 Subject: [PATCH 4/5] fix(styles): pr comments --- packages/styles/src/card.scss | 4 ---- .../Components/card/object-card.example.html | 20 +++++++++---------- .../tests/__snapshots__/styles.test.ts.snap | 20 +++++++++---------- 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss index 6014f0aa82..472f987567 100644 --- a/packages/styles/src/card.scss +++ b/packages/styles/src/card.scss @@ -390,10 +390,6 @@ $fd-card-header-outline-offset: 0.0625rem !default; @include fd-reset(); padding-bottom: 0.5rem; - - h3 { - font-size: var(--sapFontSize); - } } &__content-group { diff --git a/packages/styles/stories/Components/card/object-card.example.html b/packages/styles/stories/Components/card/object-card.example.html index 112361af4c..65eda37bb0 100644 --- a/packages/styles/stories/Components/card/object-card.example.html +++ b/packages/styles/stories/Components/card/object-card.example.html @@ -19,23 +19,23 @@
-

Group Title 1

+
Group Title 1
Label: - Text + Text
Label: - Text + Text
Label: - Text + Text
@@ -44,13 +44,13 @@
Label: - Text + Text
Label: - Text + Text
@@ -98,13 +98,13 @@

Group Title 1

Label: - Text + Text
Label: - Text + Text
@@ -123,13 +123,13 @@

Group Title 2

Label: - Text + Text
Label: - Text + Text
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 963e9664ac..2f5c678e62 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -11231,23 +11231,23 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
-

Group Title 1

+
Group Title 1
Label: - Text + Text
Label: - Text + Text
Label: - Text + Text
@@ -11256,13 +11256,13 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
Label: - Text + Text
Label: - Text + Text
@@ -11310,13 +11310,13 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
Label: - Text + Text
Label: - Text + Text
@@ -11335,13 +11335,13 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
Label: - Text + Text
Label: - Text + Text
From 140d31b9aefe0baf71ae6da4cce248e17d1430e7 Mon Sep 17 00:00:00 2001 From: Mike O'Donnell Date: Mon, 13 Nov 2023 11:13:29 -0500 Subject: [PATCH 5/5] fix(styles): story [ci visual] --- .../tests/__snapshots__/styles.test.ts.snap | 141 +++++++++--------- 1 file changed, 70 insertions(+), 71 deletions(-) diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 3cd3d746ec..6a59dacb20 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -29484,7 +29484,7 @@ exports[`Check stories > Components/Object List > Story SelectionWithNavigation " `; -exports[`Check stories > Components/Object List > Story Standart > Should match snapshot 1`] = ` +exports[`Check stories > Components/Object List > Story Standard > Should match snapshot 1`] = ` "

Object List Item

    @@ -29652,7 +29652,6 @@ exports[`Check stories > Components/Object List > Story Standart > Should match
-
  • @@ -29848,19 +29847,19 @@ exports[`Check stories > Components/Object Status > Story ClickableObjectStatus "

    Regular State

    - + Negative - + Critical - + Positive - + Info @@ -29896,19 +29895,19 @@ exports[`Check stories > Components/Object Status > Story ClickableObjectStatus

    Hover State

    - + Negative - + Critical - + Positive - + Info @@ -29944,19 +29943,19 @@ exports[`Check stories > Components/Object Status > Story ClickableObjectStatus

    Down State

    - + Negative - + Critical - + Positive - + Info @@ -29992,19 +29991,19 @@ exports[`Check stories > Components/Object Status > Story ClickableObjectStatus

    Visited State

    - + Negative - + Critical - + Positive - + Info @@ -30040,19 +30039,19 @@ exports[`Check stories > Components/Object Status > Story ClickableObjectStatus

    Focus State

    - + Negative - + Critical - + Positive - + Info @@ -30120,16 +30119,16 @@ exports[`Check stories > Components/Object Status > Story GenericIndicationColor exports[`Check stories > Components/Object Status > Story Icon > Should match snapshot 1`] = ` "
    - + - + - + - +
    " @@ -30138,19 +30137,19 @@ exports[`Check stories > Components/Object Status > Story Icon > Should match sn exports[`Check stories > Components/Object Status > Story IconAndText > Should match snapshot 1`] = ` "
    - + Negative - + Critical - + Positive - + Info @@ -30179,22 +30178,22 @@ exports[`Check stories > Components/Object Status > Story Inverted > Should matc Inverted Neutral - + - + Negative - + Critical - + Positive - + Informative @@ -30221,22 +30220,22 @@ exports[`Check stories > Components/Object Status > Story Inverted > Should matc Inverted Neutral - + - + Negative - + Critical - + Positive - + Informative @@ -30603,19 +30602,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul Neutral - + Information - + Caution - + Positive - + Negative
    @@ -30626,19 +30625,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul Neutral     - + Information - + Caution - + Positive - + Negative
    @@ -30649,19 +30648,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul Neutral     - + Information - + Caution - + Positive - + Negative
    @@ -30672,19 +30671,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul Neutral     - + Information - + Caution - + Positive - + Negative
    @@ -30695,19 +30694,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul Neutral     - + Information - + Caution - + Positive - + Negative
    @@ -30717,19 +30716,19 @@ exports[`Check stories > Components/Object Status > Story InvertedStates > Shoul exports[`Check stories > Components/Object Status > Story LargeObjectStatus > Should match snapshot 1`] = ` "
    - + Negative - + Critical - + Positive - + Info @@ -30742,19 +30741,19 @@ exports[`Check stories > Components/Object Status > Story LargeObjectStatus > Sh exports[`Check stories > Components/Object Status > Story Primary > Should match snapshot 1`] = ` "
    - + Negative - + Critical - + Positive - + Info
    @@ -30785,18 +30784,18 @@ exports[`Check stories > Components/Object Status > Story Text > Should match sn exports[`Check stories > Components/Object Status > Story TruncateExample > Should match snapshot 1`] = ` "
    - + Default behaviour of Object Status with very long text. The text goes on multiple lines. - + Object Status with text truncation with ellipsis Inverted Negative with very, very long text which truncates - + Positive with very, very long text which truncates