Skip to content

Commit 67ef312

Browse files
mfranzkenmergetannsch
authored
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]>
1 parent 7aa3ac7 commit 67ef312

27 files changed

+245
-270
lines changed

‎docs/migrationGuide.adoc

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,18 @@ We've removed the following files, that we already deprecated within the previou
1515
- `@db-ui/core/sources/css/enterprise/db-ui-core-rollup.scss`
1616
- `@db-ui/core/sources/css/enterprise/db-ui-core-webpack.scss`
1717

18-
=== progress
18+
=== `button`
19+
20+
- The `large` size has been removed; it became obsolete mainly due to our `tonality` introduction
21+
- And renamed `regular` size to `medium`
22+
- Made some changes regarding the variants:
23+
- `Brand primary` becomes the regular `Primary` button
24+
- `Primary` becomes `Secondary Inverted`
25+
- `Secondary Outline` becomes `Secondary`
26+
- `Secondary Solid` becomes `Tertiary`
27+
- `Tertiary Plain` becomes `Ghost`
28+
29+
=== `progress`
1930

2031
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:
2132

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@use "@db-ui/base/build/scss/variables" as *;
2+
13
body.styleguide {
24
display: initial;
35
}
6+
7+
.sg-wrapper-dark-background {
8+
background-color: $db-colors-secondary-enabled;
9+
10+
margin: -1rem -0.5rem;
11+
padding: 1rem 0.5rem;
12+
}

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

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1+
{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}
12
<p>
2-
{{> elements-button variant='primary' value='Primary' icon='add' }}
3-
{{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' }}
3+
{{> elements-button variant='primary' value='Primary' }}
4+
{{> elements-button variant='primary' value='Primary (disabled)' disabled='true' }}
45
</p>
56
<p>
6-
{{> elements-button variant='primary' value='Primary with icon' icon-after='add'}}
7-
{{> elements-button variant='primary' value='Primary with icon (disabled)' disabled='true' icon-after='add' }}
8-
</p>
9-
<p>
10-
{{> elements-button variant='primary' value='Primary without icon' }}
11-
{{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }}
7+
{{> elements-button variant='primary' value='Primary' icon='add'}}
8+
{{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }}
129
</p>
1310
<p>
1411
{{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }}
1512
{{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}
1613
</p>
14+
<p>
15+
{{> elements-button variant='primary' title='Check' value='loading' state='loading' }}
16+
</p>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<p>
2+
{{> elements-button variant='secondary' value='Secondary' }}
3+
{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }}
4+
</p>
5+
<p>
6+
{{> elements-button variant='secondary' value='Secondary' icon='add' }}
7+
{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }}
8+
</p>
9+
<p>
10+
{{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }}
11+
{{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}
12+
</p>
13+
<p>
14+
{{> elements-button variant='secondary' title='Check' value='loading' state='loading' }}
15+
</p>
16+
17+
18+
<p class="db-bg-success-light-ia">
19+
{{> elements-button variant='secondary' value='Secondary' }}
20+
{{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }}
21+
</p>

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

Lines changed: 0 additions & 16 deletions
This file was deleted.

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

Lines changed: 0 additions & 16 deletions
This file was deleted.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<p>
2+
{{> elements-button variant='tertiary' value='Tertiary' }}
3+
{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }}
4+
</p>
5+
<p>
6+
{{> elements-button variant='tertiary' value='Tertiary' icon='add' }}
7+
{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }}
8+
</p>
9+
<p>
10+
{{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }}
11+
{{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}
12+
</p>
13+
<p>
14+
{{> elements-button variant='tertiary' title='Check' value='loading' state='loading' }}
15+
</p>
16+
17+
<p class="db-bg-success-light-ia">
18+
{{> elements-button variant='tertiary' value='Tertiary' }}
19+
{{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }}
20+
</p>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<p>
2+
{{> elements-button variant='ghost' value='Ghost' }}
3+
{{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }}
4+
</p>
5+
<p>
6+
{{> elements-button variant='ghost' value='Ghost' }}
7+
{{> elements-button variant='ghost' value='Ghost' disabled='true' }}
8+
</p>
9+
<p>
10+
{{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }}
11+
{{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}
12+
</p>
13+
<p>
14+
{{> elements-button variant='ghost' title='Check' value='loading' state='loading' }}
15+
</p>
16+
17+
<p class="db-bg-success-light-ia">
18+
{{> elements-button variant='ghost' value='Ghost' }}
19+
{{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }}
20+
</p>

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

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)