6.5.1

6.5.1

Patch Changes

Tag

• Added shadows to align with design.

Table

• Updated selected row styling to align with design.

Tree / Tree Node

• Updated styling to align with design.
• Added hover state.

6.5.0

6.5.0

NOTE: This release renames many of our internal private CSS Custom Properties (--color-background). If you are using these to build your own UIs, this may be a breaking change for you.

Minor Changes

Select

• Added size property.

Option

• Added a disabled property.

Input

• Added date and datetime-local types.
• Added a prefix and suffix named slots.

Tag

• Created a new Tag component.

Patch Changes

• Updated components to use the new beta design tokens

Button

• Moved width attribute out of shadow dom, can now be styled without CSS parts.

Notification

• Watch closeAfter to close when updated

Slider

• Updated to accept float values.

6.4.0

6.4.0

Minor Changes

• Added text underline to link hover states globally.

Select

• Added multiple support

Timeline [Beta]

• New beta component Timeline is now available

Slider

• Added axis-labels and ticks-only properties, providing tick mark and label support.

Textarea

• Added a size property. Removed unused small property. (This property had no effect so this is not a breaking change)

Patch Changes

Switch

• Updated thumb hover state color to align with design.

Clock

• Updated the clock labels to align with design.

Tabs

• Updated to align with design

6.3.0

6.3.0

Minor Changes

Notification

• Added a small prop allowing for a smaller variant.

Segmented Button

• Added size prop which accepts small, medium or large.

Patch Changes

Notification

• Updated the padding around message and icon to match design.

Segmented Button

• Updated hover state styling to match design.

Push Button

• Added hover state styling to match design.

Monitoring Icon

• Updated the min height and width to match design.

Status

• Changed the overall size to be 12px to match design.

6.2.0

6.2.0

Minor Changes

Button

• Adds a borderless prop to rux-button, enabling borderless styling.

Checkbox Group/Radio Group/Select/Textarea

• Adds required props and functionality to checkbox group, radio group, select and textarea.

Patch Changes

Clock

• Updated margin-left on AOS from 16px to 17px.

Classification Marking

• Updated the overall height of classification-tags to match Figma designs. Overall height has gone from 20px -> 22px

Button

• Secondary button now has the correct text color on hover.

6.1.0

Minor Changes

Icon

• Added new CSS Shadow Part icon
• Moved the icon shadow part in rux-icon to be on the SVG element.

Global Status Bar

• Added new CSS Shadow Parts: icon, container, username, and app-state

Pop Up Menu

• Added new CSS Shadow Part container

Clock

• Added new CSS Shadow Parts date, date-label, time, time-label, aos, aos-label, los, los-label.
• Clock now displays the julien date as always 3 digits

Button Group

• Added new CSS Shadow Part container

Button

• Added new CSS Shadow Part container

Monitoring Progress Icon

• Added new CSS Shadow Parts: icon, monitoring-badge, monitoring-label, monitoring-sublabel, container, icon-group, progress-display, radial-progress, status-icon.

Monitoring Icon

• Added new CSS Shadow Parts: monitoring-badge, monitoring-label, monitoring-sublabel.

Input

• Added readonly, spellcheck, and autocomplete attributes.
• Added new CSS Shadow Parts: input, form-field, error-text, and help-text.

Checkbox Group

• Added new CSS Shadow Parts: error-text and help-text.

Radio Group

• Added new CSS Shadow Parts: error-text and help-text.

Slider

• Added new CSS Shadow Parts: input, error-text and help-text.

Select

• Added new CSS Shadow Parts: label, select, error-text and help-text.

Textarea

• Added new CSS Shadow Parts: textarea, error-text and help-text.

Push Button

• Added new CSS Shadow Parts: label and icon.

Checkbox

• Added new CSS Shadow Parts: form-field and label.

Radio

• Added new CSS Shadow Parts: form-field and label.

Progress

• Added new CSS Shadow Parts: progress and output.

