Release notes

...

Version 1.0

Expected for 2024 Q3

Beta phase

0.8.0

📆 Release date: 2024-09

• 📄 Documentation.
  • Information about the integration with platforms.

0.7.0

📆 Release date: 2024-10

• 🧩 Revamped components:

  • KPIValue
  • Heatmap
  • Histogram
  • BarChart
  • GroupBarChart
  • StackedBarChart
  • MetricProgress
  • PieChart
  • LineChart
  • DonutChart

• 🧩 New components:

  • ZurichAudio
  • ZurichVideo
  • ColorInput
  • FileInput
  • RangeCalendar
  • RangeSlider
  • CookiesConsent

0.6.0

📆 Release date: 2024-09

• 🆕 New features:

  • Figma plugin feature for code parsing for some of the components.
  • Better navigation for Calendar.

• 🧩 Revamped components:

  • ShareButton
  • ShareBar
  • ListItem
  • MobileNavigation
  • MobileNavBar
  • InpageNavigation
  • TagSelect

• 🧩 New components:

  • MultiInput
  • Multiselect
  • RangeInput
  • EventListItem
  • LanguageSelector

0.5.1

📆 Release date: 2024-07

• 📄 Documentation:

  • StackBlitz examples per component.
  • Info about the use of WebComponents for SSR.

• 🆕 New features:

  • Functional automated testing for WebComponents.
  • Visual automated testing for WebComponents.
  • Visual automated testing for CSS Components.

0.5.0

📆 Release date: 2024-06-20

• New icons available.

• 📄 Documentation:

  • Components search in index page.
  • Improvements in the performance of the documentation.
  • Info about the integration with Salesforce.
  • Info about the integration with Mendix.

• ⚠️ Breaking changes!:

  • DropdownMenu renamed as ActionMenu.
  • Names of types export files of @zurich/css-components have changed.
  • Default slots divided for Stage and Promo as actions.

• 🆕 New features:

  • Semantic tokens.
  • Possibility of changing or removing the Alert icon.
  • Search for ZurichImages by name.
  • Upstreamed versions for private packages. No need to comment/remove the .npmrc configuration.
  • @zurich/css-components includes now the Vue 3 components we use for the playgrounds.
  • reset() method for input WebComponents.
  • enter event for some WebComponent inputs.
  • closable FloatingBanner.
  • Some additional slots for WebComponents.

• 🧩 Revamped components:

  • ✔ Carousel
  • ✔ EmptyState
  • ✔ Footer
  • ✔ Navigation
  • ✔ Stepper
  • ✔ Table

• 🧩 New components:

  • ✔ CheckboxSelect
  • ✔ ChipsSet
  • ✔ InputGroup
  • ✔ SelectionTag
  • ✔ Resizer
  • ✔ ScrollIndicator
  • ✔ Skeleton
  • ✔VerticalStepper

• 🪲 Fixes:

  • Compatibility of @zurich/angular-components with Angular 18.
  • Missing @zurich/angular-components exports.
  • Optimizations in styles chain in WebComponents inputs.
  • Improvements in pipelines.
  • Better React wrapping.
  • WebComponents only registered once.
  • WebComponents missing abstract implementations.
  • WC registration conflicts via CDN use.
  • Background of Shape.
  • Slider inner state.
  • Chip styles review.
  • Select corrections for internal manipulation.
  • Fixed Select ignoring config in Angular.
  • Optional v-model for Vue components.
  • Not updated values on setValue for Angular WC using ReactiveForms.

0.4.5

📆 Release date: 2024-05-31

• More images from BlueRoom available, and added to the Figma plugin (+350).

• 📄 Documentation:

  • Info about the available slots in the WebComponents.

• ⚠️ Breaking changes!:

  • Removed outline variant for Checkbox & Switch .

• 🆕 New features:

  • Components adjustments for SSR.
  • custom-str attribute in WebComponents for easier config.
  • popover APIs for Button and Card.
  • Slotted options for Select.
  • Slotted summary for Accordion.
  • Button as-submit option.
  • cross-origin attribute added for images.
  • Self closing Sidebar and Modal.
  • icon for Tag.
  • TimeInput with-seconds flag.

• 🪲 Fixes:

  • Review of the Button for current design matching.
  • Added propagation of onblur event.
  • Better mechanism for required inputs validation.
  • Calendar exports.
  • TimeInput value pads.
  • Slider glitch on min set.
  • Promo shape rendering and narrow configuration fixed.
  • help-text for Inputs dark mode.
  • Dark theme for AvatarList, Toast and Alert.
  • Checkbox & Switch double opacity issue for disabled fixed.

