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...

v0.0.18

chore: bump version, changelog (#43)