Modal

• Added new CSS Shadow Parts: confirm-button and deny-button.

Segmented Button

• Added new CSS Shadow Part label.

Switch

• Added new CSS Shadow Part switch. The pseudo selectors ::before select the track, ::after selects the button.

Menu Item

• Added new CSS Shadow Part container.

Menu Item Divider

• Added new CSS Shadow Part container.

Classification Marking

• Added new CSS Shadow Parts: footer, tag, and header.
• Deprecated CSS Shadow Part footer-header. Use footer instead.

Patch Changes

• Fixes issue #121 where boolean attributes in React were not behaving as intended.

6.0.5

Bug Fixes

• Clock - fixed issue where the day of year was incorrectly being calculated off the user's timezone instead of the timezone set on the clock.

6.0.4

Bug Fixes

• Clock - fixed console error when using military timezones
• Clock - fixed issue where AOS/LOS timestamps were not updating if timezone was changed
• React - removed jest dependency

6.0.3

Hotfix Release

• Fixed an issue where Notification was not closing when the close icon was clicked.
• Fixed an issue where Tree was not collapsing when the arrow icon was clicked.
• Adds a new ruxclosed event to Notification

Astro 6

Astro 5.3 is a significant overhaul of Astro’s design and development assets to promote broader adoption, more community engagement and faster future releases

With Astro 5.3 we have combined disparate repositories in to a single monorepo. Previous repositories incorporated in to the monorepo have been set to readonly archive mode. If you need release notes for prior versions of Astro please see Astro Release Notes

Current packages in the monorepo and their archived repositories here:

• AstroUXDS.com | Archive
• Astro Web Components | Archive
• AG Grid Theme | Archive
• React Starter Kit | Archive
• Angular Starter Kit | Archive
• Vue2 Starter Kit | Archive

⭐ Release of Astro’s new Stencil-based components

Astro Web Components have been significantly updated focusing on developer experience, improved documentation and time to start a project. Simple applications can now be initiated with four lines of code in less that 30 seconds.

Note: The Stencil components are a beta release, however they are more mature and better documented than the Lit components. We reccommend any new project start with these components.

🎉 NEW

• Can be used without NPM dependencies
• Form elements as Web Components
• Form patterns/guidance for HTML, React, Vue, Angular and Svelte
• Unit and Integration tests
• Visual regression tests
• TypeScript support
• Single package import with tree shaking
• Integrations with Libraries/Frameworks
  • Angular Wrapper
  • React Wrapper
  • Vue 3
  • Svelte
• Starter kits
  • Angular
  • HTML/JS
  • Svelte
  • Vue 2
  • Vue 3

📝 IMPROVED

• Storybook documentation
• CSS Custom Property documentation for developer overrides
• Framework integrations
  • HTML/JavaScript
  • React
  • Vue2
• Starter kits
  • React
    ​

⚠️ Deprecation notification
The existing Lit/CSS libraries are moving to maintenance mode and only receive bug fixes starting January 1, 2022. We encourage all new projects to start with the new Stencil based components https://github.com/RocketCommunicationsInc/astro/tree/main/packages/web-components(https://github.com/RocketCommunicationsInc/astro/tree/main/packages/web-components)

Figma libraries for Astro’s dark and light theme components

Astro 5.3 design assets and icons are now available in Figma. The Astro Figma libraries use detailed interactive components enabling designers and non-designers alike to craft compelling, interactive prototypes compliant with Enterprise Ground Services other teams in Cross Mission Ground

• Astro on Figma https://www.figma.com/@astrouxds
• Astro User Experience Design Assets https://www.figma.com/community/file/1014254163928270411
• Astro Icons https://www.figma.com/community/file/1022883566772542677

Monorepo for Astro documentation and components

As you may have noticed we starting with Astro 5.3 all Astro-related repositories have been merged in to a single monorepo to support faster and more consistent releasese and speed up development time.

Additional alignment with programs across ECX

