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

fixing issues

Browse Source
This commit is contained in:
konnorrogers
2024-06-18 15:09:38 -04:00
parent 8c6f86abe0
commit efda5a32f9
5 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,10 +5,7 @@ layout: component
---
```html {.example}
<form>
<wa-color-picker required label="Select a color"></wa-color-picker>
<wa-button type="submit">Submit</wa-button>
</form>
<wa-color-picker label="Select a color"></wa-color-picker>
```
:::info
@@ -77,3 +74,29 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
```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>
```

26
src/components/color-picker/color-picker.styles.ts
View File

@@ -339,8 +339,32 @@ export default css`
outline-offset: var(--wa-focus-ring-offset);
}
.color-dropdown__trigger.color-dropdown__trigger--disabled {
:host(:disabled) :is(.color-dropdown__label, .color-dropdown__trigger) {
opacity: 0.5;
cursor: not-allowed;
}
.color-picker-inline__label,
.color-dropdown__label {
cursor: pointer;
padding-bottom: var(--spacing);
}
:host([label-placement="start"]) .color-dropdown__label,
:host([label-placement="end"]) .color-dropdown__label {
padding-bottom: 0;
}
:host([label-placement="start"]) .color-dropdown__container,
:host([label-placement="end"]) .color-dropdown__container {
display: flex;
align-items: center;
gap: 0.5em;
}
.color-dropdown__container {
margin: 0 1em;
padding-bottom: 0.5em;
}
`;

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

@@ -21,6 +21,7 @@ import { WaInputEvent } from '../../events/input.js';
import { WaInvalidEvent } from '../../events/invalid.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import { when } from 'lit/directives/when.js';
import componentStyles from '../../styles/component.styles.js';
import styles from './color-picker.styles.js';
import type { CSSResultGroup } from 'lit';
@@ -161,6 +162,11 @@ 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.
@@ -821,6 +827,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
: this.swatches.split(';').filter(color => color.trim() !== '');
const colorPicker = html`
${this.inline
? html`
<div id="inline-label" part="inline-label" class="color-picker-inline__label">
<slot name="label">${this.label}</slot>
</div>
`
: null}
<div
part="base"
class=${classMap({
@@ -830,17 +844,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
'color-picker--focused': this.hasFocus
})}
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-labelledby="label"
aria-labelledby="inline-label"
tabindex=${this.inline ? '0' : '-1'}
>
${this.inline
? html`
<wa-visually-hidden id="label">
<slot name="label">${this.label}</slot>
</wa-visually-hidden>
`
: null}
<div
part="grid"
class="color-picker__grid"
@@ -1054,6 +1060,17 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
return colorPicker;
}
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
@@ -1065,28 +1082,34 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@wa-after-show=${this.handleAfterShow}
@wa-after-hide=${this.handleAfterHide}
>
<button
part="trigger"
slot="trigger"
class=${classMap({
'color-dropdown__trigger': true,
'color-dropdown__trigger--disabled': this.disabled,
'color-dropdown__trigger--small': this.size === 'small',
'color-dropdown__trigger--medium': this.size === 'medium',
'color-dropdown__trigger--large': this.size === 'large',
'color-dropdown__trigger--empty': this.isEmpty,
'color-dropdown__trigger--focused': this.hasFocus,
'color-picker__transparent-bg': true
})}
style=${styleMap({
color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
})}
type="button"
>
<wa-visually-hidden>
<slot name="label">${this.label}</slot>
</wa-visually-hidden>
</button>
<div class="color-dropdown__container" part="trigger-container" slot="trigger">
${when(this.labelPlacement === "top" || this.labelPlacement === "start",
() => buttonLabel
)}
<button
id="trigger"
part="trigger"
class=${classMap({
'color-dropdown__trigger': true,
'color-dropdown__trigger--disabled': this.disabled,
'color-dropdown__trigger--small': this.size === 'small',
'color-dropdown__trigger--medium': this.size === 'medium',
'color-dropdown__trigger--large': this.size === 'large',
'color-dropdown__trigger--empty': this.isEmpty,
'color-dropdown__trigger--focused': this.hasFocus,
'color-picker__transparent-bg': true
})}
style=${styleMap({
color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
})}
type="button"
aria-labelledby="trigger-label"
>
</button>
${when(this.labelPlacement === "end",
() => buttonLabel
)}
</div>
${colorPicker}
</wa-dropdown>
`;

4
src/components/dropdown/dropdown.ts
View File

@@ -295,9 +295,9 @@ export default class WaDropdown extends WebAwesomeElement {
// Either the tag hasn't registered, or it hasn't rendered.
// So, wait for the tag to register, and then try again.
if (target === undefined) {
if (target === undefined || target === null) {
customElements.whenDefined(tagName).then(async () => {
await (target as WaButton | WaIconButton).updateComplete;
await (accessibleTrigger as WaButton | WaIconButton).updateComplete
this.updateAccessibleTrigger();
});

16
src/components/input/input.ts
View File

@@ -260,15 +260,21 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
return;
}
const button = [...form.elements].find((el: HTMLButtonElement) => el.type === 'submit' && !el.disabled) as
const formElements = [...form.elements]
// If this is the only element in the form, submit the form.
if (formElements.length === 1) {
form.requestSubmit(null);
return;
}
const button = formElements.find((el: HTMLButtonElement) => el.type === 'submit' && !el.matches(":disabled")) as
| undefined
| HTMLButtonElement
| WaButton;
if (!button) {
form.requestSubmit(null);
return;
}
// If there's no submit buttons, don't submit the form.
if (!button) { return }
if (button.tagName.toLowerCase() === 'button') {
form.requestSubmit(button);