kopia lustrzana https://github.com/shoelace-style/shoelace
Porównaj commity
8 Commity
6f3d13e0cf
...
ad9adbd400
Autor | SHA1 | Data |
---|---|---|
Mario Hamann | ad9adbd400 | |
Konnor Rogers | 64996b2d35 | |
Susanne Kirchner | 0daa5d8dee | |
Konnor Rogers | 16d5575307 | |
Konnor Rogers | a427433701 | |
Danny Andrews | c6da4f5b14 | |
Cory LaViska | d0b71adb81 | |
mariohamann | c31bdbbf79 |
|
@ -236,7 +236,7 @@ When a `target` is set, the link will receive `rel="noreferrer noopener"` for [s
|
|||
|
||||
### Setting a Custom Width
|
||||
|
||||
As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
|
||||
As expected, buttons can be given a custom width by passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
|
||||
|
|
|
@ -12,6 +12,13 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
|
|||
|
||||
New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
|
||||
|
||||
## Next
|
||||
|
||||
- Fixed a bug in `<sl-split-panel>` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#1942]
|
||||
- Fixed a bug in `<dialog>` where when it showed it would cause a layout shift. [#1967]
|
||||
- Fixed a bug in `<sl-tooltip>` that allowed unwanted text properties to leak in [#1947]
|
||||
- Fixed a bug in `<sl-button-group>` classes [#1974]
|
||||
|
||||
## 2.15.0
|
||||
|
||||
- Added the Slovenian translation [#1893]
|
||||
|
|
|
@ -590,7 +590,7 @@ export default css`
|
|||
|
||||
/* Focus and checked are always on top */
|
||||
:host([data-sl-button-group__button--focus]),
|
||||
:host([data-sl-button-group__button[checked]]) {
|
||||
:host([data-sl-button-group__button][checked]) {
|
||||
z-index: 2;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -189,6 +189,14 @@ export default class SlSplitPanel extends ShoelaceElement {
|
|||
const { width, height } = entries[0].contentRect;
|
||||
this.size = this.vertical ? height : width;
|
||||
|
||||
// There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when
|
||||
// a split-panel goes from `display: none;` to showing.
|
||||
if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) {
|
||||
this.cachedPositionInPixels = Number(this.getAttribute('position-in-pixels'));
|
||||
this.positionInPixels = Number(this.getAttribute('position-in-pixels'));
|
||||
this.position = this.pixelsToPercentage(this.positionInPixels);
|
||||
}
|
||||
|
||||
// Resize when a primary panel is set
|
||||
if (this.primary) {
|
||||
this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
|
||||
|
|
|
@ -84,7 +84,6 @@ export default class SlTag extends ShoelaceElement {
|
|||
label=${this.localize.term('remove')}
|
||||
class="tag__remove"
|
||||
@click=${this.handleRemoveClick}
|
||||
tabindex="-1"
|
||||
></sl-icon-button>
|
||||
`
|
||||
: ''}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import '../../../dist/shoelace.js';
|
||||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
import { sendKeys } from '@web/test-runner-commands';
|
||||
import sinon from 'sinon';
|
||||
import type SlTag from './tag.js';
|
||||
|
||||
|
@ -61,5 +62,18 @@ describe('<sl-tag>', () => {
|
|||
|
||||
expect(spy.called).to.equal(true);
|
||||
});
|
||||
|
||||
it('should be clickable via keyboard', async () => {
|
||||
const el = await fixture<SlTag>(html` <sl-tag removable>Test</sl-tag> `);
|
||||
|
||||
const spy = sinon.spy();
|
||||
|
||||
el.addEventListener('sl-remove', spy, { once: true });
|
||||
|
||||
await sendKeys({ press: 'Tab' });
|
||||
await sendKeys({ press: 'Enter' });
|
||||
|
||||
expect(spy.called).to.equal(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -44,6 +44,8 @@ export default css`
|
|||
font-size: var(--sl-tooltip-font-size);
|
||||
font-weight: var(--sl-tooltip-font-weight);
|
||||
line-height: var(--sl-tooltip-line-height);
|
||||
text-align: start;
|
||||
white-space: normal;
|
||||
color: var(--sl-tooltip-color);
|
||||
padding: var(--sl-tooltip-padding);
|
||||
pointer-events: none;
|
||||
|
|
|
@ -33,6 +33,19 @@ export function lockBodyScrolling(lockingEl: HTMLElement) {
|
|||
if (!document.documentElement.classList.contains('sl-scroll-lock')) {
|
||||
/** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */
|
||||
const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied
|
||||
|
||||
let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
|
||||
|
||||
// default is auto, unsupported browsers is "undefined"
|
||||
if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {
|
||||
scrollbarGutterProperty = 'stable';
|
||||
}
|
||||
|
||||
if (scrollbarWidth <= 0) {
|
||||
// if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
|
||||
scrollbarGutterProperty = 'revert';
|
||||
}
|
||||
document.documentElement.style.setProperty('--sl-scroll-lock-gutter', scrollbarGutterProperty);
|
||||
document.documentElement.classList.add('sl-scroll-lock');
|
||||
document.documentElement.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`);
|
||||
}
|
||||
|
|
|
@ -6,7 +6,10 @@
|
|||
|
||||
@supports (scrollbar-gutter: stable) {
|
||||
.sl-scroll-lock {
|
||||
scrollbar-gutter: stable !important;
|
||||
scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
|
||||
}
|
||||
|
||||
.sl-scroll-lock body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue