This pull request adds the ability to dynamically render the auro-sidenav either within or independently of an auro-accordion. This is achieved by adding a boolean attribute, collapsible, and conditional logic within the render to the auro-sidenav component.
Please see this discussion for details that affected this decision.
Next steps
There are some excellent lesser-known JavaScript window utilities we can leverage to allow media query-esque attribute management, namely window.matchMedia. Many notable libraries use this in various forms to get the media query usage out of components, and into dynamic attributes (read: covering many use cases).
This is a simple demo script someone on the content team might use to 1. pull pixel values from a design token, and 2. use that value with a performant window.matchMedia change handler.
<script>
// This design token variable can be whatever/from wherever you want
const DESIGN_TOKEN_VARIABLE = '--ds-grid-breakpoint-sm';
// Read the breakpoint into JS
const smallBreakpointPx = getComputedStyle(document.documentElement).getPropertyValue(DESIGN_TOKEN_VARIABLE)
// Whatever valid media query you need
const mediaQueryString = `(min-width: ${smallBreakpointPx})`
// Get media matcher for query string
const windowMediaMatcher = window.matchMedia(mediaQueryString);
// Change `collapsible` attr. to reflect `e.matches`
const toggleSidenavCollapse = (e) => {
const auroSidenavExample = document.getElementById("collapsible-example")
if (!e.matches) {
auroSidenavExample.setAttribute('collapsible', "")
} else {
auroSidenavExample.removeAttribute("collapsible")
}
};
windowMediaMatcher.onchange = toggleSidenavCollapse;
window.onload = toggleSidenavCollapse;
</script>
Type of change:
Please delete options that are not relevant.
[x] New capability
Checklist:
[x] My update follows the CONTRIBUTING guidelines of this project
[x] I have performed a self-review of my own update
By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.
Thank you for your submission!
-- Auro Design System Team
Alaska Airlines Pull Request
Resolves: #13, #5, #15
Summary:
This pull request adds the ability to dynamically render the
auro-sidenav
either within or independently of anauro-accordion.
This is achieved by adding a boolean attribute,collapsible,
and conditional logic within the render to theauro-sidenav
component.Please see this discussion for details that affected this decision.
Next steps
There are some excellent lesser-known JavaScript window utilities we can leverage to allow media query-esque attribute management, namely
window.matchMedia
. Many notable libraries use this in various forms to get the media query usage out of components, and into dynamic attributes (read: covering many use cases).This is a simple demo script someone on the content team might use to 1. pull pixel values from a design token, and 2. use that value with a performant
window.matchMedia
change handler.Type of change:
Please delete options that are not relevant.
Checklist:
By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.
Thank you for your submission!
-- Auro Design System Team