Skip to content

[color-swatch] Add support for the label prop, closes #107 #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DmitrySharabin merged 1 commit into from
Nov 27, 2024
Merged

[color-swatch] Add support for the label prop, closes #107 #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions src/color-swatch/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,64 @@ future_swatch_container.append(swatch);
</script>
```

### The `label` attribute

You can provide the color label via the `label` attribute.

<table>
<thead>
<tr>
<th></th>
<th>Default</th>
<th>Large</th>
</tr>
</thead>
<tbody>
<tr>
<th>Static</th>
<td>

```html
<color-swatch label="Turquoise">oklch(65% 0.15 210)</color-swatch>
```
</td>
<td>

```html
<color-swatch label="Turquoise" size="large">oklch(65% 0.15 210)</color-swatch>
```
</td>
</tr>
<tr>
<th>Editable</th>
<td>

```html
<color-swatch label="Turquoise">
<input value="oklch(65% 0.15 210)" />
</color-swatch>
```
</td>
<td>

```html
<color-swatch label="Turquoise" size="large">
<input value="oklch(65% 0.15 210)" />
</color-swatch>
```
</td>
</tr>
</tbody>
</table>

If the attribute's value matches the element's content, no additional text with the label will be shown.

```html
<color-swatch label="Turquoise" value="oklch(65% 0.15 210)" size="large">Turquoise</color-swatch>
```

If used as a property and is not defined via the `label` attribute, its value is that of the element text content.

### The `info` attribute

You can use the `info` attribute to show information about the color.
Expand Down Expand Up @@ -256,6 +314,7 @@ If you don’t, the `<html>` element will be used.
| `color` | `color` | `Color` &#124; `string` | - | The current color value. |
| `info` | `info` | `string` | - | Comma-separated list of coords of the current color to be shown. |
| `value` | `value` | `string` | - | The current value of the swatch. |
| `label` | `label` | `string` | - | The label of the swatch (e.g., color name). Defaults to the element text content. |
| `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
| `property` | `property` | `string` | - | CSS property to bind to. |
| `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
Expand Down Expand Up @@ -286,6 +345,7 @@ These properties are read-only.
|------|-------------|
| `swatch` | The swatch used to render the color. |
| `details` | Wrapper around all non-swatch content (color name, info, etc) |
| `label` | The label of the swatch |
| `color-wrapper` | Wrapper around the color name itself |
| `gamut` | Gamut indicator |
| `info` | Any info generateed by the `info` attribute |
Expand Down
28 changes: 26 additions & 2 deletions src/color-swatch/color-swatch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const Self = class ColorSwatch extends ColorElement {
</slot>
<div id="wrapper" part="details">
<slot name="before"></slot>
<div part="label"></div>
<div part="color">
<slot></slot>
</div>
Expand All @@ -27,6 +28,7 @@ const Self = class ColorSwatch extends ColorElement {

this._el = {
wrapper: this.shadowRoot.querySelector("#wrapper"),
label: this.shadowRoot.querySelector("[part=label]"),
colorWrapper: this.shadowRoot.querySelector("[part=color]"),
};

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

get textContent () {
// Children that are not assigned to another slot
return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
}

propChangedCallback ({name, prop, detail: change}) {
let input = this._el.input;

Expand Down Expand Up @@ -101,6 +108,15 @@ const Self = class ColorSwatch extends ColorElement {
}
}

if (name === "label") {
if (this.label.length && this.label !== this.textContent) {
this._el.label.textContent = this.label;
}
else {
this._el.label.textContent = "";
}
}

if (name === "color") {
let isValid = this.color !== null || !this.value;

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

// Children that are not assigned to another slot
return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
return this.textContent;
},
reflect: {
from: true,
},
},
label: {
type: String,
default () {
return this.textContent;
},
convert (value) {
return value.trim();
},
},
color: {
get type () {
return ColorSwatch.Color;
Expand Down