mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Update `text` button styling to strip all padding so that it aligns better with other elements in the UI

pull/2311/head
Sara 2024-07-25 16:47:07 -04:00
rodzic b571147228
commit 6c285800a8
2 zmienionych plików z 69 dodań i 11 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

32
docs/pages/components/button.md
Wyświetl plik

@ -227,19 +227,32 @@ const App = () => (
### Text Buttons
Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
Use the `text` variant to create a low-emphasis plain text button that looks more like body copy. Note that `text` buttons have **no backgrounds, borders, or padding**.
:::warning
**Note:** Don't use `text` buttons in size `large` or `x-large`. There is no visible difference between the `text` button's `medium` and `large` sizes, and the `x-large` size gives too mich emphasis to the button. Please check with the design team before using these size options.
:::
```html:preview
<sl-button variant="text" size="small">Text</sl-button>
<sl-button variant="text" size="medium">Text</sl-button>
<sl-button variant="text" size="large">Text</sl-button>
<sl-button variant="text" size="x-large">Text</sl-button>
<sl-button variant="text" size="small" href="/assets/images/wordmark.svg" download="shoelace.svg">
<sl-icon slot="prefix" library="fa" name="arrow-down-to-bracket"></sl-icon>
Download statement</sl-button>
<br/>
<br/>
<sl-button variant="text" size="medium" href="https://example.com/" target="_blank">Open statement
<sl-icon slot="suffix" library="fa" name="arrow-up-right-from-square"></sl-icon>
</sl-button>
```
```pug:slim
sl-button variant="text" size="small" Text
sl-button variant="text" size="medium" Text
sl-button variant="text" size="large" Text
sl-button variant="text" size="small" href="/assets/images/wordmark.svg" download="shoelace.svg"
sl-icon slot="prefix" library="fa" name="arrow-down-to-bracket"
| Text
br
br
sl-button variant="text" size="medium" href="https://example.com/" target="_blank"
| Text
sl-icon slot="suffix" library="fa" name="arrow-up-right-from-square"
```
```jsx:react
@ -253,9 +266,6 @@ const App = () => (
<SlButton variant="text" size="medium">
Text
</SlButton>
<SlButton variant="text" size="large">
Text
</SlButton>
</>
);
```

48
src/components/button/button.styles.ts
Wyświetl plik

@ -12,6 +12,16 @@ export default css`
cursor: not-allowed;
}
:host([variant='text'][size='small']) {
line-height: 1rem;
height: 1rem;
}
:host([variant='text'][size='medium']) {
line-height: 1.25rem;
height: 1.25rem;
}
.button {
display: inline-flex;
align-items: stretch;
@ -351,6 +361,44 @@ export default css`
color: var(--sl-color-primary-900);
}
.button--has-label.button--small.button--text:not(.button--has-prefix) .button__label,
.button--has-label.button--medium.button--text:not(.button--has-prefix) .button__label,
.button--has-label.button--large.button--text:not(.button--has-prefix) .button__label,
.button--has-label.button--x-large.button--text:not(.button--has-prefix) .button__label {
padding-left: 0;
}
.button--has-label.button--small.button--text:not(.button--has-suffix) .button__label,
.button--has-label.button--medium.button--text:not(.button--has-suffix) .button__label,
.button--has-label.button--large.button--text:not(.button--has-suffix) .button__label,
.button--has-label.button--x-large.button--text:not(.button--has-suffix) .button__label {
padding-right: 0;
}
.button--has-label.button--small.button--text.button--has-prefix,
.button--has-label.button--medium.button--text.button--has-prefix,
.button--has-label.button--large.button--text.button--has-prefix,
.button--has-label.button--x-large.button--text.button--has-prefix {
padding-inline-start: 0;
}
.button--has-label.button--small.button--text.button--has-suffix,
.button--has-label.button--medium.button--text.button--has-suffix,
.button--has-label.button--large.button--text.button--has-suffix,
.button--has-label.button--x-large.button--text.button--has-suffix {
padding-inline-end: 0;
}
.button--has-label.button--small.button--text,
.button--has-label.button--medium.button--text,
.button--has-label.button--large.button--text,
.button--has-label.button--x-large.button--text {
min-height: fit-content;
height: fit-content;
line-height: 1;
border-radius: 0;
}
/*
* Size modifiers
*/