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

fix checkbox layout shift

Browse Source
This commit is contained in:
konnorrogers
2024-10-22 16:46:17 -04:00
parent 63df4f9631
commit 0636023797
2 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/checkbox/checkbox.styles.ts
View File

@@ -72,6 +72,10 @@ export default css`
width: 100%;
}
.checkbox__icon--invisible {
visibility: hidden;
}
.checkbox__checked-icon,
.checkbox__indeterminate-icon {
display: inline-flex;

21
src/components/checkbox/checkbox.ts
View File

@@ -212,6 +212,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
render() {
const hasHelpTextSlot = isServer ? true : this.hasSlotController.test('help-text');
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const isIndeterminate = !this.checked && this.indeterminate
const iconName = isIndeterminate ? "indeterminate" : "check"
const iconState = isIndeterminate ? "indeterminate" : "check"
const iconVisible = this.checked || this.indeterminate
//
// NOTE: we use a `<div>` around the label slot because of this Chrome bug.
@@ -265,21 +270,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
@focus=${this.handleFocus}
/>
${this.checked
? html`
<wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
`
: html``}
${!this.checked && this.indeterminate
? html`
<wa-icon
part="indeterminate-icon"
class="checkbox__indeterminate-icon"
library="system"
name="indeterminate"
></wa-icon>
`
: html``}
<wa-icon part=${`${iconState}-icon`} class=${`checkbox__${iconState}-icon ${iconVisible ? "" : "checkbox__icon--invisible"}`} library="system" name=${iconName}></wa-icon>
</span>
<div part="label" class="checkbox__label">