0.4.4

📆 Release date: 2024-05-23

• 📄 Documentation:

  • StackBlitz integrations examples.

• 🆕 New features:

  • New presentation video.
  • ArticleCard and ActionCard components have now the pre-line option.
  • Common agnostic slots approach for the web components following the HTML standard.

• 🪲 Fixes:

  • Some fixes fix custom typing.
  • Angular rendering in docs.
  • Headings in examples.
  • Dark modes of Badge.
  • Accordion effects.
  • Avatar background color change in docs
  • SegmentedControl click hit-box.
  • SegmentedControl dark mode.
  • Sidebar background for dark mode
  • Tabs dark mode selected
  • WC Inputs initial invalid only when required and dirty or explicitly invalid.
  • Internal states for CheckboxGroup and Select.
  • Shapes fixed for glitches and themes.
  • Fix default Shapes theme for Stage and Promo.
  • RadioSelect selected dot color in invalid and dark.
  • Backgrounds for Angular components on dark theme.
  • Tooltip CSS bottom-left & top-left positions fixed.
  • custom prop in React.
  • Some React components properties passing when the property was an object.

0.4.3

📆 Release date: 2024-05-14

• 🪲 Fixes:
  • CDN re-routing for Zurich images fixed.
  • Missing props in some Angular components.
  • Issue with the root for the Zurich images.
  • Missing playground parsers.
  • Button disabled style.
  • Typing for custom attribute in Angular components.

0.4.2

📆 Release date: 2024-05-13

• 🆕 New features:

  • More images from BlueRoom available (+300).
  • New images also added to the Figma plugin.
  • Figma plugin injects also the BlueRoom images as paint styles on selection.
  • WC Promo and Stage can now modify their Shapes or remove them.
  • ZurichImage values in the image-src attributes of web components can be used.
  • You can now define quality and rotate for the ZurichImage.
  • ZurichImage can infer retina screens to improve the image quality.
  • 📱 badge added to components with React native implementation.

• 🪲 Fixes:

  • WC Shape has better theme mechanics.
  • Fixes in variables overrides for dark theme.
  • Disableable Calendar.
  • Fixed event of ProgressTracker in React.
  • Optimization in CSS for fonts.
  • ES6 compilation of @zurich/dev-utils for better compatibility.
  • Improvements in the compilations of @zurich/design-tokens
  • Better dependency chain in the installation of packages

0.4.1

📆 Release date: 2024-05-8

• 🆕 New features:

  • 🆕 badge added to new components of current minor version.
  • Angular form components can now use reactive forms.

• 🪲 Fixes:

  • Fixed reflect attribute issue with boolean inputs.
  • Fixed value assignations for some inputs.
  • Fixed events for WwbComponent inputs in React.
  • Fixed missing custom to props in some Angular components.
  • Typing improvements in Angular components.
  • Fixed ZurichImage cropping mechanics.

0.4.0

📆 Release date: 2024-04-26

• 📦 New packages:

  • @zurich/angular-components

• New tool: Figma plugin. We will deliver new features as they are fully tested. The current ones are:

  • BlueRoom images injection using ZDS CDN.
  • Direct access to the components' documentation in one click.

• ⚠️ Breaking changes!:

  • Angular components are no longer available under @zurich/web-components/angular.
  • Everything about versions before 0.3.0 removed from the CDN.
  • Fonts names use now number instead of T-shirt sizes to match Figma.

• 🆕 New features:

  • Angular Components can now access the WebComponent using templateRef.
  • isDirty, isInvalid, and isTouched properties for WebComponent Inputs.
  • Headings override is now an optional feature.
  • Documentation listing the available function in @zurich/dev-utils.
  • New troubleshooting documentation listing errors solved by other teams for their configurations.
  • WebComponents can how receive the customization variables for an instance using the custom attribute.
  • UAT documentation shown now the upcoming components for early testers.

• 🧩 Revamped components:

  • ✔ Breadcrumbs
  • ✔ FloatingBanner
  • ✔ ProgressBar
  • ✔ Promo
  • ✔ Slider
  • ✔ ProgressTracker
  • ✔ Sidebar
  • ✔ Stage
  • ✔ StageBanner
  • ✔ Tabs

• 🧩 New components:

  • ✔ ButtonGroup
  • ✔ Calendar
  • ✔ CheckboxGroup
  • ✔ Request
  • ✔ ZurichImage

