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

Merge pull request #184 from shoelace-style/konnorrogers/fix-checkbox-layout-shift

Browse Source 
fix checkbox layout shift
This commit is contained in:
Cory LaViska
2024-10-28 11:56:09 -04:00
committed by GitHub
parent 0e5350b9bb ce21410233
commit 961c63570a
2 changed files with 15 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;

26
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,12 @@ 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">