js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

i didn't attend Oxford, but I do like their commas

Browse Source
This commit is contained in:
Cory LaViska
2022-12-13 12:15:28 -05:00
parent 9178be576b
commit e2b791dee8
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/color-picker.md
View File

@@ -32,7 +32,7 @@ const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
### Opacity
Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA or HSVA based on `format`.
Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.
```html preview
<sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
@@ -46,7 +46,7 @@ const App = () => <SlColorPicker opacity label="Select a color" />;
### Formats
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl` and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.

8
src/components/color-picker/color-picker.ts
View File

@@ -125,7 +125,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
@property() label = '';
/**
* The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA and HSVA respectively. The color
* The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
* picker will accept user input in any format (including CSS color names) and convert it to the desired format.
*/
@property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
@@ -159,7 +159,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
/**
* 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.
* HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.
*/
@property({ attribute: false }) swatches: string[] = [
'#d0021b',
@@ -518,7 +518,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
}
const hslColor = color.toHsl();
// adjust saturation and lightness from 0-1 to 0-100
// Adjust saturation and lightness from 0-1 to 0-100
const hsl = {
h: hslColor.h,
s: hslColor.s * 100,
@@ -532,7 +532,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
const hexa = color.toHex8String();
const hsvColor = color.toHsv();
// adjust saturation and value from 0-1 to 0-100
// Adjust saturation and value from 0-1 to 0-100
const hsv = {
h: hsvColor.h,
s: hsvColor.s * 100,