v7.0.0

7.0 Changes

Major

Our /dist/custom-elements build has been removed in favor of a faster treeshakeable /dist/components build.

Angular

• Angular versions <= 12 are no longer supported.

Typography

• Roboto Mono has been removed from the font stack.

Button

• 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

Clock

• The color CSS property can no longer be styled from the :host element.
• The default display css property is now inline-block rather than flex.
• The following deprecated CSS Custom Properties have been removed:
  • --clock-background-color
  • --clock-border-color
  • --clock-label-color
  • --clock-text-color

Checkbox

• 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

Checkbox Group

• color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --checkboxgroup-border-color

Classification Marking

• footer-banner CSS Shadow Part has been removed.
• The following deprecated CSS Custom Properties have been removed:
• --color-classification-text-light
• --color-classification-text-dark

Dialog

• Dialog will no longer close when clicking outside by default.
• The dialog-title and dialog-message properties have been removed in favor of header and messsage.

Global Status Bar

• appdomain and appname are no longer uppercase.
• font-family, letter-spacing, line-height CSS properties can no longer be styled from the :host element.

Icon

• label attribute has been removed.
• The deprecated --icon-default-color CSS Custom Property has been removed.

Input

• 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

Log

• The following deprecated CSS Custom Properties have been removed:
  • --log-header-background-color
  • --log-filter-background-color
  • --log-filter-text-color

Modal

• Modal has been removed and renamed to <rux-dialog>.
• The following deprecated CSS Custom Properties have been removed:
  • --modal-title-color
  • --modal-background-color
  • --modal-border-color

Monitoring Progress Icon

• The color CSS property can no longer be styled from the :host element.

Notification

• Notification no longer requires a parent element with position: relative and overflow: hidden applied.
• Multiple sibling notifications are no longer stacked by default.
• Notification no longer overlays content. Instead, when a notification becomes visible, it will shift content up or down accordingly.
• The slide in/out animation has been removed for better performance.
• The color, font-family, font-weight, font-size, letter-spacing, line-height, and padding CSS properties can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --notification-icon-color
  • --notification-text-color

Pop Up

• anchorEl and triggerEl properties have been removed.
• ruxmenudidclose , ruxmenudidopen, ruxmenuwillclose, ruxmenuwillopen events have been removed.
• close, isOpen, show, toggle methods have been removed.
• menu-end slot has been removed.

Pop Up Menu

• Pop Up Menu has been removed and renamed to <rux-pop-up>.
• The deprecated --menu-item-divider-border-color CSS Custom Property has been removed.

Progress

• Indeterminate functionality has been removed and is now a separate <rux-indeterminate-progress> component.
• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• 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

Push Button

• label CSS Shadow Part has been renamed to container.
• 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

Radio

• 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

Radio Group

• The deprecated --radiogroup-border-color CSS Custom Property has been removed.

Segmented Button

• The default size property is now medium rather than small.
• The following deprecated CSS Custom Properties have been removed:
  • --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-color

Select

• 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

Slider

• 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

Switch

• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• 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

Tab

• font-family, font-size, letter-spacing, font-weight, border-color, border-bottom, min-width, and padding can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --tab-text-color
  • --tab-border-color
  • --tab-hover-text-color
  • --tab-selected-text-color

Table

• Right and left border styles have been removed by default.
• 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

Textarea

• The following deprecated CSS Custom Properties have been removed:
  • --textarea-border-color
  • --textarea-text-color
  • --textarea-focus-border-color
  • --textarea-selection-background-color

Tree

• 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

Tree Node

• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.

Minor

• New typography utility classes have been added to astro-web-components.css.

• Links no...

v7.0.0-rc.1

7.0-rc.1

Major

Our /dist/custom-elements build has been removed in favor of a faster treeshakeable /dist/components build.

Angular

• Angular versions <= 12 are no longer supported.

Button

• 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

Clock

