+
Skip to content
This repository was archived by the owner on Oct 14, 2025. It is now read-only.

Replace Button's default slot with an attribute #397

Merged
merged 2 commits into from
Sep 24, 2024
Merged

Replace Button's default slot with an attribute #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38b5073
Replace Button's default slot with an attribute
clintcs Sep 23, 2024
6bb888d
Found a straggler
clintcs Sep 23, 2024
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
5 changes: 5 additions & 0 deletions .changeset/tiny-students-visit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@crowdstrike/glide-core': minor
---

Button now has a `label` attribute instead of a default slot to restrict its content to increase design consistency.
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import '@crowdstrike/glide-core/button.js';
### 4. Render your component

```html
<glide-core-button size="small">Button</glide-core-button>
<glide-core-button label="Button" size="small"></glide-core-button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent catch!

```

## Development
Expand Down
10 changes: 6 additions & 4 deletions src/button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const meta: Meta = {
formenctype=${arguments_.formenctype || nothing}
formmethod=${arguments_.formmethod || nothing}
formtarget=${arguments_.formtarget || nothing}
label=${arguments_.label || nothing}
name=${arguments_.name || nothing}
popovertarget=${arguments_.popovertarget || nothing}
popovertargetaction=${arguments_.popovertargetaction || nothing}
Expand All @@ -37,7 +38,7 @@ const meta: Meta = {
`;
},
args: {
'slot="default"': 'Button',
label: 'Button',
autofocus: false,
'click()': '',
disabled: false,
Expand All @@ -59,9 +60,9 @@ const meta: Meta = {
variant: 'primary',
},
argTypes: {
'slot="default"': {
label: {
table: {
type: { summary: 'Element | string' },
type: { summary: 'string' },
},
type: { name: 'string', required: true },
},
Expand Down Expand Up @@ -133,7 +134,7 @@ const meta: Meta = {
},
formmethod: {
control: { type: 'select' },
options: ['', 'dialog', 'get', 'post'],
options: ['', 'get', 'dialog', 'post'],
table: {
defaultValue: {
summary: '"get"',
Expand Down Expand Up @@ -252,6 +253,7 @@ export const WithIcons: StoryObj = {
formenctype=${arguments_.formenctype || nothing}
formmethod=${arguments_.formmethod || nothing}
formtarget=${arguments_.formtarget || nothing}
label=${arguments_.label || nothing}
name=${arguments_.name || nothing}
popovertarget=${arguments_.popovertarget || nothing}
popovertargetaction=${arguments_.popovertargetaction || nothing}
Expand Down
32 changes: 6 additions & 26 deletions src/button.test.basics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
/* eslint-disable @typescript-eslint/no-unused-expressions */

import './button.js';
import { ArgumentError } from 'ow';
import { expect, fixture, html } from '@open-wc/testing';
import GlideCoreButton from './button.js';
import sinon from 'sinon';

GlideCoreButton.shadowRootOptions.mode = 'open';

Expand All @@ -15,16 +13,16 @@ it('registers', async () => {
});

it('is accessible', async () => {
const component = await fixture<GlideCoreButton>(
html`<glide-core-button>Button</glide-core-button>`,
const component = await fixture(
html`<glide-core-button label="Label"></glide-core-button>`,
);

await expect(component).to.be.accessible();
});

it('has defaults', async () => {
const component = await fixture<GlideCoreButton>(html`
<glide-core-button>Button</glide-core-button>
<glide-core-button label="Label"></glide-core-button>
`);

expect(component.ariaControls).to.be.null;
Expand Down Expand Up @@ -67,7 +65,7 @@ it('has defaults', async () => {

it('delegates focus', async () => {
const component = await fixture<GlideCoreButton>(
html`<glide-core-button>Button</glide-core-button>`,
html`<glide-core-button label="Label"></glide-core-button>`,
);

component.focus();
Expand All @@ -77,35 +75,17 @@ it('delegates focus', async () => {
);
});

it('throws if it does not have a default slot', async () => {
const spy = sinon.spy();

try {
await fixture<GlideCoreButton>(
html`<glide-core-button></glide-core-button>`,
);
} catch (error) {
if (error instanceof ArgumentError) {
spy();
}
}

expect(spy.callCount).to.equal(1);
});

it('`#onPrefixSlotChange` coverage', async () => {
await fixture<GlideCoreButton>(html`
<glide-core-button>
<glide-core-button label="Label">
<span slot="prefix-icon">Prefix</span>
Button
</glide-core-button>
`);
});

