Skip to content

Commit 5cc9dde

Browse files
DmitrySharabinDmitrySharabin
authored
[color-swatch] Add support for the label prop, closes #107 (#171)
1 parent f9afe98 commit 5cc9dde

File tree

2 files changed

+86
-2
lines changed

2 files changed

+86
-2
lines changed

‎src/color-swatch/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,64 @@ future_swatch_container.append(swatch);
128128
</script>
129129
```
130130

131+
### The `label` attribute
132+
133+
You can provide the color label via the `label` attribute.
134+
135+
<table>
136+
<thead>
137+
<tr>
138+
<th></th>
139+
<th>Default</th>
140+
<th>Large</th>
141+
</tr>
142+
</thead>
143+
<tbody>
144+
<tr>
145+
<th>Static</th>
146+
<td>
147+
148+
```html
149+
<color-swatch label="Turquoise">oklch(65% 0.15 210)</color-swatch>
150+
```
151+
</td>
152+
<td>
153+
154+
```html
155+
<color-swatch label="Turquoise" size="large">oklch(65% 0.15 210)</color-swatch>
156+
```
157+
</td>
158+
</tr>
159+
<tr>
160+
<th>Editable</th>
161+
<td>
162+
163+
```html
164+
<color-swatch label="Turquoise">
165+
<input value="oklch(65% 0.15 210)" />
166+
</color-swatch>
167+
```
168+
</td>
169+
<td>
170+
171+
```html
172+
<color-swatch label="Turquoise" size="large">
173+
<input value="oklch(65% 0.15 210)" />
174+
</color-swatch>
175+
```
176+
</td>
177+
</tr>
178+
</tbody>
179+
</table>
180+
181+
If the attribute's value matches the element's content, no additional text with the label will be shown.
182+
183+
```html
184+
<color-swatch label="Turquoise" value="oklch(65% 0.15 210)" size="large">Turquoise</color-swatch>
185+
```
186+
187+
If used as a property and is not defined via the `label` attribute, its value is that of the element text content.
188+
131189
### The `info` attribute
132190

133191
You can use the `info` attribute to show information about the color.
@@ -256,6 +314,7 @@ If you don’t, the `<html>` element will be used.
256314
| `color` | `color` | `Color` &#124; `string` | - | The current color value. |
257315
| `info` | `info` | `string` | - | Comma-separated list of coords of the current color to be shown. |
258316
| `value` | `value` | `string` | - | The current value of the swatch. |
317+
| `label` | `label` | `string` | - | The label of the swatch (e.g., color name). Defaults to the element text content. |
259318
| `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
260319
| `property` | `property` | `string` | - | CSS property to bind to. |
261320
| `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
@@ -286,6 +345,7 @@ These properties are read-only.
286345
|------|-------------|
287346
| `swatch` | The swatch used to render the color. |
288347
| `details` | Wrapper around all non-swatch content (color name, info, etc) |
348+
| `label` | The label of the swatch |
289349
| `color-wrapper` | Wrapper around the color name itself |
290350
| `gamut` | Gamut indicator |
291351
| `info` | Any info generateed by the `info` attribute |

‎src/color-swatch/color-swatch.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const Self = class ColorSwatch extends ColorElement {
1616
</slot>
1717
<div id="wrapper" part="details">
1818
<slot name="before"></slot>
19+
<div part="label"></div>
1920
<div part="color">
2021
<slot></slot>
2122
</div>
@@ -27,6 +28,7 @@ const Self = class ColorSwatch extends ColorElement {
2728

2829
this._el = {
2930
wrapper: this.shadowRoot.querySelector("#wrapper"),
31+
label: this.shadowRoot.querySelector("[part=label]"),
3032
colorWrapper: this.shadowRoot.querySelector("[part=color]"),
3133
};
3234

@@ -61,6 +63,11 @@ const Self = class ColorSwatch extends ColorElement {
6163
return this._el.gamutIndicator.gamut;
6264
}
6365

66+
get textContent () {
67+
// Children that are not assigned to another slot
68+
return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
69+
}
70+
6471
propChangedCallback ({name, prop, detail: change}) {
6572
let input = this._el.input;
6673

@@ -101,6 +108,15 @@ const Self = class ColorSwatch extends ColorElement {
101108
}
102109
}
103110

111+
if (name === "label") {
112+
if (this.label.length && this.label !== this.textContent) {
113+
this._el.label.textContent = this.label;
114+
}
115+
else {
116+
this._el.label.textContent = "";
117+
}
118+
}
119+
104120
if (name === "color") {
105121
let isValid = this.color !== null || !this.value;
106122

@@ -155,13 +171,21 @@ const Self = class ColorSwatch extends ColorElement {
155171
return this._el.input.value;
156172
}
157173

158-
// Children that are not assigned to another slot
159-
return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
174+
return this.textContent;
160175
},
161176
reflect: {
162177
from: true,
163178
},
164179
},
180+
label: {
181+
type: String,
182+
default () {
183+
return this.textContent;
184+
},
185+
convert (value) {
186+
return value.trim();
187+
},
188+
},
165189
color: {
166190
get type () {
167191
return ColorSwatch.Color;

0 commit comments

Comments
 (0)