Astro 5.3 introduces updated styling for improved accessibility, aesthetics and alignment with applications across Enterprise Ground Services (EGS) and Kobayashi Maru. These updates are availble in both the older CSS and Lit Web Component libraries and the new Stencil libraries.

The following components have been updated

• Checkbox
• Input and Text Area
• Pop Up Menu
• Menu Item
• Radio Button
• Scroll Bar
• Segmented Button
• Select
• Slider
• Switch (formerly Toggle)

See below for a detailed changelog for each component

Change Log

Global Color Variables

Changed

• Changed --colorPrimaryLighten2 to correct value of #649cbd
• Changed --colorSecondaryDarken2 to correct value of #2b659b
• Changed --colorTertiaryDarken4 to correct value of #080c11

Added

• Added color --colorSnowflakesDarkSurface: #1b2d3e
• Added color --colorSnowflakesLightShadow: #828181
• Added color --colorSnowflakesDarkSelected: #1c3f5e
• Added color --colorSnowflakesLightSelected: #cee9fc

Theme Alias Variabels

Dark Theme Aliases

Changed

• Changed --surfaceElements to #1b2d3e using var(--colorSnowflakesDarkSurface)

Added

• Added --primaryDarker as var(--colorSecondaryDarken2, #2e679b)
• Added --darkSelected as var(--colorSnowflakesDarkSelected, #1c3f5e)

Light Theme Aliases

Changed

• Changed --inputDark to #080c11 using var(--colorTertiaryDarken4)

Added

• Added --primaryLighter as var(--colorPrimaryLighten2, #92cbff)
• Added --lightSelected as var(--colorSnowflakesLightSelected, #cee9fc)

Dark Theme

Checkbox

Changed

• Text color changed to #2e6799 using var(--primaryDarker)
• Border color changed to #2e6799 using var(--primaryDarker)
• Selected text color changed to #ffffff using var(--defalutText)
• Selected border color changed to #2e6799 using var(--primaryDarker)
• Hovered border color changed to #92cbff using var(--primaryLight)

Added

• Outline background color added as #101923 using var(--backgroundColor)
• Outline hovered background color added as #101923 using var(--backgroundColor)
• Outline selected background color added as #101923 using var(--backgroundColor)

Input & Text Area

Changed

• Background color changed to #101923 using var(--backgroundColor)
• Border color changed to #2b659b using var(--primaryDarker)
• Text color changed to #ffffff using var(--defalutText)
• Focused border color changed to #92cbff using var(--primaryLight)
• Focused text color changed to #ffffff using var(--defalutText)
• Search and cancel icon fill colors chagned to #4dacff
• Border radius changed to 3px

Added

• Added text selection background color of #1c3f5e using var(--colorSnowflakeDarkSelected)
• Added placehoder opacity of 0.6

Pop-up

Changed

• Background color changed to #101923 using var(--backgroundColor)
• Border color changed to #2b659b using var(--primaryDarker)
• Text color changed to #4dacff using var(--primary)
• Caret background color changed to #2b659b using var(--primaryDarker)
• Border seperation from anchor element increased to 4px

Menu Item (used in Pop-up)

Changed

• Background color changed to #101923 using var(--backgroundColor)
• Background hovered color changed to rgba(28, 63, 94, 0.3)
• Text color changed to #4dacff using var(--primary)
• Text hovered color changed to #4dacff using var(--primary)

Menu Item Divider (used in Pop-up)

Changed

• Border color changed to #4dacff using var(--primary)

Radio

Changed

• Border color changed to 2e6799 using var(--primaryDarker)
• Selected border color changed to var(--primaryDarker)
• Background color changed to #101923 using var(--backgroundColor)

Scroll Bar

Changed

• Thumb background color changed to #2B659B
• Track background color changed to #1B2D3E
• Changes width to 16px
• Changes height to 16px
• Changes thumb border radius to 8px

Added

• Vertical box shadow to scroll bar added as `inset 3px 3p...