Skip to content

Commit 4045dc7

Browse files
CITguyCITguy
authored
Merge pull request #232 from rackerlabs/surf-1126-prefix-shadowdom
fix(styles): update shadowdom prefix styles with hx
2 parents 5e3de13 + d54f160 commit 4045dc7

36 files changed

+1024
-1000
lines changed

‎src/helix-ui/elements/HXAccordionPanelElement.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<button type="button" id="toggle" aria-controls="body" aria-expanded="false">
1+
<button type="button" id="hxToggle" aria-controls="body" aria-expanded="false">
22
<div class="header">
33
<span class="header__content">
44
<slot name="header"></slot>
55
</span>
66
<hx-icon class="header__icon" type="angle-down"></hx-icon>
77
</div>
88
</button>
9-
<div id="body" aria-expanded="false">
9+
<div id="hxBody" aria-expanded="false">
1010
<slot></slot>
1111
</div>

‎src/helix-ui/elements/HXAccordionPanelElement.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,12 @@ export class HXAccordionPanelElement extends HXElement {
8686

8787
/** @private */
8888
get _btnToggle () {
89-
return this.shadowRoot.getElementById('toggle');
89+
return this.shadowRoot.getElementById('hxToggle');
9090
}
9191

9292
/** @private */
9393
get _elBody () {
94-
return this.shadowRoot.getElementById('body');
94+
return this.shadowRoot.getElementById('hxBody');
9595
}
9696

9797
/** @private */

‎src/helix-ui/elements/HXAccordionPanelElement.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "./HXElement";
22
@import "elements/hx-icon";
33

4-
#toggle {
4+
#hxToggle {
55
background-color: transparent;
66
border: 0;
77
cursor: pointer;
@@ -31,7 +31,7 @@
3131
}
3232
}
3333

34-
#body {
34+
#hxBody {
3535
display: none;
3636

3737
&[aria-expanded="true"] {

‎src/helix-ui/elements/HXAlertElement.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<div id="wrapper">
2-
<hx-icon id="icon" type="info-circle"></hx-icon>
3-
<span id="content">
4-
<span id="status"></span>
1+
<div id="hxAlert">
2+
<hx-icon id="hxIcon" type="info-circle"></hx-icon>
3+
<span id="hxContent">
4+
<span id="hxStatus"></span>
55
<slot></slot>
66
</span>
7-
<button id="cta" type="button"></button>
8-
<button id="dismiss" type="button">
7+
<button id="hxCta" type="button"></button>
8+
<button id="hxDismiss" type="button">
99
<hx-icon type="times"></hx-icon>
1010
</button>
1111
</div>

‎src/helix-ui/elements/HXAlertElement.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,21 +190,21 @@ export class HXAlertElement extends HXElement {
190190

191191
/** @private */
192192
get _elIcon () {
193-
return this.shadowRoot.getElementById('icon');
193+
return this.shadowRoot.getElementById('hxIcon');
194194
}
195195

196196
/** @private */
197197
get _elStatus () {
198-
return this.shadowRoot.getElementById('status');
198+
return this.shadowRoot.getElementById('hxStatus');
199199
}
200200

201201
/** @private */
202202
get _btnCta () {
203-
return this.shadowRoot.getElementById('cta');
203+
return this.shadowRoot.getElementById('hxCta');
204204
}
205205

206206
/** @private */
207207
get _btnDismiss () {
208-
return this.shadowRoot.getElementById('dismiss');
208+
return this.shadowRoot.getElementById('hxDismiss');
209209
}
210210
}

‎src/helix-ui/elements/HXAlertElement.less‎

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
@import "./HXElement";
22
@import "elements/hx-icon";
33

4-
button {
5-
align-self: flex-start;
6-
background-color: transparent;
7-
border: 0;
8-
cursor: pointer;
9-
}
104

11-
#wrapper {
5+
#hxAlert {
126
display: flex;
13-
}
14-
15-
#icon {
16-
flex-shrink: 0;
17-
margin: 1rem;
18-
}
197

20-
#content {
21-
flex-grow: 1;
22-
margin-right: 1rem;
23-
padding: 1rem 0;
24-
}
8+
button {
9+
align-self: flex-start;
10+
background-color: transparent;
11+
border: 0;
12+
cursor: pointer;
13+
}
2514

26-
#status {
27-
font-weight: 500;
28-
text-transform: uppercase;
15+
#hxIcon {
16+
flex-shrink: 0;
17+
margin: 1rem;
18+
}
2919

30-
&:after {
31-
content: ":";
20+
#hxContent {
21+
flex-grow: 1;
22+
margin-right: 1rem;
23+
padding: 1rem 0;
3224
}
3325

34-
&:empty {
35-
display: none;
26+
#hxStatus {
27+
font-weight: 500;
28+
text-transform: uppercase;
29+
30+
&:after {
31+
content: ":";
32+
}
33+
34+
&:empty {
35+
display: none;
36+
}
3637
}
37-
}
3838

39-
#cta {
40-
flex-shrink: 0;
41-
font-weight: 500;
42-
padding: 1rem 0;
43-
text-transform: uppercase;
44-
white-space: nowrap;
39+
#hxCta {
40+
flex-shrink: 0;
41+
font-weight: 500;
42+
padding: 1rem 0;
43+
text-transform: uppercase;
44+
white-space: nowrap;
4545

46-
&:empty {
47-
display: none;
46+
&:empty {
47+
display: none;
48+
}
4849
}
49-
}
5050

