This commit is contained in:
Cory LaViska
2022-11-09 09:50:58 -05:00
parent 49193c972f
commit 5fd682d83a
4 changed files with 40 additions and 28 deletions

View File

@@ -5,8 +5,12 @@
[component-header:sl-dialog]
```html preview
<sl-dialog label="Dialog" class="dialog-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-dialog label="Please select" class="dialog-overview">
<sl-select>
<sl-menu-item value="1">Option 1</sl-menu-item>
<sl-menu-item value="2">Option 2</sl-menu-item>
<sl-menu-item value="3">Option 3</sl-menu-item>
</sl-select>
<sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>
@@ -22,28 +26,6 @@
</script>
```
```jsx react
import { useState } from 'react';
import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close
</SlButton>
</SlDialog>
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
</>
);
};
```
## UX Tips
- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.

View File

@@ -19,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
- Fixed a bug that caused prefix/suffix animations in `<sl-input>` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996)
- Fixed a bug in `<sl-icon>` that prevented color from being set on the host element [#999](https://github.com/shoelace-style/shoelace/issues/999)
- Fixed a bug in `<sl-dropdown>` where the `keydown` event erroneously propagated to ancestors when pressing <kbd>Escape</kbd> [#990](https://github.com/shoelace-style/shoelace/issues/990)
- Improved `<sl-badge>` to improve padding and render relative to the current font size
- Updated Lit to 2.4.1
- Updated TypeScript to 4.8.4