• The color CSS property can no longer be styled from the :host element.
• The default display css property is now inline-block rather than flex.
• The following deprecated CSS Custom Properties have been removed:
  • --clock-background-color
  • --clock-border-color
  • --clock-label-color
  • --clock-text-color

Checkbox

• 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

Checkbox Group

• color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --checkboxgroup-border-color

Classification Marking

• footer-banner CSS Shadow Part has been removed.
• The following deprecated CSS Custom Properties have been removed:
• --color-classification-text-light
• --color-classification-text-dark

Dialog

• Dialog will no longer close when clicking outside by default.
• The dialog-title and dialog-message properties have been removed in favor of header and messsage.

Global Status Bar

• appdomain and appname are no longer uppercase.
• font-family, letter-spacing, line-height CSS properties can no longer be styled from the :host element.

Icon

• label attribute has been removed.
• The deprecated --icon-default-color CSS Custom Property has been removed.

Input

• 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

Log

• The following deprecated CSS Custom Properties have been removed:
  • --log-header-background-color
  • --log-filter-background-color
  • --log-filter-text-color

Modal

• Modal has been removed and renamed to <rux-dialog>.
• The following deprecated CSS Custom Properties have been removed:
  • --modal-title-color
  • --modal-background-color
  • --modal-border-color

Monitoring Progress Icon

• The color CSS property can no longer be styled from the :host element.

Notification

• Notification no longer requires a parent element with position: relative and overflow: hidden applied.
• Multiple sibling notifications are no longer stacked by default.
• Notification no longer overlays content. Instead, when a notification becomes visible, it will shift content up or down accordingly.
• The slide in/out animation has been removed for better performance.
• The color, font-family, font-weight, font-size, letter-spacing, line-height, and padding CSS properties can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --notification-icon-color
  • --notification-text-color

Pop Up

• anchorEl and triggerEl properties have been removed.
• ruxmenudidclose , ruxmenudidopen, ruxmenuwillclose, ruxmenuwillopen events have been removed.
• close, isOpen, show, toggle methods have been removed.
• menu-end slot has been removed.

Pop Up Menu

• Pop Up Menu has been removed and renamed to <rux-pop-up>.
• The deprecated --menu-item-divider-border-color CSS Custom Property has been removed.

Progress

• Indeterminate functionality has been removed and is now a separate <rux-indeterminate-progress> component.
• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• 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

Push Button

• label CSS Shadow Part has been renamed to container.
• 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

Radio

• 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

Radio Group

• The deprecated --radiogroup-border-color CSS Custom Property has been removed.

Segmented Button

• The default size property is now medium rather than small.
• The following deprecated CSS Custom Properties have been removed:
  • --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-color

Select

• 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

Slider

• 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

Switch

• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.
• 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

Tab

• font-family, font-size, letter-spacing, font-weight, border-color, border-bottom, min-width, and padding can no longer be styled from the :host element.
• The following deprecated CSS Custom Properties have been removed:
  • --tab-text-color
  • --tab-border-color
  • --tab-hover-text-color
  • --tab-selected-text-color

Table

• Right and left border styles have been removed by default.
• 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

Textarea

• The following deprecated CSS Custom Properties have been removed:
  • --textarea-border-color
  • --textarea-text-color
  • --textarea-focus-border-color
  • --textarea-selection-background-color

Tree

• 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

Tree Node

• The color, font-family, font-size, font-weight, letter-spacing, and line-height CSS properties can no longer be styled from the :host element.

Minor

• New typography utility classes have been added to astro-web-components.css.

• Links no longer change color on hover.

Accordion [New]

• Adds new Accordion ...

v6.13.1

6.13.1

Patch Changes

Tab

• Added container CSS Shadow Part.
• Fixed an issue where multiple tabs on the same page would hide each others content when selected.

Checkbox

• Fixed an issue where the label was disappearing when checked.

v6.13.0

6.13.0

Minor Changes

Timeline