51-
#dismiss {
52-
flex-shrink: 0;
53-
height: 3rem;
54-
padding: 1rem;
55-
width: 3rem;
51+
#hxDismiss {
52+
flex-shrink: 0;
53+
height: 3rem;
54+
padding: 1rem;
55+
width: 3rem;
56+
}
5657
}
5758

5859
:host([static]) {
59-
#dismiss {
60-
display: none;
61-
}
60+
#hxAlert {
61+
#hxDismiss {
62+
display: none;
63+
}
6264

63-
#cta {
64-
margin-right: 1rem;
65+
#hxCta {
66+
margin-right: 1rem;
67+
}
6568
}
6669
}

‎src/helix-ui/elements/HXCheckboxElement.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<label id="container">
2-
<input type="checkbox" id="nativeControl"/>
3-
<div id="customControl">
4-
<hx-icon type="checkmark" id="tick"></hx-icon>
5-
<hx-icon type="minus" id="minus"></hx-icon>
1+
<label id="hxCheckbox">
2+
<input type="checkbox" id="hxNativeControl"/>
3+
<div id="hxCustomControl">
4+
<hx-icon type="checkmark" id="hxTick"></hx-icon>
5+
<hx-icon type="minus" id="hxMinus"></hx-icon>
66
</div>
77
</label>

‎src/helix-ui/elements/HXCheckboxElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,6 @@ export class HXCheckboxElement extends HXElement {
115115

116116
/** @private */
117117
get _input () {
118-
return this.shadowRoot.getElementById('nativeControl');
118+
return this.shadowRoot.getElementById('hxNativeControl');
119119
}
120120
}

‎src/helix-ui/elements/HXCheckboxElement.less‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@import "./HXElement";
22
@import "elements/hx-icon";
33

4-
#container {
4+
#hxCheckbox {
55
display: flex;
66
height: 100%;
77
position: relative;
88
width: 100%;
99
}
1010

11-
#customControl {
11+
#hxCustomControl {
1212
align-content: center;
1313
align-items: center;
1414
background-color: @gray-0;
@@ -30,26 +30,26 @@
3030
background-color: @cyan-50;
3131
color: @cyan-500;
3232
}
33-
}
3433

35-
/* icons */
36-
#minus,
37-
#tick {
38-
display: none;
39-
height: 1em;
40-
line-height: 1;
41-
width: 1em;
34+
/* icons */
35+
#hxMinus,
36+
#hxTick {
37+
display: none;
38+
height: 1em;
39+
line-height: 1;
40+
width: 1em;
41+
}
4242
}
4343

44-
#nativeControl:checked:not(:indeterminate) ~ #customControl #tick {
44+
#hxNativeControl:checked:not(:indeterminate) ~ #hxCustomControl #hxTick {
4545
display: block;
4646
}
4747

48-
#nativeControl:indeterminate ~ #customControl #minus {
48+
#hxNativeControl:indeterminate ~ #hxCustomControl #hxMinus {
4949
display: block;
5050
}
5151

52-
#nativeControl {
52+
#hxNativeControl {
5353
/* opacity 0 because Firefox and OS focus styles */
5454
opacity: 0;
5555
z-index: 0;
@@ -58,15 +58,15 @@
5858
border: none;
5959
outline: none;
6060

61-
~ #customControl {
61+
~ #hxCustomControl {
6262
border-color: @cyan-700;
6363
box-shadow: @focus-glow;
6464
}
6565
}
6666

6767
/* default checked and indeterminate (checked or unchecked) */
6868
&:checked, &:indeterminate {
69-
~ #customControl {
69+
~ #hxCustomControl {
7070
color: @cyan-900;
7171

7272
&:hover {
@@ -77,7 +77,7 @@
7777
}
7878

7979
/* disabled unchecked */
80-
&:disabled ~ #customControl {
80+
&:disabled ~ #hxCustomControl {
8181
background-color: @gray-100;
8282
color: @gray-500;
8383
cursor: not-allowed;
@@ -91,7 +91,7 @@
9191

9292
/* invalid */
9393
:host([invalid]){
94-
#customControl {
94+
#hxCustomControl {
9595
border-width: 2px;
9696
color: @red-900;
9797

@@ -100,15 +100,15 @@
100100
}
101101
}
102102

103-
#nativeControl:focus ~ #customControl {
103+
#hxNativeControl:focus ~ #hxCustomControl {
104104
border-color: @red-900;
105105
box-shadow: @focus-glow-invalid;
106106
}
107107

108108
/* below styles needed to override above, custom control styles */
109109
/* invalid and checked or indeterminate */
110-
#nativeControl:checked, #nativeControl:indeterminate {
111-
~ #customControl {
110+
#hxNativeControl:checked, #hxNativeControl:indeterminate {
111+
~ #hxCustomControl {
112112
color: @red-900;
113113

114114
&:hover {
@@ -118,7 +118,7 @@
118118
}
119119

120120
/* invalid and disabled */
121-
#nativeControl:disabled ~ #customControl {
121+
#hxNativeControl:disabled ~ #hxCustomControl {
122122
border-width: 1px;
123123
color: @gray-500;
124124

‎src/helix-ui/elements/HXErrorElement.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
<hx-icon type="exclamation-circle" id="icon"></hx-icon>
2-
<slot></slot>
1+
<div id="hxError">
2+
<hx-icon type="exclamation-circle" id="hxIcon"></hx-icon>
3+
<slot></slot>
4+
</div>

0 commit comments

Comments
 (0)