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>