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

remove 'inline' from color picker and support labels

Browse Source
This commit is contained in:
konnorrogers
2024-06-18 16:08:13 -04:00
parent fcf58f9648
commit 12d0622f03
2 changed files with 9 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,36 +67,10 @@ Use the `size` attribute to change the color picker's trigger size.
<wa-color-picker size="large" label="Select a color"></wa-color-picker>
```
### Inline
The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
```html {.example}
<wa-color-picker inline label="Select a color"></wa-color-picker>
```
### Disabled
The color picker can be rendered as disabled.
```html {.example}
<wa-color-picker disabled label="Select a color"></wa-color-picker>
```
### Changing label placement (start)
You can change where to display the label to be either at the "start" or "end" of the color picker. The default is "top". "bottom" is omitted because it will generally interfere with the dropdown for the color picker.
Here is a color picker with a "start" label-placement.
```html {.example}
<wa-color-picker label="Select a color" label-placement="start"></wa-color-picker>
```
### Changing label placement (end)
You can change where to display the label to be either at the "start" or "end" of the color picker. The default is "top". "bottom" is omitted because it will generally interfere with the dropdown for the color picker.
```html {.example}
<wa-color-picker label="Select a color" label-placement="end"></wa-color-picker>
```

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

@@ -162,11 +162,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
*/
@property() label = '';
/**
* Where to place the label in relation to the color picker. The default is "top" (showing above the color picker) but can be configured to show next to the color picker. Note, "bottom" is not supported because it generally interferes with the "popup"
*/
@property({ attribute: "label-placement" }) labelPlacement: "top" | "start" | "end" = "top"
/**
* 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.
@@ -1038,17 +1033,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
</div>
`;
const buttonLabel = html`
<!-- Ideally this should be a <label> but it causes click event to fire twice causing the popup to open then close. -->
<div
id="trigger-label"
part="trigger-label"
class="color-dropdown__label"
>
<slot name="label">${this.label}</slot>
</div>
`
// Render as a dropdown
return html`
<wa-dropdown
@@ -1061,9 +1045,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@wa-after-hide=${this.handleAfterHide}
>
<div class="color-dropdown__container" part="trigger-container" slot="trigger">
${when(this.labelPlacement === "top" || this.labelPlacement === "start",
() => buttonLabel
)}
<!-- Ideally this should be a <label> but it causes click event to fire twice causing the popup to open then close. -->
<div
id="trigger-label"
part="trigger-label"
class="color-dropdown__label"
>
<slot name="label">${this.label}</slot>
</div>
<button
id="trigger"
part="trigger"