• 🪲 Fixes:

  • Type issues in @zurich/web-components.
  • Better structure for the @zurich/web-components package.
  • Angular component binding in Playground.
  • @zurich/dev-utils compiled for ES6 to be used with old tooling.
  • Select dropdown issue.

0.3.10

📆 Release date: 2024-04-18

• Docs using Vitepress 1.1.0.

• ⚠️ Breaking changes!:

  • Angular components using two-way data binding change the name of the property from value to ngModel to match the standard.

• 🪲 Fixes:

  • Improvements in deployment times.
  • Fixed bug with update in WebComponents for checked inputs. This comes from a CSS bug.
  • Fixed layout scaling for RadioSelect.
  • Fixed Form config spread.
  • Content issue in Modal WebComponent.

0.3.9

📆 Release date: 2024-04-17

• 🪲 Fixes:
  • Fixed Illegal constructor issue with Angular components.
  • Fixed z-theme and editablefor Angular components.
  • FixedPasswordInput label behavior.
  • Accordion custom tokens.

0.3.8

📆 Release date: 2024-04-16

• Improvements in the bundling and optimization of the components.

• Locals assets in packages for JSDocs.

• 📄 Documentation:

  • Code examples for WebComponents.
  • More detailed explanations about params for WebComponents.
  • Slots documentation.

• 🆕 New features:

  • Named slots option for Web Components.
  • Breakpoints SCSS tooling.
  • Custom card shadows.
  • Visibility toggle forPasswordInput added.
  • Test approach for BlueRoom integration.
  • Button has now link capabilities.

• ⚠️ Breaking changes!:

  • SegmentControl model uses now string.
  • Icon z-icon property partially changed to icon (for optimization).
  • icon attributes for outlined version changed from :outline to :line for optimization.
  • Pictogram dark version is set in the pictogram property and not from z-theme.
  • CDN outlined icons now end with --o.svg instead of --outline.svg for optimization.
  • m is now defaults size for Inputs.

• 🪲 Fixes:

  • Fixed framework selector for mobile resolutions.
  • Shape background.
  • z-layout for mobile.
  • z-theme chain for WebComponents.
  • Size for Inputs properly implemented.
  • readonly visuals for inputs.
  • React events for Button and Chip.
  • Adjusted implementation of Modal to avoid backdrop problems.

0.3.7

📆 Release date: 2024-03-21.

• New icons available.

• 📄 Documentation:

  • WebComponents and CSS implementations docs separated.
  • Step by step construction indication for the CSS components HTML.
  • More consistent CSS code examples.
  • Code examples for CSS Components.
  • Simplified parametrization using editable components.

• ⚠️ Breaking changes!:

  • accordion-size of Accordion changed to config.
  • state of Toast changed to config.
  • icon-left of Button changed to icon-right.
  • RadioSelect CSS version uses now fieldset.
  • Dropdown renamed to to ActionMenu.
  • Button alert variant removed.
  • SafeSpace config attribute order changed.
  • Tag color attribute changed to fill.

• 🆕 New features:

  • wide option for Button.
  • autocomplete for Inputs.
  • icon for TextInput and NumberInput.
  • sizeable Pictogram.
  • Casters and manipulation helpers in @zurich/dev-utils.
  • Editable components.
  • min and max for DateInput and TimeInput.

• 🪲 Fixes:

  • In-component theme specificity.
  • Fixed typing for React and Vue components.
  • CDN versions from NPM automation.
  • Button link glitch on hover.
  • DateInput hit-box and padding.
  • Pictogram background.
  • Checkbox avoids icon use.
  • Button dark theme adjusted to current design.
  • ActionMenu hover mechanics adjusted.
  • Shape WebComponent dark mode.
  • Background color on invalid forCheckbox and Switch.
  • General fixes forArticleCard and ActionCard.
  • checked for WC version of BooleanIcon, Checkbox and Switch.

0.3.6

📆 Release date: 2024-03-06.

• 📄 Documentation:

  • Layout and content improvements in the guidelines' documentation.
  • Better HTML examples.

• 🆕 New features:

  • Validation mechanisms for Inputs.
  • Readonly for Chip.
  • Dark version of Shape.
  • Profile, Image, and SafeSpace for require explicit onerror callbacks if scripts is used.
  • Scripts added for @zurich/css-components to ease the use of some components like the Slider or Textarea and add extra functionality to Inputs.

• ⚠️ Breaking changes!:

  • just-weekday of Date changed to with-weekday to match the API.
  • config as only attribute for Logo.
  • Logo and SmilingZ follow the z-theme schema.

