Skip to content

Commit cae25de

Browse files
vursenvursen
authored
feat: add button part for dashboard widget and section (#11333)
1 parent 7239aac commit cae25de

File tree

9 files changed

+37
-43
lines changed

9 files changed

+37
-43
lines changed

‎packages/aura/src/components/dashboard.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -112,17 +112,7 @@ vaadin-dashboard-section {
112112
}
113113

114114
@media (any-hover: hover) {
115-
:is(vaadin-dashboard-widget, vaadin-dashboard-section) {
116-
&::part(move-button):hover,
117-
&::part(remove-button):hover,
118-
&::part(resize-button):hover,
119-
&::part(move-forward-button):hover,
120-
&::part(move-backward-button):hover,
121-
&::part(resize-shrink-height-button):hover,
122-
&::part(resize-grow-height-button):hover,
123-
&::part(resize-shrink-width-button):hover,
124-
&::part(resize-grow-width-button):hover {
125-
color: var(--vaadin-text-color);
126-
}
115+
:is(vaadin-dashboard-widget, vaadin-dashboard-section)::part(button):hover {
116+
color: var(--vaadin-text-color);
127117
}
128118
}

‎packages/dashboard/src/vaadin-dashboard-item-mixin.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const DashboardItemMixin = (superClass) =>
9797
id="drag-handle"
9898
draggable="true"
9999
class="drag-handle"
100-
part="move-button"
100+
part="button move-button"
101101
theme="icon tertiary"
102102
aria-label="${this.__i18n.move}"
103103
title="${this.__i18n.move}"
@@ -114,7 +114,7 @@ export const DashboardItemMixin = (superClass) =>
114114
aria-label="${this.__i18n.remove}"
115115
title="${this.__i18n.remove}"
116116
id="remove-button"
117-
part="remove-button"
117+
part="button remove-button"
118118
theme="icon tertiary"
119119
tabindex="${this.__selected ? 0 : -1}"
120120
@click="${() => fireRemove(this)}"
@@ -156,7 +156,7 @@ export const DashboardItemMixin = (superClass) =>
156156
aria-label="${this.__i18n.resize}"
157157
title="${this.__i18n.resize}"
158158
id="resize-handle"
159-
part="resize-button"
159+
part="button resize-button"
160160
class="resize-handle"
161161
theme="icon tertiary"
162162
tabindex="${this.__selected ? 0 : -1}"
@@ -180,7 +180,7 @@ export const DashboardItemMixin = (superClass) =>
180180
title="${this.__i18n.moveBackward}"
181181
@click="${() => fireMove(this, -1)}"
182182
id="move-backward"
183-
part="move-backward-button"
183+
part="button move-backward-button"
184184
>
185185
<div class="icon"></div>
186186
</vaadin-dashboard-button>
@@ -190,7 +190,7 @@ export const DashboardItemMixin = (superClass) =>
190190
title="${this.__i18n.moveApply}"
191191
@click="${() => this.__exitMode(true)}"
192192
id="move-apply"
193-
part="move-apply-button"
193+
part="button move-apply-button"
194194
>
195195
<div class="icon"></div>
196196
</vaadin-dashboard-button>
@@ -200,7 +200,7 @@ export const DashboardItemMixin = (superClass) =>
200200
title="${this.__i18n.moveForward}"
201201
@click="${() => fireMove(this, 1)}"
202202
id="move-forward"
203-
part="move-forward-button"
203+
part="button move-forward-button"
204204
>
205205
<div class="icon"></div>
206206
</vaadin-dashboard-button>
@@ -233,7 +233,7 @@ export const DashboardItemMixin = (superClass) =>
233233
title="${this.__i18n.resizeApply}"
234234
@click="${() => this.__exitMode(true)}"
235235
id="resize-apply"
236-
part="resize-apply-button"
236+
part="button resize-apply-button"
237237
>
238238
<div class="icon"></div>
239239
</vaadin-dashboard-button>
@@ -244,7 +244,7 @@ export const DashboardItemMixin = (superClass) =>
244244
@click="${() => fireResize(this, -1, 0)}"
245245
.hidden="${!canShrinkWidth}"
246246
id="resize-shrink-width"
247-
part="resize-shrink-width-button"
247+
part="button resize-shrink-width-button"
248248
>
249249
<div class="icon"></div>
250250
</vaadin-dashboard-button>
@@ -255,7 +255,7 @@ export const DashboardItemMixin = (superClass) =>
255255
@click="${() => fireResize(this, 1, 0)}"
256256
.hidden="${!canGrowWidth}"
257257
id="resize-grow-width"
258-
part="resize-grow-width-button"
258+
part="button resize-grow-width-button"
259259
>
260260
<div class="icon"></div>
261261
</vaadin-dashboard-button>
@@ -265,7 +265,7 @@ export const DashboardItemMixin = (superClass) =>
265265
title="${this.__i18n.resizeShrinkHeight}"
266266
@click="${() => fireResize(this, 0, -1)}"
267267
id="resize-shrink-height"
268-
part="resize-shrink-height-button"
268+
part="button resize-shrink-height-button"
269269
.hidden="${!hasMinRowHeight || !canShrinkHeight}"
270270
>
271271
<div class="icon"></div>
@@ -276,7 +276,7 @@ export const DashboardItemMixin = (superClass) =>
276276
title="${this.__i18n.resizeGrowHeight}"
277277
@click="${() => fireResize(this, 0, 1)}"
278278
id="resize-grow-height"
279-
part="resize-grow-height-button"
279+
part="button resize-grow-height-button"
280280
.hidden="${!hasMinRowHeight}"
281281
>
282282
<div class="icon"></div>

‎packages/dashboard/src/vaadin-dashboard-section.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
3939
* -----------------------|-------------
4040
* `header` | The header of the section
4141
* `title` | The title of the section
42+
* `button` | Set on all the buttons (move, remove and others)
4243
* `move-button` | The move button
4344
* `remove-button` | The remove button
4445
* `move-backward-button` | The move backward button when in move mode

‎packages/dashboard/src/vaadin-dashboard-section.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
4545
* -----------------------|-------------
4646
* `header` | The header of the section
4747
* `title` | The title of the section
48+
* `button` | Set on all the buttons (move, remove and others)
4849
* `move-button` | The move button
4950
* `remove-button` | The remove button
5051
* `move-backward-button` | The move backward button when in move mode

‎packages/dashboard/src/vaadin-dashboard-widget.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
4848
* `header` | The header of the widget
4949
* `title` | The title of the widget
5050
* `content` | The content of the widget
51+
* `button` | Set on all the buttons (move, resize and others)
5152
* `move-button` | The move button
5253
* `remove-button` | The remove button
5354
* `resize-button` | The resize button

‎packages/dashboard/src/vaadin-dashboard-widget.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
5656
* `header` | The header of the widget
5757
* `title` | The title of the widget
5858
* `content` | The content of the widget
59+
* `button` | Set on all the buttons (move, resize and others)
5960
* `move-button` | The move button
6061
* `remove-button` | The remove button
6162
* `resize-button` | The resize button

‎packages/dashboard/test/dom/__snapshots__/dashboard-section.test.snap.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ snapshots["vaadin-dashboard-section shadow"] =
1616
<vaadin-dashboard-button
1717
aria-label="Move Backward"
1818
id="move-backward"
19-
part="move-backward-button"
19+
part="button move-backward-button"
2020
role="button"
2121
tabindex="0"
2222
theme="primary icon"
@@ -28,7 +28,7 @@ snapshots["vaadin-dashboard-section shadow"] =
2828
<vaadin-dashboard-button
2929
aria-label="Apply"
3030
id="move-apply"
31-
part="move-apply-button"
31+
part="button move-apply-button"
3232
role="button"
3333
tabindex="0"
3434
theme="primary icon large"
@@ -40,7 +40,7 @@ snapshots["vaadin-dashboard-section shadow"] =
4040
<vaadin-dashboard-button
4141
aria-label="Move Forward"
4242
id="move-forward"
43-
part="move-forward-button"
43+
part="button move-forward-button"
4444
role="button"
4545
tabindex="0"
4646
theme="primary icon"
@@ -70,7 +70,7 @@ snapshots["vaadin-dashboard-section shadow"] =
7070
class="drag-handle"
7171
draggable="true"
7272
id="drag-handle"
73-
part="move-button"
73+
part="button move-button"
7474
role="button"
7575
tabindex="-1"
7676
theme="icon tertiary"
@@ -90,7 +90,7 @@ snapshots["vaadin-dashboard-section shadow"] =
9090
<vaadin-dashboard-button
9191
aria-label="Remove"
9292
id="remove-button"
93-
part="remove-button"
93+
part="button remove-button"
9494
role="button"
9595
tabindex="-1"
9696
theme="icon tertiary"

‎packages/dashboard/test/dom/__snapshots__/dashboard-widget.test.snap.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
1616
<vaadin-dashboard-button
1717
aria-label="Move Backward"
1818
id="move-backward"
19-
part="move-backward-button"
19+
part="button move-backward-button"
2020
role="button"
2121
tabindex="0"
2222
theme="primary icon"
@@ -28,7 +28,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
2828
<vaadin-dashboard-button
2929
aria-label="Apply"
3030
id="move-apply"
31-
part="move-apply-button"
31+
part="button move-apply-button"
3232
role="button"
3333
tabindex="0"
3434
theme="primary icon large"
@@ -40,7 +40,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
4040
<vaadin-dashboard-button
4141
aria-label="Move Forward"
4242
id="move-forward"
43-
part="move-forward-button"
43+
part="button move-forward-button"
4444
role="button"
4545
tabindex="0"
4646
theme="primary icon"
@@ -58,7 +58,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
5858
<vaadin-dashboard-button
5959
aria-label="Apply"
6060
id="resize-apply"
61-
part="resize-apply-button"
61+
part="button resize-apply-button"
6262
role="button"
6363
tabindex="0"
6464
theme="primary icon large"
@@ -71,7 +71,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
7171
aria-label="Shrink width"
7272
hidden=""
7373
id="resize-shrink-width"
74-
part="resize-shrink-width-button"
74+
part="button resize-shrink-width-button"
7575
role="button"
7676
tabindex="0"
7777
theme="primary icon"
@@ -84,7 +84,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
8484
aria-label="Grow width"
8585
hidden=""
8686
id="resize-grow-width"
87-
part="resize-grow-width-button"
87+
part="button resize-grow-width-button"
8888
role="button"
8989
tabindex="0"
9090
theme="primary icon"
@@ -97,7 +97,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
9797
aria-label="Shrink height"
9898
hidden=""
9999
id="resize-shrink-height"
100-
part="resize-shrink-height-button"
100+
part="button resize-shrink-height-button"
101101
role="button"
102102
tabindex="0"
103103
theme="primary icon"
@@ -109,7 +109,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
109109
<vaadin-dashboard-button
110110
aria-label="Grow height"
111111
id="resize-grow-height"
112-
part="resize-grow-height-button"
112+
part="button resize-grow-height-button"
113113
role="button"
114114
tabindex="0"
115115
theme="primary icon"
@@ -139,7 +139,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
139139
class="drag-handle"
140140
draggable="true"
141141
id="drag-handle"
142-
part="move-button"
142+
part="button move-button"
143143
role="button"
144144
tabindex="-1"
145145
theme="icon tertiary"
@@ -161,7 +161,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
161161
<vaadin-dashboard-button
162162
aria-label="Remove"
163163
id="remove-button"
164-
part="remove-button"
164+
part="button remove-button"
165165
role="button"
166166
tabindex="-1"
167167
theme="icon tertiary"
@@ -175,7 +175,7 @@ snapshots["vaadin-dashboard-widget shadow"] =
175175
aria-label="Resize"
176176
class="resize-handle"
177177
id="resize-handle"
178-
part="resize-button"
178+
part="button resize-button"
179179
role="button"
180180
tabindex="-1"
181181
theme="icon tertiary"

‎packages/vaadin-lumo-styles/src/mixins/dashboard-item.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,14 @@
6666
}
6767

6868
/* Common styles for non-mode edit buttons */
69-
[part='move-button'],
70-
[part='resize-button'],
71-
[part='remove-button'] {
69+
[part~='move-button'],
70+
[part~='resize-button'],
71+
[part~='remove-button'] {
7272
color: var(--_icon-color);
7373
padding-inline: 0;
7474
}
7575

76-
:where([part='move-button'], [part='resize-button'], [part='remove-button']):hover {
76+
:where([part~='move-button'], [part~='resize-button'], [part~='remove-button']):hover {
7777
--_icon-color: var(--lumo-primary-text-color);
7878
}
7979

0 commit comments

Comments
 (0)