Skip to content

Commit 821a339

Browse files
djthorpedjthorpe
committed
Updated buttons
1 parent da8bd09 commit 821a339

File tree

6 files changed

+103
-50
lines changed

6 files changed

+103
-50
lines changed

‎src/button/ButtonElement.js

+42-6
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,32 @@ export class ButtonElement extends LitElement {
4242

4343
static get styles() {
4444
return css`
45+
button {
46+
display: inline-block;
47+
position: relative;
48+
margin: none;
49+
padding: var(--button-padding-y) var(--button-padding-x);
50+
color: var(--button-color);
51+
background-color: var(--button-background-color);
52+
cursor: pointer;
53+
user-select: none;
54+
}
4555
button.control {
56+
color: var(--button-control-color);
4657
background: transparent;
58+
border: none;
59+
padding: var(--button-control-padding-y) var(--button-control-padding-x);
60+
61+
&:hover {
62+
color: var(--button-control-color-hover);
63+
}
64+
&:active {
65+
color: var(--button-control-color-active);
66+
}
67+
&:disabled {
68+
color: var(--button-control-color-disabled);
69+
cursor: default;
70+
}
4771
}
4872
`;
4973
}
@@ -59,8 +83,12 @@ export class ButtonElement extends LitElement {
5983
return classes;
6084
}
6185

86+
get buttonTitle() {
87+
return this.textContent.trim();
88+
}
89+
6290
get controlButtonIcon() {
63-
switch (this.type.toLowerCase()) {
91+
switch (this.buttonTitle.toLowerCase()) {
6492
case 'close':
6593
return 'x-square';
6694
case 'help':
@@ -76,20 +104,28 @@ export class ButtonElement extends LitElement {
76104

77105
renderButton() {
78106
return html`
79-
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled}><slot></slot></button>
107+
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
108+
<slot></slot>
109+
</button>
80110
`;
81111
}
82112

83113
renderSubmit() {
84114
return html`
85-
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled}><slot></slot></button>
115+
<button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}><slot></slot></button>
86116
`;
87117
}
88118

89119
renderControl() {
90-
return html`
91-
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled}><slot></slot></button>
92-
`;
120+
const icon = this.controlButtonIcon;
121+
if (icon) {
122+
return html`
123+
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
124+
<wc-icon name=${icon}></wc-icon>
125+
</button>
126+
`;
127+
}
128+
return this.renderButton();
93129
}
94130

95131
render() {

‎src/button/ControlButtonGroupElement.js

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class ControlButtonGroupElement extends LitElement {
4040
padding: 0;
4141
border: 0;
4242
background: transparent;
43+
margin: var(--control-button-group-margin-y) var(--control-button-group-margin-x) ;
4344
}
4445
`;
4546
}

‎src/button/button.css

+37-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,39 @@
1-
.text-transform-uppercase {
2-
text-transform: uppercase;
3-
}
41

5-
.text-transform-lowercase {
6-
text-transform: lowercase;
7-
}
2+
:root {
3+
/* button */
4+
--button-background-color: var(--control-color);
5+
--button-background-color-hover: var(--control-color-hover);
6+
--button-background-color-active: var(--control-color-active);
7+
--button-background-color-disabled: var(--control-color-disabled);
8+
--button-color: var(--dark-color);
9+
--button-color-hover: var(--light-color);
10+
--button-color-active: var(--light-color);
11+
--button-color-disabled: var(--light-color);
12+
--button-font-weight: var(--font-weight-normal);
13+
--button-font-weight-hover: var(--font-weight-bold);
14+
--button-font-weight-active: var(--font-weight-bold);
15+
--button-font-weight-disabled: var(--font-weight-normal);
16+
--button-font-weight-default: var(--font-weight-semibold);
17+
--button-border: none;
18+
--button-border-color: var(--black-color);
19+
--button-border-radius: var(--border-radius);
20+
--button-border-radius-left: var(--button-border-radius);
21+
--button-border-radius-right: var(--button-border-radius);
22+
--button-font-size: var(--font-size-normal);
23+
--button-padding-x: 0.45em;
24+
--button-padding-y: 0.45em;
25+
--button-offset-active: 0.1em;
26+
--button-group-divider-color: var(--light-color);
827

9-
.text-transform-capitalize {
10-
text-transform: capitalize;
11-
}
28+
/* close */
29+
--button-control-padding-x: 0;
30+
--button-control-padding-y: 0;
31+
--button-control-color: var(--control-color);
32+
--button-control-color-hover: var(--control-color-hover);
33+
--button-control-color-active: var(--control-color-active);
34+
--button-control-color-disabled: var(--control-color-disabled);
35+
36+
/* control button group */
37+
--control-button-group-margin-y: 0.3em;
38+
--control-button-group-margin-x: 0.3em;
39+
}

‎src/core.css

-33
Original file line numberDiff line numberDiff line change
@@ -72,39 +72,6 @@
7272
/* borders */
7373
--border-radius: 0.20em;
7474

75-
/* button */
76-
--button-background-color: var(--control-color);
77-
--button-background-color-hover: var(--control-color-hover);
78-
--button-background-color-active: var(--control-color-active);
79-
--button-background-color-disabled: var(--control-color-disabled);
80-
--button-color: var(--dark-color);
81-
--button-color-hover: var(--light-color);
82-
--button-color-active: var(--light-color);
83-
--button-color-disabled: var(--light-color);
84-
--button-font-weight: var(--font-weight-normal);
85-
--button-font-weight-hover: var(--font-weight-bold);
86-
--button-font-weight-active: var(--font-weight-bold);
87-
--button-font-weight-disabled: var(--font-weight-normal);
88-
--button-font-weight-default: var(--font-weight-semibold);
89-
--button-border: none;
90-
--button-border-color: var(--black-color);
91-
--button-border-radius: var(--border-radius);
92-
--button-border-radius-left: var(--button-border-radius);
93-
--button-border-radius-right: var(--button-border-radius);
94-
--button-font-size: var(--font-size-normal);
95-
--button-padding-x: 0.45em;
96-
--button-padding-y: 0.45em;
97-
--button-offset-active: 0.1em;
98-
--button-group-divider-color: var(--light-color);
99-
100-
/* close */
101-
--button-close-size: 16px;
102-
--button-close-padding: 0;
103-
--button-close-color: var(--control-color);
104-
--button-close-color-hover: var(--control-color-hover);
105-
--button-close-color-active: var(--control-color-active);
106-
--button-close-color-disabled: var(--control-color-disabled);
107-
10875
/* badge */
10976
--badge-padding-x: 0.35em;
11077
--badge-padding-y: 0.35em;

‎src/document.css

+13-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ h6 {
4646
font-size: var(--h6-font-size);
4747
}
4848

49-
/* HR */
49+
/* Horizontal Ruler */
5050
hr {
5151
margin: var(--spacer-1) 0;
5252
height: 1px;
@@ -83,3 +83,15 @@ div.container {
8383
margin: var(--spacer-6) !important;
8484
}
8585

86+
/* text transformation */
87+
.text-transform-uppercase {
88+
text-transform: uppercase;
89+
}
90+
91+
.text-transform-lowercase {
92+
text-transform: lowercase;
93+
}
94+
95+
.text-transform-capitalize {
96+
text-transform: capitalize;
97+
}

‎src/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ <h4>Card</h4>
104104
<wc-card>
105105
<wc-control-button-group name="controls">
106106
<wc-button type="control">Close</wc-button>
107-
<wc-button type="control">Help</wc-button>
107+
<wc-button type="control" disabled>Help</wc-button>
108108
</wc-control-button-group>
109109
<h1>Header</h1>
110110
<h2>Subtitle</h2>
@@ -115,12 +115,21 @@ <h2>Subtitle</h2>
115115
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
116116
</wc-card>
117117
<wc-card backgroundColor="success" width="12">
118+
<wc-control-button-group name="controls">
119+
<wc-button type="control">Close</wc-button>
120+
</wc-control-button-group>
118121
<wc-icon name="check-circle-fill"></wc-icon> The operation was successful
119122
</wc-card>
120123
<wc-card backgroundColor="warning" width="6">
124+
<wc-control-button-group name="controls">
125+
<wc-button type="control">Close</wc-button>
126+
</wc-control-button-group>
121127
<wc-icon name="exclamation-circle-fill"></wc-icon> Warning: Something happened
122128
</wc-card>
123129
<wc-card backgroundColor="error" width="6">
130+
<wc-control-button-group name="controls">
131+
<wc-button type="control">Close</wc-button>
132+
</wc-control-button-group>
124133
<wc-icon name="x-circle-fill"></wc-icon> Error: An internal error occurred
125134
</wc-card>
126135
</wc-card-group>

0 commit comments

Comments
 (0)