Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(checkbox): remove gap if no label #616

Merged
merged 3 commits into from
Jun 7, 2023
Merged

fix(checkbox): remove gap if no label #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbe64ae
fix(checkbox): remove gap if no label
Enes5519 Jun 3, 2023
838810b
refactor(checkbox): remove hasLabel state
Jun 5, 2023
fd1d20a
style(checkbox): remove redundant css
Jun 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions src/components/checkbox-group/checkbox/bl-checkbox.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,28 @@ describe('bl-checkbox', () => {
aria-readonly="false"
aria-required="false" />
<div class="check-mark"></div>
<span class="label"><slot></slot></span>
<slot class="label"></slot>
</label>
`
);
});

it('should be rendered with correct label attribute', async () => {
const el = await fixture(html`<bl-checkbox label="test label"></bl-checkbox>`);
it('should be rendered with correct label', async () => {
const labelText = 'test label';
const el = await fixture(html`<bl-checkbox>${labelText}</bl-checkbox>`);

expect(el.shadowRoot?.querySelector('span')).to.exist;
expect(el.getAttribute('label')).to.eq('test label');
expect(el.shadowRoot?.querySelector('slot')).to.exist;
expect(el.textContent).to.eq(labelText);
});

it('should be rendered with correct label attribute when label attribute was changed', async () => {
const el = await fixture(html`<bl-checkbox label="test label"></bl-checkbox>`);

el.setAttribute('label', 'new test label');
it('should be rendered with correct label when label was changed', async () => {
const el = await fixture(html`<bl-checkbox>test label</bl-checkbox>`);
const newLabelText = 'new test label';
el.textContent = newLabelText;

await elementUpdated(el);

expect(el.getAttribute('label')).to.eq('new test label');
expect(el.textContent).to.eq('new test label');
});

it('should be rendered with check icon when checkbox checked', async () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/checkbox-group/checkbox/bl-checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
static get styles(): CSSResultGroup {
return [style];
}
static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };

/**
* Sets the checked state for checkbox
Expand Down Expand Up @@ -147,7 +147,7 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
@blur=${this.blur}
/>
<div class="check-mark">${icon ? html`<bl-icon name="${icon}"></bl-icon>` : null}</div>
<span class="label"><slot></slot></span>
<slot class="label"></slot>
</label>
`;
}
Expand Down