• 🪲 Fixes:

  • Fixes in layouts of all Inputs.
  • Small fixes in many Atoms.
  • Fixed issues of Profile.
  • Fixed sizes of CSS Icon.
  • General fixes in visuals of components.
  • Easier import mechanisms.
  • Fix when importing Angular components in @zurich/web-components.
  • Imports also refer to the necessary styles.

0.3.5

📆 Release date: 2024-02-26.

• Fix type dependency for @zurich/dev-utils.

0.3.4

📆 Release date: 2024-02-26.

• Fixed issue with installation of packages.

• Clarifications of the Inputs localization.

• Explanation for the use of complex attributes in HTML with Web Components.

• 🆕 New features:

  • Boolean Inputs implement checked now, with prevalence over value.

• 🪲 Fixes:

  • Fixed CDN dependency chain for Web components.
  • Added missing configurations of the input components.
  • Visual glitches of Inputs.

0.3.3

📆 Release date: 2024-02-23.

• The default documentation page of the component is now the Guidelines. Code is nested under this one.

• @zurich/dev-utils exports now code parsers and types for the components.

• New languages added to locales.

• General refactor done for better performance and typing.

• 📄 Documentation.

  • Layout foundations documented
    • Flex.
    • Grid.
  • New HTML isolated examples of use for CSS and WebComponents.
  • Events for components documented.
  • Embed Figma library references (requires Figma account).

• ⚠️ Breaking changes!:

  • Badge z-color attribute changed to fill.
  • Profile profile-status attribute changed to status.
  • Profile, Avatar, and AvatarList CSS implementations are simpler and easier.

• 🪲 Fixes:

  • Better code parsing for samples.
  • Fixed Shape as CSS component.
  • Fixed Textarea appearance.
  • Fixed Profile fallback images and parser.
  • Fixed Badge WebComponent icon injection.

0.3.1 and 0.3.2

📆 Release date: 2024-02-16.

• Fixed issue with the DNS address pointing to the stage environment.

0.3.0

📆 Release date: 2024-02-16.

• 📄 Documentation.

  • Playgrounds can now change the global locale when required.

• ⚠️ Breaking changes!:

  • In order to ensure consistency, respect the standard and avoid rendering problems, we have transformed all the attributes and properties casing to kebab-case.
  • Isotype component renamed as SmilingZ.
  • APIs of SmilingZ and Logo have changed.
  • Easier CSS implementation for SafeSpace and SegmentedControl.

• New resources available: the @zurich/dev-utils package now provides SCSS variables for Icons and Pictograms.

• 🧩 Revamped components:

  • ✔ Accordion
  • ✔ ActionCard
  • ✔ Alert
  • ✔ ArticleCard
  • ✔ Avatar
  • ✔ AvatarList
  • ✔ Card
  • ✔ Modal
  • ✔ Quote
  • ✔ Select
  • ✔ ShareBar

• 🧩 New components:

  • ✔ BooleanIcon
  • ✔ Dropdown
  • ✔ Fieldset
  • ✔ Form
  • ✔ Link
  • ✔ Pagination

• Additions:

  • TextInput can accept now different types: text, email, tel or url.
  • SmilingZ, Logo and Shape can change their sizes.

• 🪲 Fixes:

  • Fixes in documentation images and optimization.
  • Fixes in the icon masks.
  • Fixes with icon fallbacks.
  • Better components customization.
  • Fixes with inputs' hit-boxes.
  • Fixed Time component for frameworks.
  • Fixes in the slotted version of some web components.
  • Fixes in CDN import chain.
  • Fixes in Web Components isolated use.
  • Fixes with React dependency.
  • Fixed icon size for Badge.
  • Fixed sizes for Button.
  • Lighter implementation for SmilingZ, Logo, and Profile.
  • Fixed Shape flip in WebComponents.
  • Fixed SegmentedControl errors.

0.2.3

📆 Release date: 2024-02-2.

• 🆕 New features:

  • You can now use JSX Elements inside some of the attributes of @zurich/web-components/react components. Check the info here

• 📦 New packages:

  • @zurich/dev-utils

• 🪲 Fixes:

  • Corrections added in the documentation for the Vue 2 compatibility mode.
  • More styling and CSS properties corrections.
  • More custom properties added.
  • Fixes in the spread of semantic tokens.
  • Fixes in the Profile and SafeSpace components with the fallbacks.
  • Dark mode for Logo and Isotype components.
  • Fixed Rating component.
  • Several events fixed for input components.

0.2.2

📆 Release date: 2024-01-31.

