diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk index 579f6eabd..b86bb8bf7 100644 --- a/docs/_layouts/palette.njk +++ b/docs/_layouts/palette.njk @@ -126,7 +126,7 @@ {% for h in hues -%} {%- if h !== 'gray' -%} - + {{ h | capitalize }} {%- endif -%} diff --git a/docs/_utils/copy-code.js b/docs/_utils/copy-code.js index b28b95cf5..3b56ae933 100644 --- a/docs/_utils/copy-code.js +++ b/docs/_utils/copy-code.js @@ -33,7 +33,7 @@ export function copyCodePlugin(eleventyConfig, options = {}) { // Add a copy button pre.innerHTML += ` - `; + `; }); return doc.toString(); diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index 264fce376..56723466c 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -167,7 +167,7 @@ Other elements can also be placed inside button groups: Button - + Dropdown Item 1 @@ -185,7 +185,7 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do ```html {.example} Save - + diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index 99440a5c3..647cfd36d 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -180,38 +180,3 @@ To create a submenu, nest an `` element in a [menu item] :::warning As a UX best practice, avoid using more than one level of submenu when possible. ::: - -### Hoisting - -Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details. - -```html {.example} - - - -``` diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md index 5a51a35a6..9f5aa704e 100644 --- a/docs/docs/components/popup.md +++ b/docs/docs/components/popup.md @@ -468,68 +468,10 @@ Use the `sync` attribute to make the popup the same width or height as the ancho ``` -### Positioning Strategy - -By default, the popup is positioned using an absolute positioning strategy. However, if your anchor is fixed or exists within a container that has `overflow: auto|hidden`, the popup risks being clipped. To work around this, you can use a fixed positioning strategy by setting the `strategy` attribute to `fixed`. - -The fixed positioning strategy reduces jumpiness when the anchor is fixed and allows the popup to break out containers that clip. When using this strategy, it's important to note that the content will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details. - -In this example, you can see how the popup breaks out of the overflow container when it's fixed. The fixed positioning strategy tends to be less performant than absolute, so avoid using it unnecessarily. - -Toggle the switch and scroll the container to see the difference. - -```html {.example} - - - - - -``` - ### Flip -When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view. To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding. +When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view and visually connected to its anchor. +To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding. Scroll the container to see how the popup flips to prevent clipping. @@ -592,7 +534,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre ```html {.example}