refactor: guidelines 3.0 button style (#107)

* chore: label correction

* refactor: primary becomes secondary inverted

* refactor: tertiary plain becomes ghost

* refactor: secondary solid becomes tertiary

* refactor: secondary outline becomes secondary

* refactor: brand primary becomes the regular primary button

* refactor: corrected the order

* refactor: the button are all supposed to be styled in bold font-weight

* chore: we've removed this in total

mainly because of unsatisfying browser support

* refactor: enabling dark backgrounds for the styleguide

* chore: adding missing default additions

for others to be able to overwrite these values

* chore: adapted the correct styles

* refactor: adapted styles

* refactor: adapted the disabled state

* refactor: removed those obsolete variants

* refactor: renaming regular size to medium

* refactor: added xsmall size and other size related aspects out of the new stylings

* docs: reordered

* docs: reordered

* refactor: added button width

* docs: added missing SCSS placeholders

* refactor: checked all of the hover and active background-colors again

* refactor: background-color should change on hover hover with a transition

* feat: added new sizes and let smallest buttons include 16px icon sizes

* refactor: using DB UI Base variable

* refactor: transition declaration

* chore: slightly increased the paragraphs width

to ensure the effect that we want to show

* refactor: added those dirty hacks for the small icon sizes

* refactor: simplified the testcases

* feat: added loading state

* Update button.scss

* chore: stylelint feedback

* refactor: removed plugin-node-wrappable plugin again

in favour of defining the classes directly

* refactor: not using sg-wrapper anymore

that was introduced by plugin-node-wrappable plugin usage

* chore: removed the (now) obsolete sizes

* fix: removed that redundant (and incorrect) declaration

* chore: prevent HTML errors

* chore: adapted the necessary changes

after DB UI Base update

* chore: added a variation for the id value

* Refactor dbux 3 button new (#155)

* refactor: button with new db-ui-base


Co-authored-by: Anna Schoderer <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>

* Update _buttons.md

* refactor: removed obsolete variables

* refactor: removed obsolete file

* Update migrationGuide.adoc

* Update migrationGuide.adoc

Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: Anna Schoderer <[email protected]>

Author: 3 people

docs/migrationGuide.adoc

@@ -15,7 +15,18 @@ We've removed the following files, that we already deprecated within the previou
 - `@db-ui/core/sources/css/enterprise/db-ui-core-rollup.scss`
 - `@db-ui/core/sources/css/enterprise/db-ui-core-webpack.scss`
 
-=== progress
+=== `button`
+
+- The `large` size has been removed; it became obsolete mainly due to our `tonality` introduction
+- And renamed `regular` size to `medium`
+- Made some changes regarding the variants:
+  - `Brand primary` becomes the regular `Primary` button
+  - `Primary` becomes `Secondary Inverted`
+  - `Secondary Outline` becomes `Secondary`
+  - `Secondary Solid` becomes `Tertiary`
+  - `Tertiary Plain` becomes `Ghost`
+
+=== `progress`
 
 We've remove the deprecated previous HTML implementation of the label by an `output` element and replaced it by an actual `label` element. Necessary changes:
 

source/_patterns/00-base/_init.demonstration.scss

@@ -1,3 +1,12 @@
+@use "@db-ui/base/build/scss/variables" as *;
+
 body.styleguide {
 	display: initial;
 }
+
+.sg-wrapper-dark-background {
+	background-color: $db-colors-secondary-enabled;
+
+	margin: -1rem -0.5rem;
+	padding: 1rem 0.5rem;
+}

source/_patterns/01-elements/buttons/01-button-brand-primary.hbs

@@ -1,16 +1,16 @@
+{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}
 <p>
-	{{> 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' }}
+	{{> elements-button variant='primary' value='Primary (disabled)' disabled='true' }}
 </p>
 <p>
-	{{> 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' }}
-</p>
-<p>
-	{{> 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' }}
 </p>
 <p>
 	{{> 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' }}
 </p>
+<p>
+	{{> elements-button variant='primary' title='Check' value='loading' state='loading' }}
+</p>

source/_patterns/01-elements/buttons/03-button-primary.hbs renamed to source/_patterns/01-elements/buttons/01-button-primary.hbs

@@ -0,0 +1,21 @@
+<p>
+	{{> elements-button variant='secondary' value='Secondary' }}
+	{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }}
+</p>
+<p>
+	{{> elements-button variant='secondary' value='Secondary' icon='add' }}
+	{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }}
+</p>
+<p>
+	{{> 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' }}
+</p>
+<p>
+	{{> elements-button variant='secondary' title='Check' value='loading' state='loading' }}
+</p>
+
+
+<p class="db-bg-success-light-ia">
+	{{> elements-button variant='secondary' value='Secondary' }}
+	{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }}
+</p>

source/_patterns/01-elements/buttons/02-button-secondary.hbs

@@ -0,0 +1,20 @@
+<p>
+	{{> elements-button variant='tertiary' value='Tertiary' }}
+	{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }}
+</p>
+<p>
+	{{> elements-button variant='tertiary' value='Tertiary' icon='add' }}
+	{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }}
+</p>
+<p>
+	{{> 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' }}
+</p>
+<p>
+	{{> elements-button variant='tertiary' title='Check' value='loading' state='loading' }}
+</p>
+
+<p class="db-bg-success-light-ia">
+	{{> elements-button variant='tertiary' value='Tertiary' }}
+	{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }}
+</p>

source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs

@@ -0,0 +1,20 @@
+<p>
+	{{> elements-button variant='ghost' value='Ghost' }}
+	{{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }}
+</p>
+<p>
+	{{> elements-button variant='ghost' value='Ghost' }}
+	{{> elements-button variant='ghost' value='Ghost' disabled='true' }}
+</p>
+<p>
+	{{> 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' }}
+</p>
+<p>
+	{{> elements-button variant='ghost' title='Check' value='loading' state='loading' }}
+</p>
+
+<p class="db-bg-success-light-ia">
+	{{> elements-button variant='ghost' value='Ghost' }}
+	{{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }}
+</p>

source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs

@@ -2,19 +2,15 @@
 	<!-- [html-validate-disable-next heading-level] -->
 	<h2>{{ label }}</h2>
 	<p>
-		{{> 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' size=size }}
+		{{> elements-button variant='primary' value='Primary (disabled)' disabled='true' size=size }}
 	</p>
 	<p>
-	{{> 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' icon='add' size=size }}
+		{{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}
 	</p>
 	<p>
-		{{> 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 }}
-	</p>
-	<p>
-		{{> 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 }}
 	</p>
 {{/each }}

source/_patterns/01-elements/buttons/05-button-tertiary.hbs

@@ -5,12 +5,8 @@
 			"label": "Small"
 		},
 		{
-			"size": "regular",
-			"label": "Regular (default, data-size attribute is optional)"
-		},
-		{
-			"size": "large",
-			"label": "Large"
+			"size": "medium",
+			"label": "Medium (default, data-size attribute is optional)"
 		}
 	]
 }

source/_patterns/01-elements/buttons/06-button-ghost.hbs

@@ -0,0 +1,13 @@
+{{#each width }}
+	<!-- [html-validate-disable-next heading-level] -->
+	<h2>{{ label }}</h2>
+	<p>
+		{{> elements-button variant='primary' value='Primary' width=width }}
+	</p>
+	<p>
+		{{> elements-button variant='primary' value='Primary' icon='add' width=width }}
+	</p>
+	<p>
+		{{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' width=width }}
+	</p>
+{{/each }}

source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs

@@ -0,0 +1,8 @@
+{
+	"width": [
+		{
+			"width": "full",
+			"label": "FullWidth"
+		}
+	]
+}

source/_patterns/01-elements/buttons/09-button-sizes.hbs

@@ -0,0 +1,3 @@
+---
+title: Button width
+---

source/_patterns/01-elements/buttons/09-button-sizes.json

@@ -0,0 +1,9 @@
+/* stylelint-disable selector-max-id */
+#elements-button-width {
+	.pl-js-pattern-example {
+		p {
+			/* stylelint-enable selector-max-id */
+			width: 300px;
+		}
+	}
+}

source/_patterns/01-elements/buttons/10-button-width.hbs

@@ -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-primary`, `%variant-secondary`, `%variant-tertiary` or `%variant-ghost`
 
 #### HTML attribute
 
@@ -19,11 +19,21 @@ You could set the different button variants via the `data-variant` attribute.
 
 #### SCSS (recommended)
 
-Extend one of the size SCSS placeholders in case that you don't want the default (regular): `%size-Small` or `%size-Large`
+Extend the size SCSS placeholder in case that you don't want the default (medium): `%size-Small`
 
 #### HTML attribute
 
-You could set the different button sizes via the `data-size` attribute, the default is "regular" and in that case is optional.
+You could set the different button sizes via the `data-size` attribute, the default is "medium" and in that case is optional.
+
+### Width
+
+#### SCSS (recommended)
+
+Extend the width placeholders in case that you don't want the default (content-length sized): `%width-full`
+
+#### HTML attribute
+
+You could differentiate the button width via the `data-width` attribute, choose value "full" for a button taking the whole containers width; the default is "auto" and in that case is optional.
 
 ## Usability
 

source/_patterns/01-elements/buttons/10-button-width.json

@@ -1,11 +1,14 @@
 <button class="elm-button {{ styleModifier }}"
 	{{#if variant }}data-variant="{{ variant }}"{{/if }}
 	{{#if size }} data-size="{{ size }}"{{/if }}
+	{{#if width }} data-width="{{ width }}"{{/if }}
 	title="{{ title }}"
 	type="{{#if buttontype }}{{ buttontype }}{{else}}button{{/if }}"
 	{{#if role }} role="{{ role }}"{{/if }}
 	{{#if disabled }} disabled{{/if }}
 	{{#if icon}} data-icon="{{ icon }}"{{/if}}
-	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}>
+	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
+	{{#if state}} data-state="{{ state }}"{{/if}}>
 	{{{ value }}}
+	{{#if_eq state "loading" }}{{> elements-loading-indicator size="xs" id=variant }}{{/if_eq }}
 </button>

source/_patterns/01-elements/buttons/10-button-width.md

@@ -1,5 +1,5 @@
 {
-	"variant": "brand-primary",
+	"variant": "primary",
 	"title": "Done",
-	"value": "Red 500"
+	"value": "Button"
 }