kopia lustrzana https://github.com/shoelace-style/shoelace
make swatches an attribute
Cory LaViska
rodzic
ee0254e822
commit
121464fa2d
|
|
@ -70,6 +70,34 @@ const App = () => (
|
|||
);
|
||||
```
|
||||
|
||||
### Swatches
|
||||
|
||||
Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker
|
||||
label="Select a color"
|
||||
swatches="
|
||||
#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
|
||||
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
|
||||
"
|
||||
></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlColorPicker
|
||||
label="Select a color"
|
||||
swatches="
|
||||
#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
|
||||
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
|
||||
"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change the color picker's trigger size.
|
||||
|
|
|
|||
|
|
@ -20,8 +20,10 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
|
|||
- Many parts have been removed or renamed (please see the docs for more details)
|
||||
- 🚨 BREAKING: removed the `sl-label-change` event from `<sl-menu-item>` (listen for `slotchange` instead)
|
||||
- 🚨 BREAKING: removed type to select logic from `<sl-menu>` (this was added specifically for `<sl-select>` which no longer uses `<sl-menu>`)
|
||||
- 🚨 BREAKING: swatches in `<sl-color-picker>` are no longer present by default (but you can set them using the `swatches` attribute now)
|
||||
- Added the `<sl-option>` component
|
||||
- Added Traditional Chinese translation [#1086](https://github.com/shoelace-style/shoelace/pull/1086)
|
||||
- Added support for `swatches` to be an attribute of `<sl-color-picker>` so swatches can be defined declaratively (it was previously a property; use a `;` to separate color values)
|
||||
- Fixed a bug in `<sl-tree-item>` where the checked/indeterminate states could get out of sync when using the `multiple` option [#1076](https://github.com/shoelace-style/shoelace/issues/1076)
|
||||
- Fixed a bug in `<sl-tree>` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096)
|
||||
- Fixed a bug that prevented `<sl-switch>` from submitting a default value of `on` when no value was provided [#1103](https://github.com/shoelace-style/shoelace/discussions/1103)
|
||||
|
|
|
|||
|
|
@ -93,8 +93,33 @@ describe('<sl-color-picker>', () => {
|
|||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit sl-change and sl-input when clicking on a swatch', async () => {
|
||||
it('should render the correct swatches when passing a string of color values', async () => {
|
||||
const el = await fixture<SlColorPicker>(
|
||||
html` <sl-color-picker swatches="red; #008000; rgb(0,0,255);"></sl-color-picker> `
|
||||
);
|
||||
const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')];
|
||||
|
||||
expect(swatches.length).to.equal(3);
|
||||
expect(getComputedStyle(swatches[0]).backgroundColor).to.equal('rgb(255, 0, 0)');
|
||||
expect(getComputedStyle(swatches[1]).backgroundColor).to.equal('rgb(0, 128, 0)');
|
||||
expect(getComputedStyle(swatches[2]).backgroundColor).to.equal('rgb(0, 0, 255)');
|
||||
});
|
||||
|
||||
it('should render the correct swatches when passing an array of color values', async () => {
|
||||
const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
|
||||
el.swatches = ['red', '#008000', 'rgb(0,0,255)'];
|
||||
await el.updateComplete;
|
||||
|
||||
const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')];
|
||||
|
||||
expect(swatches.length).to.equal(3);
|
||||
expect(getComputedStyle(swatches[0]).backgroundColor).to.equal('rgb(255, 0, 0)');
|
||||
expect(getComputedStyle(swatches[1]).backgroundColor).to.equal('rgb(0, 128, 0)');
|
||||
expect(getComputedStyle(swatches[2]).backgroundColor).to.equal('rgb(0, 0, 255)');
|
||||
});
|
||||
|
||||
it('should emit sl-change and sl-input when clicking on a swatch', async () => {
|
||||
const el = await fixture<SlColorPicker>(html` <sl-color-picker swatches="red; green; blue;"></sl-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const swatch = el.shadowRoot!.querySelector<HTMLElement>('[part~="swatch"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
|
|
|
|||
|
|
@ -158,27 +158,11 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
@property({ type: Boolean }) uppercase = false;
|
||||
|
||||
/**
|
||||
* An array of predefined color swatches to display. Can include any format the color picker can parse, including
|
||||
* HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.
|
||||
* One or more predefined color swatches to display as presets in the color picker. Can include any format the color
|
||||
* picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
|
||||
* semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
|
||||
*/
|
||||
@property({ attribute: false }) swatches: string[] = [
|
||||
'#d0021b',
|
||||
'#f5a623',
|
||||
'#f8e71c',
|
||||
'#8b572a',
|
||||
'#7ed321',
|
||||
'#417505',
|
||||
'#bd10e0',
|
||||
'#9013fe',
|
||||
'#4a90e2',
|
||||
'#50e3c2',
|
||||
'#b8e986',
|
||||
'#000',
|
||||
'#444',
|
||||
'#888',
|
||||
'#ccc',
|
||||
'#fff'
|
||||
];
|
||||
@property() swatches: string | string[] = '';
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
|
@ -721,6 +705,9 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
render() {
|
||||
const gridHandleX = this.saturation;
|
||||
const gridHandleY = 100 - this.brightness;
|
||||
const swatches = Array.isArray(this.swatches)
|
||||
? this.swatches // allow arrays for legacy purposes
|
||||
: this.swatches.split(';').filter(color => color !== '');
|
||||
|
||||
const colorPicker = html`
|
||||
<div
|
||||
|
|
@ -902,10 +889,18 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
</sl-button-group>
|
||||
</div>
|
||||
|
||||
${this.swatches.length > 0
|
||||
${swatches.length > 0
|
||||
? html`
|
||||
<div part="swatches" class="color-picker__swatches">
|
||||
${this.swatches.map(swatch => {
|
||||
${swatches.map(swatch => {
|
||||
const parsedColor = this.parseColor(swatch);
|
||||
|
||||
// If we can't parse it, skip it
|
||||
if (!parsedColor) {
|
||||
console.error(`Unable to parse swatch color: "${swatch}"`, this);
|
||||
return '';
|
||||
}
|
||||
|
||||
return html`
|
||||
<div
|
||||
part="swatch"
|
||||
|
|
@ -915,9 +910,12 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
aria-label=${swatch}
|
||||
@click=${() => this.selectSwatch(swatch)}
|
||||
@keydown=${(event: KeyboardEvent) =>
|
||||
!this.disabled && event.key === 'Enter' && this.setColor(swatch)}
|
||||
!this.disabled && event.key === 'Enter' && this.setColor(parsedColor.hexa)}
|
||||
>
|
||||
<div class="color-picker__swatch-color" style=${styleMap({ backgroundColor: swatch })}></div>
|
||||
<div
|
||||
class="color-picker__swatch-color"
|
||||
style=${styleMap({ backgroundColor: parsedColor.hexa })}
|
||||
></div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue