Release notes

...

Beta phase

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 and WebComponents.
  • 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 DropdownMenu.
  • 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.

• General 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.
  • DropdownMenu 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.

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

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

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

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

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

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

• 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

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

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

• 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

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

• New 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