• support for partial time regions

Dialog

• Added better keyboard support for tabbing between confirm and deny buttons, and triggers deny on an escape key press.

Patch Changes

Progress

• Visual fix for Firefox to properly align progress indicator

v6.12.1

6.12.1

Patch Changes

Timeline

• Fixed an issue where time regions were not updating when their ranges were edited

v6.12.0

6.12.0

Minor Changes

Slider

• Added ruxchange event

v6.11.0

6.11.0

Minor Changes

Tree

• Added two new events to rux-tree-node: ruxtreenodeexpanded and ruxtreenodecollapsed.

6.10.0

6.10.0

Minor Changes

Modal

• Modal is now deprecated and will be removed in 7.0. It is being renamed to Dialog to align with our Design System naming and which shares the exact same API as Modal. It is recommended that you migrate to Dialog before 7.0. You can do a global find/replace on your project for:

  rux-modal -> rux-dialog
ruxmodalclosed -> ruxdialogclosed
ruxmodalopened -> ruxdialogopened

Patch Changes

GSB

• Fixed layout bug when used with classification marking

Modal / Dialog

• Fixed an issue with modal emitting an extra 'ruxmodalclosed' event when closed by an off click.

Tabs

• Fixed a styling bug with small variant

v7.0.0-beta.3

• a7296b6: Our /dist/custom-elements build has been removed in favor of a faster treeshakeable /dist/components build. We anticipate very few people are using this build. To check if your project is affected, you can do a global find for 'astro-web-components/dist/custom-elements' in your project. If you are using this build, switch to 'astro-web-components/dist/loader' instead.

• 27b7289: Modal has been removed. It has been renamed to Dialog to align with our Design System naming and shares the exact same API as Modal.

  Migration: You can do a global find/replace on your project for:

  rux-modal -> rux-dialog
ruxmodalclosed -> ruxdialogclosed
ruxmodalopened -> ruxdialogopened

7.0.0-beta.2

7.0.0-beta.2

Major Changes

CSS Custom Properties

The majority of our CSS Custom Properties have been removed. See the MIGRATION.md file for more information.

Angular

The angular wrapper has been updated and will no longer be compatible with Angular versions less than 12.

Pop Up Menu

Pop Up Menu has been re-written to take a slotted trigger element and slotted content. Now changes placement based on available space. Replaces all methods with two new methods, show and hide.

Clock

• The following styles have been removed from the :host element:

  margin: 0 1rem

  You may need to apply this to your element directly:

    rux-clock {
      margin: 0 1rem;
    }
  

  user-select: none

  If you wish to override this, use the new container CSS Shadow Part.

  height: 3.938rem

  If you wish to override this, use the new container CSS Shadow Part.

  display: flex

  The default display has been changed to inline-block. This can be overwritten by targeting the rux-clock host element.

Notification

• Host styles have been moved to the shadow dom. If you were previously styling the element, use shadow parts instead

Minor Changes

Notification

• add --height css custom property
• add prefix, default, and actions slots

Clock

• add container CSS Shadow Part

Patch Changes

• 14961eb: Updates Angular dependencies and documentation
• Updated dependencies [d89430e]
• Updated dependencies [84e89af]
• Updated dependencies [d89430e]
• Updated dependencies [1d4926c]
• Updated dependencies [84e89af]
• Updated dependencies [d89430e]
• Updated dependencies [14961eb]
• Updated dependencies [d89430e]
• Updated dependencies [853eead]
• Updated dependencies [d89430e]
• Updated dependencies [14961eb]
• Updated dependencies [8d885e1]
• Updated dependencies [d89430e]
• Updated dependencies [14961eb]
• Updated dependencies [d89430e]
• Updated dependencies [8d885e1]
• Updated dependencies [d89430e]
• Updated dependencies [84e89af]
• Updated dependencies [d89430e]
• Updated dependencies [d89430e]
  • @astrouxds/[email protected]