mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
fix popup
This commit is contained in:
Cory LaViska
@@ -6,7 +6,7 @@ Popup is a utility that lets you declaratively anchor "popup" containers to anot
|
||||
|
||||
This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.
|
||||
|
||||
The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
|
||||
Popup doesn't provide any styles — just positioning! The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
|
||||
|
||||
```html preview
|
||||
<div class="popup-overview">
|
||||
@@ -215,7 +215,7 @@ const App = () => {
|
||||
};
|
||||
```
|
||||
|
||||
?> A popup's anchor should never be styled with `display: contents` since the coordinates will not be eligible for calculation. However, if the anchor is a `<slot>` element, popup will use the first assigned element as the anchor. This behavior allows other components to pass anchors through more easily via composition.
|
||||
?> A popup's anchor should not be styled with `display: contents` since the coordinates will not be eligible for calculation. However, if the anchor is a `<slot>` element, popup will use the first assigned element as the anchor. This behavior allows other components to pass anchors through more easily via composition.
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -1029,16 +1029,16 @@ const App = () => {
|
||||
|
||||
### Auto-size
|
||||
|
||||
Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from overflowing. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option.
|
||||
Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
|
||||
|
||||
For best results, set a preferred width/height on the `popup` part and set `width: 100%; height: 100%;` on your content's wrapper. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
|
||||
When using auto-size, two read-only custom properties called `--auto-size-available-width` and `--auto-size-available-height` will be applied to the host element. These values determine the available space the popover has before clipping will occur. Since they cascade, you can use them to set a max-width/height on your popup's content and easily control its overflow.
|
||||
|
||||
Scroll the container to see auto-size in action.
|
||||
Scroll the container to see the popup resize as its available space changes.
|
||||
|
||||
```html preview
|
||||
<div class="popup-auto-size">
|
||||
<div class="overflow">
|
||||
<sl-popup placement="bottom" auto-size active>
|
||||
<sl-popup placement="top" auto-size active>
|
||||
<span slot="anchor"></span>
|
||||
<div class="box"></div>
|
||||
</sl-popup>
|
||||
@@ -1061,19 +1061,21 @@ Scroll the container to see auto-size in action.
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: dashed 2px var(--sl-color-neutral-600);
|
||||
margin: 100px 50px 250px 50px;
|
||||
}
|
||||
|
||||
.popup-auto-size sl-popup::part(popup) {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
margin: 250px 50px 100px 50px;
|
||||
}
|
||||
|
||||
.popup-auto-size .box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--sl-color-primary-600);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
|
||||
/* This sets the preferred size of the popup's content */
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
|
||||
/* This sets the maximum dimensions and allows scrolling when auto-size kicks in */
|
||||
max-width: var(--auto-size-available-width);
|
||||
max-height: var(--auto-size-available-height);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1103,19 +1105,21 @@ const css = `
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: dashed 2px var(--sl-color-neutral-600);
|
||||
margin: 100px 50px 250px 50px;
|
||||
}
|
||||
|
||||
.popup-auto-size sl-popup::part(popup) {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
margin: 250px 50px 100px 50px;
|
||||
}
|
||||
|
||||
.popup-auto-size .box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--sl-color-primary-600);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
|
||||
/* This sets the preferred size of the popup's content */
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
|
||||
/* This sets the maximum dimensions and allows scrolling when auto-size kicks in */
|
||||
max-width: var(--auto-size-available-width);
|
||||
max-height: var(--auto-size-available-height);
|
||||
overflow: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1126,7 +1130,7 @@ const App = () => {
|
||||
<>
|
||||
<div className="popup-auto-size">
|
||||
<div className="overflow">
|
||||
<SlPopup placement="bottom" auto-size={autoSize || null} auto-size-padding="10" active>
|
||||
<SlPopup placement="top" auto-size={autoSize || null} auto-size-padding="10" active>
|
||||
<span slot="anchor" />
|
||||
<div className="box" />
|
||||
</SlPopup>
|
||||
|
||||
@@ -8,6 +8,13 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
||||
|
||||
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
|
||||
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: removed the `base` part from `<sl-menu>` and removed an unnecessary `<div>` that made styling more difficult
|
||||
- Added read-only custom properties `--auto-size-available-width` and `--auto-size-available-height` to `<sl-popup>` to improve support for overflowing popup content
|
||||
- Fixed a bug where auto-size wasn't being applied to `<sl-dropdown>` and `<sl-select>`
|
||||
- Fixed a bug in `<sl-popup>` that caused auto-size to kick in before flip
|
||||
|
||||
## 2.0.0-beta.80
|
||||
|
||||
This release breaks radio buttons, which is something that needed to happen to solve a longstanding accessibility issue where screen readers announced an incorrect number of radios, e.g. "1 of 1" instead of "1 of 3." Many attempts to solve this without breaking the existing API were made, but none worked across the board. The new implementation upgrades `<sl-radio-group>` to serve as the "form control" while `<sl-radio>` and `<sl-radio-button>` serve as options within the form control.
|
||||
|
||||
Reference in New Issue
Block a user