it('`#onSuffixIconSlotChange` coverage', async () => {
await fixture<GlideCoreButton>(html`
<glide-core-button>
Button
<glide-core-button label="Label">
<span slot="suffix-icon">Suffix</span>
</glide-core-button>
`);
Expand Down
18 changes: 9 additions & 9 deletions src/button.test.events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ GlideCoreButton.shadowRootOptions.mode = 'open';

it('dispatches a "click" event when clicked', async () => {
const component = await fixture<GlideCoreButton>(html`
<glide-core-button type="button">Button</glide-core-button>
<glide-core-button label="Label" type="button"></glide-core-button>
`);

setTimeout(() => {
Expand All @@ -24,7 +24,7 @@ it('dispatches a "click" event when clicked', async () => {

it('dispatches a "click" event on Enter', async () => {
const component = await fixture<GlideCoreButton>(html`
<glide-core-button type="button">Button</glide-core-button>
<glide-core-button label="Label" type="button"></glide-core-button>
`);

component.focus();
Expand All @@ -38,7 +38,7 @@ it('dispatches a "click" event on Enter', async () => {

it('dispatches a "click" event on Space', async () => {
const component = await fixture<GlideCoreButton>(html`
<glide-core-button type="button">Button</glide-core-button>
<glide-core-button label="Label" type="button"></glide-core-button>
`);

component.focus();
Expand All @@ -54,7 +54,7 @@ it('dispatches a "reset" event on click', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="reset">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="reset"></glide-core-button>`,
{
parentNode: form,
},
Expand All @@ -72,7 +72,7 @@ it('dispatches a "reset" event on Enter', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="reset">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="reset"></glide-core-button>`,
{
parentNode: form,
},
Expand All @@ -89,7 +89,7 @@ it('dispatches a "reset" event on Space', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="reset">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="reset"></glide-core-button>`,
{
parentNode: form,
},
Expand All @@ -106,7 +106,7 @@ it('dispatches a "submit" event on click', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="submit">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="submit"></glide-core-button>`,
{
parentNode: form,
},
Expand All @@ -126,7 +126,7 @@ it('dispatches a "submit" event on Enter', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="submit">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="submit"></glide-core-button>`,
{
parentNode: form,
},
Expand All @@ -145,7 +145,7 @@ it('dispatches a "submit" event on Space', async () => {
const form = document.createElement('form');

const component = await fixture<GlideCoreButton>(
html` <glide-core-button type="submit">Button</glide-core-button> `,
html` <glide-core-button label="Label" type="submit"></glide-core-button>`,
{
parentNode: form,
},
Expand Down
18 changes: 3 additions & 15 deletions src/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { classMap } from 'lit/directives/class-map.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { owSlot } from './library/ow.js';
import styles from './button.styles.js';

declare global {
Expand Down Expand Up @@ -74,6 +73,8 @@ export default class GlideCoreButton extends LitElement {
| '_self'
| '_top' = '';

@property({ reflect: true }) label?: string;

@property({ reflect: true }) name = '';

@property({ attribute: 'popovertarget', reflect: true })
Expand All @@ -100,10 +101,6 @@ export default class GlideCoreButton extends LitElement {
this.#buttonElementRef.value?.click();
}

override firstUpdated() {
owSlot(this.#defaultSlotElementRef.value);
}

override render() {
return html`<button
aria-controls=${ifDefined(this.ariaControls ?? undefined)}
Expand All @@ -130,10 +127,7 @@ export default class GlideCoreButton extends LitElement {
${ref(this.#prefixIconSlotElementRef)}
></slot>

<slot
@slotchange=${this.#onDefaultSlotChange}
${ref(this.#defaultSlotElementRef)}
></slot>
${this.label}

<slot
name="suffix-icon"
Expand All @@ -156,8 +150,6 @@ export default class GlideCoreButton extends LitElement {

#buttonElementRef = createRef<HTMLButtonElement>();

#defaultSlotElementRef = createRef<HTMLSlotElement>();

#internals: ElementInternals;

#prefixIconSlotElementRef = createRef<HTMLSlotElement>();
Expand All @@ -176,10 +168,6 @@ export default class GlideCoreButton extends LitElement {
}
}

#onDefaultSlotChange() {
owSlot(this.#defaultSlotElementRef.value);
}

#onPrefixIconSlotChange() {
const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
Expand Down
点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载