From 3e4e674cecc81e22a716e14168239c886cd2da31 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 18:21:51 +0200 Subject: [PATCH 01/31] chore: label correction --- source/_patterns/01-elements/buttons/00-button.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/buttons/00-button.json b/source/_patterns/01-elements/buttons/00-button.json index 06a4771b8e7..b9b1f96b455 100644 --- a/source/_patterns/01-elements/buttons/00-button.json +++ b/source/_patterns/01-elements/buttons/00-button.json @@ -1,5 +1,5 @@ { "variant": "brand-primary", "title": "Done", - "value": "Red 500" + "value": "Button" } From c91e9edbcb960a6cdcb0aeec677ee2e43f57cef7 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 18:52:31 +0200 Subject: [PATCH 02/31] refactor: primary becomes secondary inverted --- .pa11yci | 2 +- .../01-elements/buttons/03-button-primary.hbs | 16 ---------------- .../buttons/03-button-secondary-inverted.hbs | 16 ++++++++++++++++ .../01-elements/buttons/_button.variables.scss | 4 ++-- source/_patterns/01-elements/buttons/_buttons.md | 2 +- source/_patterns/01-elements/buttons/button.scss | 14 +++++++------- tests/backstop.json | 12 ++++++------ 7 files changed, 33 insertions(+), 33 deletions(-) delete mode 100644 source/_patterns/01-elements/buttons/03-button-primary.hbs create mode 100644 source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs diff --git a/.pa11yci b/.pa11yci index 80ac24f805a..4ad21435220 100644 --- a/.pa11yci +++ b/.pa11yci @@ -85,7 +85,7 @@ "http://127.0.0.1:8080/patterns/base-type-highlight-colors-positive/base-type-highlight-colors-positive.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-00-button/elements-buttons-00-button.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", - "http://127.0.0.1:8080/patterns/elements-buttons-03-button-primary/elements-buttons-03-button-primary.rendered.html", + "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html", diff --git a/source/_patterns/01-elements/buttons/03-button-primary.hbs b/source/_patterns/01-elements/buttons/03-button-primary.hbs deleted file mode 100644 index d15fd12326b..00000000000 --- a/source/_patterns/01-elements/buttons/03-button-primary.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='primary' value='Primary' icon='add' }} - {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' }} -

-

- {{> elements-button variant='primary' value='Primary with icon' icon-after='add'}} - {{> elements-button variant='primary' value='Primary with icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='primary' value='Primary without icon' }} - {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs new file mode 100644 index 00000000000..4ffc9687c9e --- /dev/null +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs @@ -0,0 +1,16 @@ +

+ {{> elements-button variant='secondary-inverted' value='Secondary inverted' icon='add' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='secondary-inverted' value='Secondary inverted with icon' icon-after='add'}} + {{> elements-button variant='secondary-inverted' value='Secondary inverted with icon (disabled)' disabled='true' icon-after='add' }} +

+

+ {{> elements-button variant='secondary-inverted' value='Secondary inverted without icon' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted without icon (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='secondary-inverted' title='Check' value='Secondary inverted displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='secondary-inverted' title='Check' value='Secondary inverted displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index d73b322a573..dbad8df8379 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -12,8 +12,8 @@ $button---minHeight: to-rem( $button-brand-primary--backgroundColor: $db-color-red-500 !default; $button-brand-primary-hover-backgroundColor: #db0016; -$button-primary--backgroundColor: $db-color-cool-gray-700 !default; -$button-primary-hover-backgroundColor: #2f3541; +$button-secondaryInverted--backgroundColor: $db-color-cool-gray-700 !default; +$button-secondaryInverted-hover-backgroundColor: #2f3541; $button-secondarySolid--backgroundColor: $db-color-cool-gray-200 !default; $button-secondarySolid-hover-backgroundColor: #cdd4da !default; diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index c423a3cac3d..8e12b5cfed0 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -9,7 +9,7 @@ state: complete #### SCSS (recommended) -Extend one of the variant placeholders: `%variant-primary`, `%variant-secondary` or `%variant-tertiary` +Extend one of the variant placeholders: `%variant-secondary-inverted`, `%variant-secondary` or `%variant-tertiary` #### HTML attribute diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 5cb869bf840..a8bdc26b02b 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -34,12 +34,12 @@ }*/ &%variant-brand-primary, - &%variant-primary { + &%variant-secondary-inverted { color: $button---color; } &%variant-brand-primary, - &%variant-primary { + &%variant-secondary-inverted { font-weight: 700; } @@ -57,13 +57,13 @@ } } - &%variant-primary { - background-color: $button-primary--backgroundColor; + &%variant-secondary-inverted { + background-color: $button-secondaryInverted--backgroundColor; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-primary-hover-backgroundColor; + background-color: $button-secondaryInverted-hover-backgroundColor; } } &:active { @@ -166,8 +166,8 @@ &[data-variant="brand-primary"] { @extend %variant-brand-primary; } - &[data-variant="primary"] { - @extend %variant-primary; + &[data-variant="secondary-inverted"] { + @extend %variant-secondary-inverted; } &[data-variant="secondary-outline"] { @extend %variant-secondaryOutline; diff --git a/tests/backstop.json b/tests/backstop.json index 94f8b022087..c64d8de8227 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -459,14 +459,14 @@ "onReadyScript": "puppet/clickAndHoverHelper.js" }, { - "label": "Button Primary", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-03-button-primary/elements-buttons-03-button-primary.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-03-button-primary/elements-buttons-03-button-primary.rendered.html" + "label": "Button Secondary Inverted", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html" }, { - "label": "Button Primary - hovered", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-03-button-primary/elements-buttons-03-button-primary.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-03-button-primary/elements-buttons-03-button-primary.rendered.html", + "label": "Button Secondary Inverted - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", "hoverSelectors": [ "p:nth-of-type(1) .elm-button:nth-of-type(1)", "p:nth-of-type(1) .elm-button:nth-of-type(2)", From 36d270c46d4dc99f8db986e5a2b0e56d64c7a0fe Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 18:59:31 +0200 Subject: [PATCH 03/31] refactor: tertiary plain becomes ghost --- .pa11yci | 2 +- .../01-elements/buttons/06-button-ghost.hbs | 16 ++++++++++++++++ .../buttons/06-button-tertiary-plain.hbs | 16 ---------------- source/_patterns/01-elements/buttons/button.scss | 6 +++--- tests/backstop.json | 12 ++++++------ 5 files changed, 26 insertions(+), 26 deletions(-) create mode 100644 source/_patterns/01-elements/buttons/06-button-ghost.hbs delete mode 100644 source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs diff --git a/.pa11yci b/.pa11yci index 4ad21435220..07007fa9bba 100644 --- a/.pa11yci +++ b/.pa11yci @@ -88,7 +88,7 @@ "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", - "http://127.0.0.1:8080/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html", + "http://127.0.0.1:8080/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-09-button-sizes/elements-buttons-09-button-sizes.rendered.html", "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html", "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html", diff --git a/source/_patterns/01-elements/buttons/06-button-ghost.hbs b/source/_patterns/01-elements/buttons/06-button-ghost.hbs new file mode 100644 index 00000000000..65e4e74c358 --- /dev/null +++ b/source/_patterns/01-elements/buttons/06-button-ghost.hbs @@ -0,0 +1,16 @@ + +

+ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost' disabled='true' }} +

+

+ {{> elements-button variant='ghost' value='Ghost with right icon' icon-after='add'}} + {{> elements-button variant='ghost' value='Ghost with right icon(disabled)' disabled='true' icon-after='add' }} +

+ {{> elements-button variant='ghost' value='Ghost without left icon' }} + {{> elements-button variant='ghost' value='Ghost without left icon (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

diff --git a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs b/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs deleted file mode 100644 index 229181abc90..00000000000 --- a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs +++ /dev/null @@ -1,16 +0,0 @@ - -

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain' disabled='true' }} -

-

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon' icon-after='add'}} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon(disabled)' disabled='true' icon-after='add' }} -

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index a8bdc26b02b..1b1b960d652 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -108,7 +108,7 @@ } } - &%variant-tertiaryPlain { + &%variant-ghost { color: $db-color-cool-gray-700; border: 2px solid transparent; background-color: transparent; // shame.css @@ -175,8 +175,8 @@ &[data-variant="secondary-solid"] { @extend %variant-secondarySolid; } - &[data-variant="tertiary-plain"] { - @extend %variant-tertiaryPlain; + &[data-variant="ghost"] { + @extend %variant-ghost; } &:disabled { diff --git a/tests/backstop.json b/tests/backstop.json index c64d8de8227..a789b672069 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -515,14 +515,14 @@ "onReadyScript": "puppet/clickAndHoverHelper.js" }, { - "label": "Button Tertiary", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html" + "label": "Button Ghost", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html" }, { - "label": "Button Tertiary - hovered", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html", + "label": "Button Ghost - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", "hoverSelectors": [ "p:nth-of-type(1) .elm-button:nth-of-type(1)", "p:nth-of-type(1) .elm-button:nth-of-type(2)", From 7728cf4767343ac5f28caf11862b32ce85a9d40a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:11:18 +0200 Subject: [PATCH 04/31] refactor: secondary solid becomes tertiary --- .pa11yci | 2 +- .../buttons/05-button-secondary-solid.hbs | 16 ---------------- .../01-elements/buttons/05-button-tertiary.hbs | 16 ++++++++++++++++ .../01-elements/buttons/_button.variables.scss | 6 +++--- source/_patterns/01-elements/buttons/button.scss | 12 ++++++------ tests/backstop.json | 12 ++++++------ 6 files changed, 32 insertions(+), 32 deletions(-) delete mode 100644 source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs create mode 100644 source/_patterns/01-elements/buttons/05-button-tertiary.hbs diff --git a/.pa11yci b/.pa11yci index 07007fa9bba..35fdc2050d7 100644 --- a/.pa11yci +++ b/.pa11yci @@ -87,7 +87,7 @@ "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", - "http://127.0.0.1:8080/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", + "http://127.0.0.1:8080/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-09-button-sizes/elements-buttons-09-button-sizes.rendered.html", "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html", diff --git a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs b/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs deleted file mode 100644 index 1b46d5832e1..00000000000 --- a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='secondary-solid' value='Secondary' icon='add' }} - {{> elements-button variant='secondary-solid' value='Secondary (disabled)' disabled='true' icon='add' }} -

-

- {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon' icon-after='add'}} - {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='secondary-solid' value='Secondary Solid without icon' }} - {{> elements-button variant='secondary-solid' value='Secondary Solid without icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs new file mode 100644 index 00000000000..28fb7308c22 --- /dev/null +++ b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs @@ -0,0 +1,16 @@ +

+ {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='tertiary' value='Tertiary with right icon' icon-after='add'}} + {{> elements-button variant='tertiary' value='Tertiary with right icon (disabled)' disabled='true' icon-after='add' }} +

+

+ {{> elements-button variant='tertiary' value='Tertiary without icon' }} + {{> elements-button variant='tertiary' value='Tertiary without icon (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index dbad8df8379..9cf0a849c20 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -15,9 +15,9 @@ $button-brand-primary-hover-backgroundColor: #db0016; $button-secondaryInverted--backgroundColor: $db-color-cool-gray-700 !default; $button-secondaryInverted-hover-backgroundColor: #2f3541; -$button-secondarySolid--backgroundColor: $db-color-cool-gray-200 !default; -$button-secondarySolid-hover-backgroundColor: #cdd4da !default; -$button-secondarySolid-active-backgroundColor: #c5ccd3 !default; +$button-tertiary--backgroundColor: $db-color-cool-gray-200 !default; +$button-tertiary-hover-backgroundColor: #cdd4da !default; +$button-tertiary-active-backgroundColor: #c5ccd3 !default; $button-secondaryOutline-hover-backgroundColor: rgba( $db-color-cool-gray-700, diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 1b1b960d652..b6e00aa7363 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -94,17 +94,17 @@ } } - &%variant-secondarySolid { + &%variant-tertiary { color: $db-color-cool-gray-700; - background-color: $button-secondarySolid--backgroundColor; + background-color: $button-tertiary--backgroundColor; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondarySolid-hover-backgroundColor; + background-color: $button-tertiary-hover-backgroundColor; } } &:active { - background-color: $button-secondarySolid-active-backgroundColor; + background-color: $button-tertiary-active-backgroundColor; } } @@ -172,8 +172,8 @@ &[data-variant="secondary-outline"] { @extend %variant-secondaryOutline; } - &[data-variant="secondary-solid"] { - @extend %variant-secondarySolid; + &[data-variant="tertiary"] { + @extend %variant-tertiary; } &[data-variant="ghost"] { @extend %variant-ghost; diff --git a/tests/backstop.json b/tests/backstop.json index a789b672069..be2f1496f31 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -499,14 +499,14 @@ "onReadyScript": "puppet/clickAndHoverHelper.js" }, { - "label": "Button Secondary Solid", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html" + "label": "Button Tertiary", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html" }, { - "label": "Button Secondary Solid - hovered", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-05-button-secondary-solid/elements-buttons-05-button-secondary-solid.rendered.html", + "label": "Button Tertiary - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", "hoverSelectors": [ "p:nth-of-type(1) .elm-button:nth-of-type(1)", "p:nth-of-type(1) .elm-button:nth-of-type(2)" From f7b01441241bb4209690016b4d5ba158667fe5f1 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:13:05 +0200 Subject: [PATCH 05/31] refactor: secondary outline becomes secondary --- .pa11yci | 2 +- .../buttons/04-button-secondary-outline.hbs | 16 ---------------- .../01-elements/buttons/04-button-secondary.hbs | 16 ++++++++++++++++ .../01-elements/buttons/_button.variables.scss | 4 ++-- source/_patterns/01-elements/buttons/button.scss | 14 +++++++------- tests/backstop.json | 12 ++++++------ 6 files changed, 32 insertions(+), 32 deletions(-) delete mode 100644 source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs create mode 100644 source/_patterns/01-elements/buttons/04-button-secondary.hbs diff --git a/.pa11yci b/.pa11yci index 35fdc2050d7..e1b5afac994 100644 --- a/.pa11yci +++ b/.pa11yci @@ -86,7 +86,7 @@ "http://127.0.0.1:8080/patterns/elements-buttons-00-button/elements-buttons-00-button.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", - "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", + "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-06-button-ghost/elements-buttons-06-button-ghost.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-09-button-sizes/elements-buttons-09-button-sizes.rendered.html", diff --git a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs b/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs deleted file mode 100644 index 9cdd61403f7..00000000000 --- a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='secondary-outline' value='Secondary Outline' icon='add' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline (disabled)' disabled='true' icon='add' }} -

-

- {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon' icon-after='add'}} - {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/04-button-secondary.hbs b/source/_patterns/01-elements/buttons/04-button-secondary.hbs new file mode 100644 index 00000000000..605cb5d1dc2 --- /dev/null +++ b/source/_patterns/01-elements/buttons/04-button-secondary.hbs @@ -0,0 +1,16 @@ +

+ {{> elements-button variant='secondary' value='Secondary' icon='add' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='secondary' value='Secondary with right icon' icon-after='add'}} + {{> elements-button variant='secondary' value='Secondary with right icon (disabled)' disabled='true' icon-after='add' }} +

+

+ {{> elements-button variant='secondary' value='Secondary without left icon' }} + {{> elements-button variant='secondary' value='Secondary without left icon (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index 9cf0a849c20..29b35f82ef0 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -19,12 +19,12 @@ $button-tertiary--backgroundColor: $db-color-cool-gray-200 !default; $button-tertiary-hover-backgroundColor: #cdd4da !default; $button-tertiary-active-backgroundColor: #c5ccd3 !default; -$button-secondaryOutline-hover-backgroundColor: rgba( +$button-secondary-hover-backgroundColor: rgba( $db-color-cool-gray-700, 0.03 ) !default; -$button-secondaryOutline-active-backgroundColor: rgba( +$button-secondary-active-backgroundColor: rgba( $db-color-cool-gray-700, 0.06 ) !default; diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index b6e00aa7363..7aaa151b2f4 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -71,7 +71,7 @@ } } - &%variant-secondaryOutline { + &%variant-secondary { background-color: transparent; border-color: $db-color-cool-gray-700; color: $db-color-cool-gray-700; @@ -82,7 +82,7 @@ &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $button-secondary-hover-backgroundColor; } } &:disabled { @@ -90,7 +90,7 @@ color: $db-color-cool-gray-700; } &:active { - background-color: $button-secondaryOutline-active-backgroundColor; + background-color: $button-secondary-active-backgroundColor; } } @@ -115,14 +115,14 @@ &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $button-secondary-hover-backgroundColor; } } &:disabled { background-color: transparent; // shame.css } &:active { - background-color: $button-secondaryOutline-active-backgroundColor; + background-color: $button-secondary-active-backgroundColor; } } @@ -169,8 +169,8 @@ &[data-variant="secondary-inverted"] { @extend %variant-secondary-inverted; } - &[data-variant="secondary-outline"] { - @extend %variant-secondaryOutline; + &[data-variant="secondary"] { + @extend %variant-secondary; } &[data-variant="tertiary"] { @extend %variant-tertiary; diff --git a/tests/backstop.json b/tests/backstop.json index be2f1496f31..d336635230d 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -479,14 +479,14 @@ "onReadyScript": "puppet/clickAndHoverHelper.js" }, { - "label": "Button Secondary Outline", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html" + "label": "Button Secondary", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html" }, { - "label": "Button Secondary Outline - hovered", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-04-button-secondary-outline/elements-buttons-04-button-secondary-outline.rendered.html", + "label": "Button Secondary - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html", "hoverSelectors": [ "p:nth-of-type(1) .elm-button:nth-of-type(1)", "p:nth-of-type(1) .elm-button:nth-of-type(2)", From 0c4f69d4cd5e5d68fc35040a313701d39c6cb124 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:15:08 +0200 Subject: [PATCH 06/31] refactor: brand primary becomes the regular primary button --- .pa11yci | 2 +- .../01-elements/buttons/00-button.json | 2 +- .../buttons/01-button-brand-primary.hbs | 17 ----------------- .../01-elements/buttons/01-button-primary.hbs | 17 +++++++++++++++++ .../01-elements/buttons/09-button-sizes.hbs | 16 ++++++++-------- .../01-elements/buttons/_button.variables.scss | 4 ++-- .../_patterns/01-elements/buttons/button.scss | 14 +++++++------- .../_patterns/02-components/dialog/dialog.hbs | 2 +- tests/backstop.json | 12 ++++++------ 9 files changed, 43 insertions(+), 43 deletions(-) delete mode 100644 source/_patterns/01-elements/buttons/01-button-brand-primary.hbs create mode 100644 source/_patterns/01-elements/buttons/01-button-primary.hbs diff --git a/.pa11yci b/.pa11yci index e1b5afac994..a14217a486e 100644 --- a/.pa11yci +++ b/.pa11yci @@ -84,7 +84,7 @@ "http://127.0.0.1:8080/patterns/base-type-highlight-colors-neutral/base-type-highlight-colors-neutral.rendered.html", "http://127.0.0.1:8080/patterns/base-type-highlight-colors-positive/base-type-highlight-colors-positive.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-00-button/elements-buttons-00-button.rendered.html", - "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", + "http://127.0.0.1:8080/patterns/elements-buttons-01-button-primary/elements-buttons-01-button-primary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-03-button-secondary-inverted/elements-buttons-03-button-secondary-inverted.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-04-button-secondary/elements-buttons-04-button-secondary.rendered.html", "http://127.0.0.1:8080/patterns/elements-buttons-05-button-tertiary/elements-buttons-05-button-tertiary.rendered.html", diff --git a/source/_patterns/01-elements/buttons/00-button.json b/source/_patterns/01-elements/buttons/00-button.json index b9b1f96b455..235f64956d8 100644 --- a/source/_patterns/01-elements/buttons/00-button.json +++ b/source/_patterns/01-elements/buttons/00-button.json @@ -1,5 +1,5 @@ { - "variant": "brand-primary", + "variant": "primary", "title": "Done", "value": "Button" } diff --git a/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs b/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs deleted file mode 100644 index 22018211be0..00000000000 --- a/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs +++ /dev/null @@ -1,17 +0,0 @@ -{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}} -

- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary' disabled='true' icon='add' }} -

-

- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='brand-primary' value='Brand Primary without icon' }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/01-button-primary.hbs b/source/_patterns/01-elements/buttons/01-button-primary.hbs new file mode 100644 index 00000000000..bb8fc099a4a --- /dev/null +++ b/source/_patterns/01-elements/buttons/01-button-primary.hbs @@ -0,0 +1,17 @@ +{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}} +

+ {{> elements-button variant='primary' value='Primary' icon='add'}} + {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='primary' value='Primary with right icon' icon-after='add'}} + {{> elements-button variant='primary' value='Primary with right icon(disabled)' disabled='true' icon-after='add' }} +

+

+ {{> elements-button variant='primary' value='Primary without icon' }} + {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index c5f91e9b7e0..ffb51376b6c 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -1,19 +1,19 @@ {{#each sizes }}

{{ label }}

- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary (disabled)' disabled='true' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}

- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' size=size }} + {{> elements-button variant='primary' value='Primary with right icon' icon-after='add' size=size }} + {{> elements-button variant='primary' value='Primary with right icon(disabled)' disabled='true' icon-after='add' size=size }}

- {{> elements-button variant='brand-primary' value='Brand Primary without icon' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' size=size }} + {{> elements-button variant='primary' value='Primary without icon' size=size }} + {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' size=size }}

- {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} - {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }}

{{/each }} diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index 29b35f82ef0..c032fd71fe1 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -9,8 +9,8 @@ $button---minHeight: to-rem( ) !default; // Background colors -$button-brand-primary--backgroundColor: $db-color-red-500 !default; -$button-brand-primary-hover-backgroundColor: #db0016; +$button-primary--backgroundColor: $db-color-red-500 !default; +$button-primary-hover-backgroundColor: #db0016; $button-secondaryInverted--backgroundColor: $db-color-cool-gray-700 !default; $button-secondaryInverted-hover-backgroundColor: #2f3541; diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 7aaa151b2f4..ba07ed633e5 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -33,23 +33,23 @@ filter: brightness(75%); }*/ - &%variant-brand-primary, + &%variant-primary, &%variant-secondary-inverted { color: $button---color; } - &%variant-brand-primary, + &%variant-primary, &%variant-secondary-inverted { font-weight: 700; } - &%variant-brand-primary { - background-color: $button-brand-primary--backgroundColor; + &%variant-primary { + background-color: $button-primary--backgroundColor; &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-brand-primary-hover-backgroundColor; + background-color: $button-primary-hover-backgroundColor; } } &:active { @@ -163,8 +163,8 @@ } // Providing the variants as HTML attributes as well - &[data-variant="brand-primary"] { - @extend %variant-brand-primary; + &[data-variant="primary"] { + @extend %variant-primary; } &[data-variant="secondary-inverted"] { @extend %variant-secondary-inverted; diff --git a/source/_patterns/02-components/dialog/dialog.hbs b/source/_patterns/02-components/dialog/dialog.hbs index 27e6591d81a..88cf2d02110 100644 --- a/source/_patterns/02-components/dialog/dialog.hbs +++ b/source/_patterns/02-components/dialog/dialog.hbs @@ -11,6 +11,6 @@ {{> elements-button variant="secondary" value='Secondary' }} - {{> elements-button variant="brand-primary" value='Primary' }} + {{> elements-button variant="primary" value='Primary' }} diff --git a/tests/backstop.json b/tests/backstop.json index d336635230d..ca18f4e2409 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -439,14 +439,14 @@ "onReadyScript": "puppet/clickAndHoverHelper.js" }, { - "label": "Button Brand Primary", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html" + "label": "Button Primary", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-01-button-primary/elements-buttons-01-button-primary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-01-button-primary/elements-buttons-01-button-primary.rendered.html" }, { - "label": "Button Brand Primary - hovered", - "url": "http://127.0.0.1:8080/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-01-button-brand-primary/elements-buttons-01-button-brand-primary.rendered.html", + "label": "Button Primary - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-buttons-01-button-primary/elements-buttons-01-button-primary.rendered.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-buttons-01-button-primary/elements-buttons-01-button-primary.rendered.html", "hoverSelectors": [ "p:nth-of-type(1) .elm-button:nth-of-type(1)", "p:nth-of-type(1) .elm-button:nth-of-type(2)", From d89637eb9dda070cc929ce12698970521715bb36 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:16:01 +0200 Subject: [PATCH 07/31] refactor: corrected the order --- .../buttons/{04-button-secondary.hbs => 02-button-secondary.hbs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename source/_patterns/01-elements/buttons/{04-button-secondary.hbs => 02-button-secondary.hbs} (100%) diff --git a/source/_patterns/01-elements/buttons/04-button-secondary.hbs b/source/_patterns/01-elements/buttons/02-button-secondary.hbs similarity index 100% rename from source/_patterns/01-elements/buttons/04-button-secondary.hbs rename to source/_patterns/01-elements/buttons/02-button-secondary.hbs From aff7fcbd47c043db10412b5e6c65024241ab3790 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:20:22 +0200 Subject: [PATCH 08/31] refactor: the button are all supposed to be styled in bold font-weight --- source/_patterns/01-elements/buttons/button.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index ba07ed633e5..d7591b2ad71 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -7,6 +7,8 @@ border-radius: 4px; padding: to-rem($pxValue: 8) to-rem($pxValue: 16); + font-weight: 700; + &[data-icon], &[data-icon-before] { padding-left: to-rem($pxValue: 14); @@ -38,11 +40,6 @@ color: $button---color; } - &%variant-primary, - &%variant-secondary-inverted { - font-weight: 700; - } - &%variant-primary { background-color: $button-primary--backgroundColor; From baf9e15c540710615b4ccd34d445c353ac7d10b3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:22:51 +0200 Subject: [PATCH 09/31] chore: we've removed this in total mainly because of unsatisfying browser support --- source/_patterns/01-elements/buttons/button.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index d7591b2ad71..09a9082989b 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -73,9 +73,6 @@ border-color: $db-color-cool-gray-700; color: $db-color-cool-gray-700; - // TODO: This might get replaced by another effect - backdrop-filter: blur(4px); - &:not(:disabled) { &:hover { // TODO: This could probably get simplified later on e.g. via CSS variables From 5a6ff027419c358f331544956d191acfa5a57b62 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:40:49 +0200 Subject: [PATCH 10/31] refactor: enabling dark backgrounds for the styleguide --- enterprise.patternlab-config.json | 11 ++++++++++- package-lock.json | 14 +++++++++++++- package.json | 3 ++- source/_patterns/00-base/_init.demonstration.scss | 7 +++++++ .../buttons/03-button-secondary-inverted.md | 4 ++++ 5 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 source/_patterns/01-elements/buttons/03-button-secondary-inverted.md diff --git a/enterprise.patternlab-config.json b/enterprise.patternlab-config.json index f678efeca54..6b7d1dd7ce5 100644 --- a/enterprise.patternlab-config.json +++ b/enterprise.patternlab-config.json @@ -80,7 +80,12 @@ } }, "patternExtension": "hbs", - "patternStateCascade": ["inevaluation", "inprogress", "inreview", "complete"], + "patternStateCascade": [ + "inevaluation", + "inprogress", + "inreview", + "complete" + ], "patternExportAll": false, "patternExportDirectory": "pattern_exports", "patternExportPatternPartials": [], @@ -140,6 +145,10 @@ "after": [] } } + }, + "plugin-node-wrappable": { + "enabled": true, + "initialized": false } } } diff --git a/package-lock.json b/package-lock.json index 76ed3c4702c..c5ff7d60be8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "license": "Apache-2.0", "dependencies": { "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "^0.12.0" + "@db-ui/base": "^0.12.0", + "plugin-node-wrappable": "^1.1.0" }, "devDependencies": { "@babel/cli": "^7.17.6", @@ -13510,6 +13511,12 @@ "node": ">=14" } }, + "node_modules/plugin-node-wrappable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/plugin-node-wrappable/-/plugin-node-wrappable-1.1.0.tgz", + "integrity": "sha512-RQQ0MinjKcEL4lDkuim62VpkAUF9CzHZRR11Juv1+JAvNHPgEjiOOyBwtOLzRRnU56WL7WK9sx8/Iv3hUZqdNg==", + "hasInstallScript": true + }, "node_modules/plur": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz", @@ -28963,6 +28970,11 @@ "integrity": "sha512-Zzhyr5RZGoJ1ek2sgfJCt2076kdOg8hnNwFBqAYeLySiutXyxSQk93vZ5gbnFiWV1sHvueCcwla9n35acUTxtA==", "dev": true }, + "plugin-node-wrappable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/plugin-node-wrappable/-/plugin-node-wrappable-1.1.0.tgz", + "integrity": "sha512-RQQ0MinjKcEL4lDkuim62VpkAUF9CzHZRR11Juv1+JAvNHPgEjiOOyBwtOLzRRnU56WL7WK9sx8/Iv3hUZqdNg==" + }, "plur": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz", diff --git a/package.json b/package.json index 59bea98af46..31e82d41c1c 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,8 @@ "license": "Apache-2.0", "dependencies": { "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "^0.12.0" + "@db-ui/base": "^0.12.0", + "plugin-node-wrappable": "^1.1.0" }, "devDependencies": { "@babel/cli": "^7.17.6", diff --git a/source/_patterns/00-base/_init.demonstration.scss b/source/_patterns/00-base/_init.demonstration.scss index eec6ec47318..28080591529 100644 --- a/source/_patterns/00-base/_init.demonstration.scss +++ b/source/_patterns/00-base/_init.demonstration.scss @@ -1,3 +1,10 @@ body.styleguide { display: initial; } + +.sg-wrapper-dark-background { + background-color: $db-color-cool-gray-700; + + margin: -1rem -0.5rem; + padding: 1rem 0.5rem; +} diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md new file mode 100644 index 00000000000..9f0eb5da20d --- /dev/null +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.md @@ -0,0 +1,4 @@ +--- +title: Button secondary inverted +wrap_in: dark-background +--- From d0516f5be4f8c1461af2c89b82e6cde9c4287af2 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:41:48 +0200 Subject: [PATCH 11/31] chore: adding missing default additions for others to be able to overwrite these values --- source/_patterns/01-elements/buttons/_button.variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index c032fd71fe1..1bb922945ad 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -10,10 +10,10 @@ $button---minHeight: to-rem( // Background colors $button-primary--backgroundColor: $db-color-red-500 !default; -$button-primary-hover-backgroundColor: #db0016; +$button-primary-hover-backgroundColor: #db0016 !default; $button-secondaryInverted--backgroundColor: $db-color-cool-gray-700 !default; -$button-secondaryInverted-hover-backgroundColor: #2f3541; +$button-secondaryInverted-hover-backgroundColor: #2f3541 !default; $button-tertiary--backgroundColor: $db-color-cool-gray-200 !default; $button-tertiary-hover-backgroundColor: #cdd4da !default; From 2d2275e1df2d0b68b51e0cb0ac02d7a30e078aa5 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:42:43 +0200 Subject: [PATCH 12/31] chore: adapted the correct styles --- source/_patterns/01-elements/buttons/_button.variables.scss | 3 ++- source/_patterns/01-elements/buttons/button.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index 1bb922945ad..807654c7ee5 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -12,13 +12,14 @@ $button---minHeight: to-rem( $button-primary--backgroundColor: $db-color-red-500 !default; $button-primary-hover-backgroundColor: #db0016 !default; -$button-secondaryInverted--backgroundColor: $db-color-cool-gray-700 !default; +$button-secondaryInverted--backgroundColor: transparent !default; $button-secondaryInverted-hover-backgroundColor: #2f3541 !default; $button-tertiary--backgroundColor: $db-color-cool-gray-200 !default; $button-tertiary-hover-backgroundColor: #cdd4da !default; $button-tertiary-active-backgroundColor: #c5ccd3 !default; +$button-secondary--backgroundColor: transparent !default; $button-secondary-hover-backgroundColor: rgba( $db-color-cool-gray-700, 0.03 diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 09a9082989b..371da30e6ec 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -69,7 +69,7 @@ } &%variant-secondary { - background-color: transparent; + background-color: $button-secondary--backgroundColor; border-color: $db-color-cool-gray-700; color: $db-color-cool-gray-700; From bfb737cbd9dbb920b61242f282a1ee73290fcfad Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 19:56:56 +0200 Subject: [PATCH 13/31] refactor: adapted styles --- source/_patterns/01-elements/buttons/_button.variables.scss | 2 +- source/_patterns/01-elements/buttons/button.scss | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index 807654c7ee5..199e2243de1 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -15,7 +15,7 @@ $button-primary-hover-backgroundColor: #db0016 !default; $button-secondaryInverted--backgroundColor: transparent !default; $button-secondaryInverted-hover-backgroundColor: #2f3541 !default; -$button-tertiary--backgroundColor: $db-color-cool-gray-200 !default; +$button-tertiary--backgroundColor: rgba(0, 0, 0, 0.04) !default; $button-tertiary-hover-backgroundColor: #cdd4da !default; $button-tertiary-active-backgroundColor: #c5ccd3 !default; diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 371da30e6ec..e801432b8c1 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -56,6 +56,7 @@ &%variant-secondary-inverted { background-color: $button-secondaryInverted--backgroundColor; + border-color: #fff; &:not(:disabled) { &:hover { @@ -89,7 +90,8 @@ } &%variant-tertiary { - color: $db-color-cool-gray-700; + // TODO: replace by the correct variable afterwards + color: #0e1013; background-color: $button-tertiary--backgroundColor; &:not(:disabled) { &:hover { From 7021f79153a3096bbb329601d7864581b06e53d4 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:02:56 +0200 Subject: [PATCH 14/31] refactor: adapted the disabled state --- .../01-elements/buttons/_button.variables.scss | 2 +- source/_patterns/01-elements/buttons/button.scss | 13 ++----------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index 199e2243de1..a74278b14f3 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -10,7 +10,7 @@ $button---minHeight: to-rem( // Background colors $button-primary--backgroundColor: $db-color-red-500 !default; -$button-primary-hover-backgroundColor: #db0016 !default; +$button-primary-hover-backgroundColor: #cf0013 !default; $button-secondaryInverted--backgroundColor: transparent !default; $button-secondaryInverted-hover-backgroundColor: #2f3541 !default; diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index e801432b8c1..4b3527d0b78 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -50,7 +50,7 @@ } } &:active { - background-color: #cc0013; // TODO: replace by correct color variable + background-color: #b30010; // TODO: replace by correct color variable } } @@ -80,10 +80,6 @@ background-color: $button-secondary-hover-backgroundColor; } } - &:disabled { - background-color: transparent; - color: $db-color-cool-gray-700; - } &:active { background-color: $button-secondary-active-backgroundColor; } @@ -114,9 +110,6 @@ background-color: $button-secondary-hover-backgroundColor; } } - &:disabled { - background-color: transparent; // shame.css - } &:active { background-color: $button-secondary-active-backgroundColor; } @@ -176,8 +169,6 @@ } &:disabled { - background-color: $db-color-cool-gray-200; - color: $db-color-cool-gray-700; - opacity: 0.5; + opacity: 0.25; } } From 79b1ee3c465a038a57a516de7384f455a932ac5f Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:05:19 +0200 Subject: [PATCH 15/31] refactor: removed those obsolete variants --- source/_patterns/01-elements/buttons/01-button-primary.hbs | 4 ---- source/_patterns/01-elements/buttons/02-button-secondary.hbs | 4 ---- .../01-elements/buttons/03-button-secondary-inverted.hbs | 4 ---- source/_patterns/01-elements/buttons/05-button-tertiary.hbs | 4 ---- source/_patterns/01-elements/buttons/06-button-ghost.hbs | 3 --- source/_patterns/01-elements/buttons/09-button-sizes.hbs | 4 ---- 6 files changed, 23 deletions(-) diff --git a/source/_patterns/01-elements/buttons/01-button-primary.hbs b/source/_patterns/01-elements/buttons/01-button-primary.hbs index bb8fc099a4a..4a56eb53574 100644 --- a/source/_patterns/01-elements/buttons/01-button-primary.hbs +++ b/source/_patterns/01-elements/buttons/01-button-primary.hbs @@ -3,10 +3,6 @@ {{> elements-button variant='primary' value='Primary' icon='add'}} {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }}

-

- {{> elements-button variant='primary' value='Primary with right icon' icon-after='add'}} - {{> elements-button variant='primary' value='Primary with right icon(disabled)' disabled='true' icon-after='add' }} -

{{> elements-button variant='primary' value='Primary without icon' }} {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} diff --git a/source/_patterns/01-elements/buttons/02-button-secondary.hbs b/source/_patterns/01-elements/buttons/02-button-secondary.hbs index 605cb5d1dc2..354fdeba0bd 100644 --- a/source/_patterns/01-elements/buttons/02-button-secondary.hbs +++ b/source/_patterns/01-elements/buttons/02-button-secondary.hbs @@ -2,10 +2,6 @@ {{> elements-button variant='secondary' value='Secondary' icon='add' }} {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }}

-

- {{> elements-button variant='secondary' value='Secondary with right icon' icon-after='add'}} - {{> elements-button variant='secondary' value='Secondary with right icon (disabled)' disabled='true' icon-after='add' }} -

{{> elements-button variant='secondary' value='Secondary without left icon' }} {{> elements-button variant='secondary' value='Secondary without left icon (disabled)' disabled='true' }} diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs index 4ffc9687c9e..cbcab4c2e63 100644 --- a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs @@ -2,10 +2,6 @@ {{> elements-button variant='secondary-inverted' value='Secondary inverted' icon='add' }} {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' icon='add' }}

-

- {{> elements-button variant='secondary-inverted' value='Secondary inverted with icon' icon-after='add'}} - {{> elements-button variant='secondary-inverted' value='Secondary inverted with icon (disabled)' disabled='true' icon-after='add' }} -

{{> elements-button variant='secondary-inverted' value='Secondary inverted without icon' }} {{> elements-button variant='secondary-inverted' value='Secondary inverted without icon (disabled)' disabled='true' }} diff --git a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs index 28fb7308c22..1b3e734daef 100644 --- a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs +++ b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs @@ -2,10 +2,6 @@ {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }}

-

- {{> elements-button variant='tertiary' value='Tertiary with right icon' icon-after='add'}} - {{> elements-button variant='tertiary' value='Tertiary with right icon (disabled)' disabled='true' icon-after='add' }} -

{{> elements-button variant='tertiary' value='Tertiary without icon' }} {{> elements-button variant='tertiary' value='Tertiary without icon (disabled)' disabled='true' }} diff --git a/source/_patterns/01-elements/buttons/06-button-ghost.hbs b/source/_patterns/01-elements/buttons/06-button-ghost.hbs index 65e4e74c358..5349c966eda 100644 --- a/source/_patterns/01-elements/buttons/06-button-ghost.hbs +++ b/source/_patterns/01-elements/buttons/06-button-ghost.hbs @@ -4,9 +4,6 @@ {{> elements-button variant='ghost' value='Ghost' disabled='true' }}

- {{> elements-button variant='ghost' value='Ghost with right icon' icon-after='add'}} - {{> elements-button variant='ghost' value='Ghost with right icon(disabled)' disabled='true' icon-after='add' }} -

{{> elements-button variant='ghost' value='Ghost without left icon' }} {{> elements-button variant='ghost' value='Ghost without left icon (disabled)' disabled='true' }}

diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index ffb51376b6c..141926ee1d9 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -4,10 +4,6 @@ {{> elements-button variant='primary' value='Primary' icon='add' size=size }} {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}

-

- {{> elements-button variant='primary' value='Primary with right icon' icon-after='add' size=size }} - {{> elements-button variant='primary' value='Primary with right icon(disabled)' disabled='true' icon-after='add' size=size }} -

{{> elements-button variant='primary' value='Primary without icon' size=size }} {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' size=size }} From 85429b13d949c84ff559fa585a5dd17fdf427a9a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:09:43 +0200 Subject: [PATCH 16/31] refactor: renaming regular size to medium --- source/_patterns/01-elements/buttons/09-button-sizes.json | 4 ++-- source/_patterns/01-elements/buttons/_buttons.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.json b/source/_patterns/01-elements/buttons/09-button-sizes.json index c6cf94a0701..e996a3ec663 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.json +++ b/source/_patterns/01-elements/buttons/09-button-sizes.json @@ -5,8 +5,8 @@ "label": "Small" }, { - "size": "regular", - "label": "Regular (default, data-size attribute is optional)" + "size": "medium", + "label": "Medium (default, data-size attribute is optional)" }, { "size": "large", diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 8e12b5cfed0..6ffd3ea4296 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -19,11 +19,11 @@ You could set the different button variants via the `data-variant` attribute. #### SCSS (recommended) -Extend one of the size placeholders in case that you don't want the default (regular): `%size-Small` or `%size-Large` +Extend one of the size placeholders in case that you don't want the default (medium): `%size-Small` or `%size-Large` #### HTML attribute -You could set the different button sizes via the `data-size` attribute, the default is "regular" and is in that case optional. +You could set the different button sizes via the `data-size` attribute, the default is "medium" and is in that case optional. ## Usability From 7b6709a71519d9ae8852c363b9bae77ccd980fc6 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:33:40 +0200 Subject: [PATCH 17/31] refactor: added xsmall size and other size related aspects out of the new stylings --- .../01-elements/buttons/09-button-sizes.json | 4 +++ .../buttons/_button.variables.scss | 2 +- .../_patterns/01-elements/buttons/_buttons.md | 2 +- .../_patterns/01-elements/buttons/button.scss | 33 +++++++++++++++---- 4 files changed, 33 insertions(+), 8 deletions(-) diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.json b/source/_patterns/01-elements/buttons/09-button-sizes.json index e996a3ec663..572ccc74d84 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.json +++ b/source/_patterns/01-elements/buttons/09-button-sizes.json @@ -1,5 +1,9 @@ { "sizes": [ + { + "size": "xsmall", + "label": "XSmall" + }, { "size": "small", "label": "Small" diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss index a74278b14f3..dfb325b7190 100644 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ b/source/_patterns/01-elements/buttons/_button.variables.scss @@ -5,7 +5,7 @@ $button---color: #fff !default; $button---minHeight: to-rem( - $pxValue: 44 + $pxValue: 40 ) !default; // Background colors diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 6ffd3ea4296..1171733b2dc 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -19,7 +19,7 @@ You could set the different button variants via the `data-variant` attribute. #### SCSS (recommended) -Extend one of the size placeholders in case that you don't want the default (medium): `%size-Small` or `%size-Large` +Extend one of the size placeholders in case that you don't want the default (medium): `%size-XSmall`, `%size-Small` or `%size-Large` #### HTML attribute diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 4b3527d0b78..4a3ff719043 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -5,7 +5,7 @@ .elm-button { border: 1px solid transparent; border-radius: 4px; - padding: to-rem($pxValue: 8) to-rem($pxValue: 16); + padding: to-rem($pxValue: 7) to-rem($pxValue: 16); font-weight: 700; @@ -116,8 +116,29 @@ } // Sizes + &%size-XSmall { + min-height: to-rem($pxValue: 28); + padding: to-rem($pxValue: 3) to-rem($pxValue: 8); + + &:not(.is-icon-text-replace) { + font-size: to-rem($pxValue: 12); + } + &[data-icon], + &[data-icon-before] { + @include iconMeta(20); + } + &[data-icon-after] { + @include iconMeta($size: 20, $position: "after"); + } + // Square icon only buttons + &.is-icon-text-replace { + width: to-rem($pxValue: 28); + } + } &%size-Small { - min-height: to-rem($pxValue: 36); + min-height: to-rem($pxValue: 32); + padding: to-rem($pxValue: 5) to-rem($pxValue: 12); + &:not(.is-icon-text-replace) { font-size: to-rem($pxValue: 14); } @@ -134,16 +155,16 @@ } } &%size-Large { - min-height: to-rem($pxValue: 52); - &:not(.is-icon-text-replace) { - font-size: to-rem($pxValue: 20); - } + min-height: to-rem($pxValue: 48); // Square icon only buttons &.is-icon-text-replace { width: to-rem($pxValue: 52); } } + &[data-size="xsmall"] { + @extend %size-XSmall; + } &[data-size="small"] { @extend %size-Small; } From 01ea42c081426dace6e36f1b565e257d8e7ce630 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:35:45 +0200 Subject: [PATCH 18/31] docs: reordered --- .../_patterns/01-elements/buttons/01-button-primary.hbs | 8 ++++---- .../_patterns/01-elements/buttons/02-button-secondary.hbs | 8 ++++---- .../01-elements/buttons/03-button-secondary-inverted.hbs | 8 ++++---- .../_patterns/01-elements/buttons/05-button-tertiary.hbs | 8 ++++---- source/_patterns/01-elements/buttons/06-button-ghost.hbs | 7 +++---- source/_patterns/01-elements/buttons/09-button-sizes.hbs | 4 ++-- 6 files changed, 21 insertions(+), 22 deletions(-) diff --git a/source/_patterns/01-elements/buttons/01-button-primary.hbs b/source/_patterns/01-elements/buttons/01-button-primary.hbs index 4a56eb53574..07b1d534ae0 100644 --- a/source/_patterns/01-elements/buttons/01-button-primary.hbs +++ b/source/_patterns/01-elements/buttons/01-button-primary.hbs @@ -1,11 +1,11 @@ {{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}

- {{> elements-button variant='primary' value='Primary' icon='add'}} - {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }} + {{> elements-button variant='primary' value='Primary' }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' }}

- {{> elements-button variant='primary' value='Primary without icon' }} - {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} + {{> elements-button variant='primary' value='Primary' icon='add'}} + {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }}

{{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} diff --git a/source/_patterns/01-elements/buttons/02-button-secondary.hbs b/source/_patterns/01-elements/buttons/02-button-secondary.hbs index 354fdeba0bd..b90f3997fa8 100644 --- a/source/_patterns/01-elements/buttons/02-button-secondary.hbs +++ b/source/_patterns/01-elements/buttons/02-button-secondary.hbs @@ -1,10 +1,10 @@

- {{> elements-button variant='secondary' value='Secondary' icon='add' }} - {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }} + {{> elements-button variant='secondary' value='Secondary' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }}

- {{> elements-button variant='secondary' value='Secondary without left icon' }} - {{> elements-button variant='secondary' value='Secondary without left icon (disabled)' disabled='true' }} + {{> elements-button variant='secondary' value='Secondary' icon='add' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }}

{{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} diff --git a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs index cbcab4c2e63..a88ad87e7a3 100644 --- a/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs +++ b/source/_patterns/01-elements/buttons/03-button-secondary-inverted.hbs @@ -1,10 +1,10 @@

- {{> elements-button variant='secondary-inverted' value='Secondary inverted' icon='add' }} - {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' icon='add' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' }}

- {{> elements-button variant='secondary-inverted' value='Secondary inverted without icon' }} - {{> elements-button variant='secondary-inverted' value='Secondary inverted without icon (disabled)' disabled='true' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted' icon='add' }} + {{> elements-button variant='secondary-inverted' value='Secondary inverted (disabled)' disabled='true' icon='add' }}

{{> elements-button variant='secondary-inverted' title='Check' value='Secondary inverted displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} diff --git a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs index 1b3e734daef..f92756cc628 100644 --- a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs +++ b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs @@ -1,10 +1,10 @@

- {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} - {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }} + {{> elements-button variant='tertiary' value='Tertiary' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }}

- {{> elements-button variant='tertiary' value='Tertiary without icon' }} - {{> elements-button variant='tertiary' value='Tertiary without icon (disabled)' disabled='true' }} + {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }}

{{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} diff --git a/source/_patterns/01-elements/buttons/06-button-ghost.hbs b/source/_patterns/01-elements/buttons/06-button-ghost.hbs index 5349c966eda..a47df3fbf3e 100644 --- a/source/_patterns/01-elements/buttons/06-button-ghost.hbs +++ b/source/_patterns/01-elements/buttons/06-button-ghost.hbs @@ -1,11 +1,10 @@ -

{{> elements-button variant='ghost' value='Ghost' }} - {{> elements-button variant='ghost' value='Ghost' disabled='true' }} + {{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }}

- {{> elements-button variant='ghost' value='Ghost without left icon' }} - {{> elements-button variant='ghost' value='Ghost without left icon (disabled)' disabled='true' }} + {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost' disabled='true' }}

{{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index 141926ee1d9..3c415d09c67 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -5,8 +5,8 @@ {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}

- {{> elements-button variant='primary' value='Primary without icon' size=size }} - {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' size=size }} + {{> elements-button variant='primary' value='Primary' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' size=size }}

{{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} From 5ac4b1ad89059ed3ecff5b868f07c832443fb40c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:39:17 +0200 Subject: [PATCH 19/31] docs: reordered --- source/_patterns/01-elements/buttons/09-button-sizes.hbs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index 3c415d09c67..5bbeae93d76 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -1,13 +1,13 @@ {{#each sizes }}

{{ label }}

-

- {{> elements-button variant='primary' value='Primary' icon='add' size=size }} - {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }} -

{{> elements-button variant='primary' value='Primary' size=size }} {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' size=size }}

+

+ {{> elements-button variant='primary' value='Primary' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }} +

{{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }} From 9202b2158663f02721d5bc537c63da26dffa506e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 8 Sep 2022 20:51:03 +0200 Subject: [PATCH 20/31] refactor: added button width --- source/_patterns/01-elements/buttons/00-button.hbs | 1 + .../01-elements/buttons/10-button-width.hbs | 12 ++++++++++++ .../01-elements/buttons/10-button-width.json | 8 ++++++++ .../_patterns/01-elements/buttons/10-button-width.md | 4 ++++ .../01-elements/buttons/_button.demonstration.scss | 5 +++++ source/_patterns/01-elements/buttons/_buttons.md | 12 +++++++++++- source/_patterns/01-elements/buttons/button.scss | 11 +++++++++++ source/css/enterprise/db-ui-core.demonstration.scss | 1 + 8 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 source/_patterns/01-elements/buttons/10-button-width.hbs create mode 100644 source/_patterns/01-elements/buttons/10-button-width.json create mode 100644 source/_patterns/01-elements/buttons/10-button-width.md create mode 100644 source/_patterns/01-elements/buttons/_button.demonstration.scss diff --git a/source/_patterns/01-elements/buttons/00-button.hbs b/source/_patterns/01-elements/buttons/00-button.hbs index d40d82f7901..1e8d018b1d2 100644 --- a/source/_patterns/01-elements/buttons/00-button.hbs +++ b/source/_patterns/01-elements/buttons/00-button.hbs @@ -1,6 +1,7 @@ diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 0ec9ab399eb..6973f786f95 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -284,4 +284,19 @@ &:disabled { opacity: 0.25; } + + // States (currently only "loading") + &[data-state="loading"] { + @include is-icon-text-replace(); + + &::before { + content: " "; + } + } + + // Including a loading indicator + --loadingIndicator---color: currentColor; + &[data-state="loading"] { + font-size: 0; + } } diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss index e28d3ba696c..ca32d005048 100644 --- a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss +++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss @@ -28,7 +28,7 @@ } .elm-loadingindicator { - color: $db-color-red-500; + color: var(--loadingIndicator---color, #{$db-color-red-500}); animation: loadingindicator-rotate 3s linear infinite; @include loadingindicator--sizes("elm-"); From 1c8aaaa60db63cfa26ba47a1c3361f8b38f794f0 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 12 Oct 2022 16:08:05 +0200 Subject: [PATCH 31/31] Update button.scss --- source/_patterns/01-elements/buttons/button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 6973f786f95..7f3b4242445 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -157,7 +157,7 @@ &%size-XSmall { $height: 24; // $icon-size: 16; - // TODO: remove this dirty hack after we've got the correct 16px icons + // TODO: replace this dirty hack after we've got the correct 16px icons / replace 20 by 16 $icon-size: 20; min-height: to-rem($pxValue: $height); @@ -189,7 +189,7 @@ &%size-Small { $height: 32; // $icon-size: 16; - // TODO: remove this dirty hack after we've got the correct 16px icons + // TODO: replace this dirty hack after we've got the correct 16px icons / replace 20 by 16 $icon-size: 20; min-height: to-rem($pxValue: $height);