Astro 7.0 introduces a number of breaking changes that require developers to update their application code. We've compiled a list of every breaking change below. Since the migration process will vary on an application-by-application basis, we've broken down changes per component based on the likelihood of impact.
"@astrouxds/react": "^7.0.0"
"@astrouxds/angular": "^7.0.0"
"@astrouxds/astro-web-components": "^7.0.0"
Our dist/custom-elements build has been removed in favor of a more lightweight and better tree-shakeable dist/components build.
Search your project for any reference
to dist/custom-elements and replace it with
dist/components.
Our Angular wrapper has dropped support for Angular versions <= 11. This aligns with Angular's own support policy.
Resolution: Upgrade your application to Angular v12+.
Roboto Mono has been removed from our font stack in favor of Roboto's tabular figures when displaying numbers within components such as Clock.
Resolution: Remove any import of Roboto Mono from your application.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@300;400;500;700&display=swap" /><lin rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />--button-active-background-color--button-active-border-color--button-background-color--button-border-color--button-borderless-hover-color--button-borderless-text-color--button-secondary-background-color--button-secondary-border-color--button-secondary-hover-background-color--button-secondary-hover-border-color--button-secondary-hover-text-color--button-secondary-text-colorResolution: View the CSS Custom Properties Migration document for more details.
--clock-background-color--clock-border-color--clock-label-color--clock-text-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the color by targeting the rux-clock element instead of using the available CSS Shadow Parts.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-clock directly and replace with the appropriate CSS Shadow Part.
rux-clock { color: red; }rux-clock::part(container) { color: red; }
Clock's default display property has been changed from
flex to inline-block.
Resolution:
If you were relying on the element to be display: flex, you can change the display yourself on the root.
rux-clock { display: flex; }--checkbox-label-color--checkbox-background-color--checkbox-border-color--checkbox-checked-color--checkbox-hover-border-colorResolution: View the CSS Custom Properties Migration document for more details.
--checkboxgroup-border-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the following CSS properties by targeting the rux-checkbox-group element instead of using the available CSS Shadow Parts:
color, font-family, font-size, font-weight, line-height, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-checkbox-group directly and replace with the appropriate CSS Shadow Part.
rux-checkbox-group {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}rux-checkbox-group::part(container) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}--color-classification-text-light--color-classification-text-darkResolution: View the CSS Custom Properties Migration document for more details.
The deprecated footer-banner CSS Shadow Part has been removed
Resolution:
Search your application's CSS for anything targeting ::part(footer-banner) and replace with ::part(footer)
Previously it was possible to change the following CSS properties by targeting the rux-global-status-bar element instead of using the available CSS Shadow Parts: font-family, line-height, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-global-status-bar directly and replace with the appropriate CSS Shadow Part.
rux-global-status-bar {
font-family: Arial;
line-height: 1;
letter-spacing: 0.3em;
}rux-global-status-bar::part(container) {
font-family: Arial;
line-height: 1;
letter-spacing: 0.3em;
}
The app-domain and app-name properties are no longer
uppercase by default.
Resolution:
Add your own style via the container CSS Shadow Part
rux-global-status-bar::part(container) {
text-transform: uppercase;
}--icon-default-color CSS Custom Property has been removed.
Resolution: View the CSS Custom Properties Migration document for more details.
The label attribute has been removed and the title for our icons no longer defaults to the icon name.
This was causing confusion because the browser would display the title as a tooltip when an icon was used inside a button.
Because accessibility for svgs can be complicated and heavily dependent on context, we've decided to remove this feature for now.
Resolution:
If you need more control over the title and aria attributes of our icons, it is recommended that you instead import and use our svg assets directly.
--input-background-color--input-text-color--input-focus-border-color--input-selection-background-color--input-invalid-border-colorResolution: View the CSS Custom Properties Migration document for more details.
--log-header-background-color--log-filter-background-color--log-filter-text-colorResolution: View the CSS Custom Properties Migration document for more details.
Modal has been renamed to Dialog. Additionally, there have been a few other breaking changes to the API.
Resolution:
Search your application for any instances of <rux-modal> and replace them with <rux-dialog>.
The dialog-title (modal-title) property has
been renamed to header.
The dialog-message (modal-message) property
has been renamed to message.
Dialog will no longer close when clicking outside by default to align with Astro UXDS compliance requirements 4.3.3: "Dialog Boxes shall be closed only with confirm or cancel Buttons."
Resolution:
If you need to restore this functionality, you may use the new click-to-close property.
<rux-dialog click-to-close></rux-dialog>--modal-title-color--modal-background-color--modal-border-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the color CSS properties
by targeting the
rux-monitoring-progress-icon element instead of using the available
CSS Shadow Parts.
These styles have now been properly moved to the shadow
dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-monitoring-progress-icon directly and replace with the appropriate CSS Shadow Part.
rux-monitoring-progress-icon {
color: red;
}rux-monitoring-progress-icon::part(container) {
color: red;
}
Notifications no longer require a parent element with
position: relative and
overflow: hidden applied.
Resolution:
Check your implementation of rux-notification and remove the position: relative and overflow: hidden styles.
Multiple sibling notifications will no longer stack by default. Previously, you could have multiple notifications and they would stack on top of each other. Because only one notification should be visible at a time, you should only need one element in the DOM.
Resolution: You'll need to add some of your own custom logic to manage which notification should be presented. Consult the documentation for more details
--notification-icon-color--notification-text-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the following CSS properties by targeting the rux-notification element instead of using the available CSS Shadow Parts: color, font-family, font-size, font-weight, line-height, letter-spacing, padding.
These styles have now
been properly moved to the shadow dom and require the use of CSS Shadow
Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-notification directly and replace with the appropriate CSS Shadow Part.
rux-notification {
color: red;
padding: 1rem;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}rux-notification::part(container) {
color: red;
padding: 1rem;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}Pop Up Menu has been removed and has been split into separate Pop Up and Menu components.
Pop Up Menu has been rewritten entirely and now uses Floating UI under the hood to provide greater flexibility for positioning.
<rux-icon icon="apps" aria-controls="popup-menu-1"></rux-icon>
<rux-pop-up-menu id="popup-menu-1">
<rux-menu-item>
Item 1
</rux-menu-item>
<rux-menu-item-divider></rux-menu-item-divider>
<rux-menu-item value="2">
Item 2
</rux-menu-item>
<rux-menu-item disabled>
Item 3 is disabled
</rux-menu-item>
<rux-menu-item value="Item 4">
Item 4 has a string value
</rux-menu-item>
<rux-menu-item href="https://www.astrouxds.com">
Item 5 is an anchor/action item...
</rux-menu-item>
</rux-pop-up-menu><rux-pop-up open placement="right">
<rux-icon icon="apps" slot="trigger"></rux-icon>
<rux-menu>
<rux-menu-item value="1">Menu Item 1</rux-menu-item>
<rux-menu-item value="2">Menu Item 2</rux-menu-item>
<rux-menu-item value="3">Menu Item 3</rux-menu-item>
</rux-menu>
</rux-pop-up>ruxmenuwillcloseruxmenuwillopenruxmenudidclose event has been renamed to ruxpopupclosed.
ruxmenudidopen event has been renamed to ruxpopupopened.
close method has been removed.
Use hide instead.
isOpen method has been removed.
Use the open property to check if the menu is open.
toggle method has been removed.
Use the show or hide methods where appropriate.
The menu-end slot has been removed.
Use a regular rux-menu-item and style it accordingly.
--popup-menu-background-color--popup-menu-border-color--popup-menu-caret-background-color--popup-menu-caret-left--menu-item-divider-border-color--popup-menu-caret-size--popup-menu-transition-speedResolution: View the CSS Custom Properties Migration document for more details.
The indeterminate spinner functionality of rux-progress has
been removed and is now it's own separate
<rux-indeterminate-progress> component.
Resolution:
Search your application for any usage of <rux-progress> in it's indeterminate state.
rux-progress is considered indeterminate if no value property is present.
Replace <rux-progress> with <rux-indeterminate-progress>.
--progress-padding--progress-radius--progress-height--progress-width--progress-determinate-bar-background-color--progress-determinate-track-background-color--progress-determinate-track-border-color--progress-label-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the following CSS properties by targeting the rux-progress element instead of using the available CSS Shadow Parts: color, font-family, font-size, font-weight, line-height, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-progress directly and replace with the appropriate CSS Shadow Part.
rux-progress {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}rux-progress::part(output),
rux-progress::part(progress) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}--pushbutton-background-color--pushbutton-border-color--pushbutton-text-color--pushbutton-selected-background-color--pushbutton-selected-border-color--pushbutton-selected-text-color--pushbutton-selected-hover-text-colorResolution: View the CSS Custom Properties Migration document for more details.
The label CSS Shadow Part has been renamed to containerto be more consistent with other components.
Resolution:
Search your application for any usage of rux-push-button::part(label) and replace it with rux-push-button::part(container).
--radio-hover-border-color--radio-border-color--radio-label-color--radio-background-color--radio-selected-colorResolution: View the CSS Custom Properties Migration document for more details.
--radiogroup-border-color CSS Custom Property
has been removed.
Resolution: View the CSS Custom Properties Migration document for more details.
--segmented-button-background-color--segmented-button-text-color--segmented-button-border-color--segmented-button-hover-background-color--segmented-button-hover-text-color--segmented-button-hover-border-color--segmented-button-selected-background-colorResolution: View the CSS Custom Properties Migration document for more details.
The default size property is now medium instead of small.
Resolution:
Search your app for rux-segmented-button and manually add set the size property to small where desired.
--select-menu-border-radius--select-menu-border-hover-color--select-menu-border-focus-color--select-menu-invalid-border-color--select-menu-text-color--select-menu-label-color--select-menu-border-color--select-menu-option-text-hover-color--select-menu-option-selected-background-color--select-menu-option-selected-text-color--select-menu-inactive-caret--select-menu-active-caret--select-menu-background-colorResolution: View the CSS Custom Properties Migration document for more details.
--slider-thumb-background-color--slider-thumb-border-color--slider-hover-thumb-background-color--slider-hover-thumb-border-color--slider-track-background-color--slider-selected-thumb-border-color--slider-thumb-size--slider-thumb-border-size--slider-tick-padding-top--slider-selected-track-background-color--slider-value-percent--slider-top--slider-track-heightResolution: View the CSS Custom Properties Migration document for more details.
--switch-background-color--switch-hover-on-color--switch-hover-off-color--switch-on-color--switch-off-border-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the following CSS properties by targeting the rux-switch element instead of using the available CSS Shadow Parts:
color, font-family, font-size, font-weight, line-height, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-switch directly and replace with the appropriate CSS Shadow Part.
rux-switch {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}rux-switch::part(label),
rux-switch::part(switch) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}--tab-text-color--tab-border-color--tab-hover-text-color--tab-selected-text-colorResolution: View the CSS Custom Properties Migration document for more details.
Previously it was possible to change the following CSS properties by targeting the rux-tab element instead of using the available CSS Shadow Parts:
border-color, border-bottom, min-width, padding ,font-family, font-size, font-weight, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-tab directly and replace with the appropriate CSS Shadow Part.
rux-tab {
color: red;
min-width: 3rem;
padding: 1rem;
border-bottom: 2px solid red;
border-color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.3em;
}rux-tab::part(container) {
color: red;
min-width: 3rem;
padding: 1rem;
border-bottom: 2px solid red;
border-color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.3em;
}The right and left borders have been removed by default to make them easier to use within Cards and Containers.
Resolution: You can manually reapply the left and right borders by targeting the host element itself:
rux-table {
border: 1px solid var(--color-background-base-default);
}--textarea-border-color--textarea-text-color--textarea-focus-border-color--textarea-selection-background-colorResolution: View the CSS Custom Properties Migration document for more details.
--table-border-color--table-row-hover-text-color--table-row-hover-background-color--table-row-border-color--table-row-text-color--table-row-background-color--table-header-border-color--table-header-background-color--table-header-text-color--table-header-box-shadow--table-row-selected-background-color--table-row-selected-border-colorResolution: View the CSS Custom Properties Migration document for more details.
--tree-text-color--tree-border-color--tree-accent-color--tree-hover-background-color--tree-hover-text-color--tree-selected-border-color--tree-selected-accent-color--tree-expanded-border-color--tree-background-colorResolution: View the CSS Custom Properties Migration document for more details.
The default display for content inside Tree Nodes has changed and may break your application if you are using the Tree Node with icons or status symbols.
Resolution:
Add slot="prefix" to any icons or status symbols.
<rux-tree-node>
<rux-status status="critical"></rux-status>
Tree Node 1.1
</rux-tree-node><rux-tree-node>
<rux-status slot="prefix" status="critical"></rux-status>
Tree Node 1.1
</rux-tree-node>
Previously it was possible to change the following CSS properties by targeting the rux-tree-node element instead of using the available CSS Shadow Parts:
color, font-family, font-size, font-weight, line-height, letter-spacing.
These styles have now been properly moved to the shadow dom and require the use of CSS Shadow Parts.
Resolution:
Search your application's CSS for anything that may be targeting rux-tree-node directly and replace with the appropriate CSS Shadow Part.
rux-tree-node {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}rux-tree-node::part(node) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}