7.0 Migration Guide
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.
-
High Impact
If you're using this component, this change is required.
-
Medium Impact
Evaluate your application's usage.
-
Low Impact
You will most likely not be impacted by this change.
Steps:
-
Update your package.json
-
For React:
"@astrouxds/react": "^7.0.0"
-
For Angular:
"@astrouxds/angular": "^7.0.0"
-
For Web Components:
"@astrouxds/astro-web-components": "^7.0.0"
-
Audit your code to find which Astro components you're currently using.
- Review each component below and make the necessary changes.
General
Remove Custom Elements Bundle
Medium Impact
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
.
Angular
Drop Support for v11
High Impact
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+.
Typography
Roboto Mono Removed
High Impact
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.
v6
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@300;400;500;700&display=swap" />
v7
<lin rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
Button
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Clock
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--clock-background-color
--clock-border-color
--clock-label-color
--clock-text-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changes
Low Impact
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.
v6
rux-clock { color: red; }
v7
rux-clock::part(container) { color: red; }
Host Display Default Changed
Low Impact
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--checkbox-label-color
--checkbox-background-color
--checkbox-border-color
--checkbox-checked-color
--checkbox-hover-border-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Checkbox Group
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--checkboxgroup-border-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changes
Low Impact
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.
v6
rux-checkbox-group {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
v7
rux-checkbox-group::part(container) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
Classification Marking
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--color-classification-text-light
--color-classification-text-dark
Resolution:
View the CSS Custom Properties Migration document for more details.
Remove Deprecated Part
Low Impact
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)
Global Status Bar
Host Style Changes
Low Impact
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.
v6
rux-global-status-bar {
font-family: Arial;
line-height: 1;
letter-spacing: 0.3em;
}
v7
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The deprecated
--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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--input-background-color
--input-text-color
--input-focus-border-color
--input-selection-background-color
--input-invalid-border-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Log
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--log-header-background-color
--log-filter-background-color
--log-filter-text-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Modal
Component Renamed
High Impact
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
.
Click To Close
Low Impact
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>
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--modal-title-color
--modal-background-color
--modal-border-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Monitoring Progress Icon
Host Style Changes
Low Impact
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.
v6
rux-monitoring-progress-icon {
color: red;
}
v7
rux-monitoring-progress-icon::part(container) {
color: red;
}
Notification
Remove Parent Styling
High Impact
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 Notification Stacking
High Impact
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--notification-icon-color
--notification-text-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changes
Low Impact
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.
v6
rux-notification {
color: red;
padding: 1rem;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
v7
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
Component Renamed
High Impact
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.
v6
<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>
v7
<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>
Event Changes
High Impact
-
The following events have been removed:
ruxmenuwillclose
ruxmenuwillopen
-
The
ruxmenudidclose
event has been renamed to ruxpopupclosed
.
-
The
ruxmenudidopen
event has been renamed to ruxpopupopened
.
Method Changes
High Impact
-
The
close
method has been removed.
Use hide
instead.
-
The
isOpen
method has been removed.
Use the open
property to check if the menu is open.
-
The
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.
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-speed
Resolution:
View the CSS Custom Properties Migration document for more details.
Progress
Indeterminate Progress Component
Medium Impact
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>
.
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changes
Low Impact
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.
v6
rux-progress {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
v7
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;
}
Push Button
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
The label
CSS Shadow Part has been renamed to container
to 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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--radio-hover-border-color
--radio-border-color
--radio-label-color
--radio-background-color
--radio-selected-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Radio Group
Remove Deprecated CSS Custom Properties
Low Impact
-
The deprecated
--radiogroup-border-color
CSS Custom Property
has been removed.
Resolution:
View the CSS Custom Properties Migration document for more details.
Segmented Button
Remove Deprecated CSS Custom Properties
Low Impact
Medium Default Size
Low Impact
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Slider
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-height
Resolution:
View the CSS Custom Properties Migration document for more details.
Switch
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--switch-background-color
--switch-hover-on-color
--switch-hover-off-color
--switch-on-color
--switch-off-border-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changs
Low Impact
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.
v6
rux-switch {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
v7
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--tab-text-color
--tab-border-color
--tab-hover-text-color
--tab-selected-text-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Host Style Changes
Low Impact
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.
v6
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;
}
v7
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;
}
Table
Borders Removed
Medium Impact
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
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--textarea-border-color
--textarea-text-color
--textarea-focus-border-color
--textarea-selection-background-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Tree
Remove Deprecated CSS Custom Properties
Low Impact
-
The following deprecated CSS Custom Properties have been removed:
--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-color
Resolution:
View the CSS Custom Properties Migration document for more details.
Tree Node
Icons Prefix Slot
Medium Impact
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.
v6
<rux-tree-node>
<rux-status status="critical"></rux-status>
Tree Node 1.1
</rux-tree-node>
v7
<rux-tree-node>
<rux-status slot="prefix" status="critical"></rux-status>
Tree Node 1.1
</rux-tree-node>
Host Style Changes
Low Impact
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.
v6
rux-tree-node {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}
v7
rux-tree-node::part(node) {
color: red;
font-family: Arial;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.3em;
}