• 🧩 Component implementations for @zurich/react-native:

  • Chip
  • Isotype
  • Logo
  • SafeSpace
  • Shape
  • Tag
  • New @zurich/react-native component: ZrText, a wrapper for Text to handle fonts and themes.

• 🪲 Fixes:

  • Better routing in the documentation.
  • Documentation routing aliases added.
  • Version indicator in nav bar.
  • Type fixes for @zurich/design-tokens.

• 🪲 Fixes in @zurich/web-components and @zurich/css-components:

  • Fixes in several CSS properties and customization.
  • General optimization of the CSS.
  • Fixed issues with Angular for slotted variants.

• 🪲 Fixes in @zurich/react-native:

  • Fixed types for TypeScript.
  • Fixed ZrThemeProvider name.
  • Added explanation for ZrThemeProvider in docs.

0.2.1

📆 Release date: 2024-01-29.

• 🧩 Component implementations for @zurich/react-native:

  • Currency
  • Date
  • Icon
  • Number
  • Pictogram
  • Time
  • New @zurich/react-native component: ZrThemeProvider, to handle themes.

• ⚠️ Breaking changes!:

  • React components use Zr as prefix to avoid recursion and render problems.

• 🪲 Fixes in @zurich/web-components:

  • React inputs onChange and onInput callbacks properly working for all.

0.2.0

📆 Release date: 2024-01-26.

• 📦 New packages:

  • @zurich/react-native

• 📄 Documentation.

  • Reworked installation documentation for the packages to fit the changes.
  • Frequently Asked Questions.

• Changes:

  • Vue components use zv-as prefix to avoid recursion problems.
  • @zurich/web-components and @zurich/css-components/styles.css no longer require the import of @zurich/design-tokens
  • @zurich/design-tokens/index.css and @zurich/css-components/index.css imports simplified to @zurich/design-tokens and @zurich/css-components
  • ZurichSans as default font in @zurich/design-tokens with fallbacks.

• 🪲 Fixes in @zurich/web-components:

  • v-model working form Vue components.
  • Fixed the compilation of the assets gathering per environment for the WebComponents
  • Fixed the compilation of the Angular components.
  • Fixed the compilation of the Vue components.
  • Fixed the types for Angular components.
  • Fixed the types for Vue components.
  • Optimizations in the compiled files.

0.1.2

📆 Release date: 2024-01-22.

• 🪲 Fixes:

  • Solving Angular rendering in deployment environments
  • Fix SegmentedControl for frameworks.
  • Fix disabled for NumberInput
  • Fix some theming issues for inputs.
  • Fix documentation typos.

0.1.1

📆 Release date: 2024-01-19.

• 🪲 Fixes:

  • Fixes with the CDN and the routing
  • Major fixes with the versioning of packages

0.1.0

📆 Release date: 2024-01-19.

• 🏗️ Infrastructure:

  • New UAT (stage) environment under: https://stage.zds.zurich.com/. Requires to be inside Zurich's network.
  • New PROD environment under: https://zds.zurich.com/
  • CDN system for assets distribution. Check how to use it here.

• 📄 Documentation.

  • Information about the Zurich Design System project.
  • Explanations about the principles of the new approach.
  • Installation guidelines.
  • Information about the support.
  • Information about the status of every component.
  • Foundations specifications.
    • Breakpoints.
    • Spacers.
    • Colors.
    • Typography.
    • Themes.
    • Icons.
    • Pictograms.
    • Images.
  • VSCode integration tips.

• New assets:

  • Reworked Zurich Sans fonts for legibility.
  • More than 1.200 reworked icons.
  • More than 250 pictograms with two different contracts versions.
  • Theme responsible favicon.

• 📦 New packages:

  • @zurich/design-tokens
  • @zurich/css-components
  • @zurich/web-components

• 🧩 Revamped components:

  • ✔ Badge
  • ✔ Button
  • ✔ Checkbox
  • ✔ DateInput
  • ✔ Image
  • ✔ Loader
  • ✔ Profile
  • ✔ RadioSelect
  • ✔ Rating
  • ✔ SafeSpace
  • ✔ SegmentedControl
  • ✔ Shape
  • ✔ Switch
  • ✔ Tag
  • ✔ Textarea
  • ✔ TextInput
  • ✔ Toast

• 🧩 New components:

  • ✔ Currency
  • ✔ Date
  • ✔ DateInput
  • ✔ Icon
  • ✔ Isotype
  • ✔ Logo
  • ✔ Number
  • ✔ NumberInput
  • ✔ PasswordInput
  • ✔ Pictogram
  • ✔ Time
  • ✔ TimeInput