Skip to content
Beta phase -
Release notes
...
1.3.0
- 🧩 New components:
1.2.0
- 🧩 Revamped components:
1.1.0
🆕 New features:
- Figma plugin feature for code parsing for some of the components.
🧩 Revamped components:
- ✔
BarChart
- ✔
🧩 New components:
1.0.0
- 📄 Documentation.
Beta phase - 0.x.x
0.6.0
🆕 New features:
- Implementation of all components as React CSS components.
⚠️ Breaking changes!:
- Inputs default config changed to
shaped
. range
prop deprecation (will be gone in0.7.0
).
- Inputs default config changed to
🧩 Revamped components:
🧩 New components:
0.5.0
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 asActionMenu
.- Names of types export files of
@zurich/css-components
have changed. - Default slots divided for
Stage
andPromo
asactions
.
🆕 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:
🪲 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
ignoringconfig
in Angular. - Optional
v-model
for Vue components. - Not updated values on
setValue
for Angular WC using ReactiveForms.
- Compatibility of
0.5.1
- 🪲 Fixes:
- Fixed visuals of
RadioSelect
. - Nested parsing fixed.
Carousel
min. height and better slides amount acquisition.
- Fixed visuals of
0.5.2
📄 Documentation:
⚠️ Breaking changes!:
- Inputs no longer use
label
as the default placeholder.
- Inputs no longer use
🆕 New features:
- WebComponent inputs emit
restarted
onreset()
. change()
event for Angular inputs will bubble.- CDN WebComponents will now use CDN
@zurich/dev-utils
helpers. - New functions in
@zurich/dev-utils
. - Setup for functional automated testing for WebComponents.
- Setup for visual automated testing for WebComponents.
- Setup for visual automated testing for CSS Components.
- More flexible button options for
config
. - Main packages have now an export
/info
with data about the package. Alert
can now hide the close button.- All props in components are now optional to avoid problems with the rendering, async props, wrong config, or an incorrect use of the component. The lack of props will be handled by the component.
@zurich/css-components
includes now the some React components inspired in the Vue Playground components to provide another alternative for Next.js SSR or React apps.
- WebComponent inputs emit
🪲 Fixes:
- Not defined WebComponents won't be shown.
- More semantic tokens reviewed for components.
- Separate React helpers to allow use of some WebComponent directly for SSR.
Pagination
size adjusted.Chip
readonly
now working in Angular.Tag
icon
now working in Angular.- Fixed placeholder for inputs.
- Fixed images onerror loop and cross-origin.
- Fixes in documentation.
- Disabled option for
RadioSelect
. linear
as default config inProgressBar
.1
as default shape inShape
.- Inputs reset of help text on no longer invalid.
0.5.3
⚠️ Breaking changes!:
- Undefined component only hidden if specified with
z-no-undefined
attribute in body.
- Undefined component only hidden if specified with
🪲 Fixes:
0.5.4
📄 Documentation:
- A nice Glossary.
- Reviewed docs to accommodate the explanations of slots and slotted configurations.
- Removed HTML explicit
imports
andcode
examples.
🆕 New features:
- StackBlitz examples per component.
Select
,CheckboxGroup
,CheckboxSelect
,ProgressTracker
,SegmentedControl
,RadioSelect
,ChipsSet
,VerticalStepper
, andTabs
can now use<option>
tags for setting up.AvatarList
andBreadcrumbs
can now use other tags for setting up.- More
@zurich/css-components
React components. - Internal state for
Pagination
,Calendar
,Stepper
,ProgressTracker
, andVerticalStepper
. blank-fallback
option flag forImage
.Badge
allows now solid icons.- More flexible
Tabs
definition - Entire review of slots that allow more flexibility for components.
config
spread forButtonGroup
,Form
, andFieldset
.ProgressTracker
can now explicitly disabled certain steps.- Way more flexibility in the use of WebComponent
Table
.
🪲 Fixes:
Icon
andPictogram
will be hidden if noicon
orpictogram
are respectively provided.Badge
icons not displaying in different sizes and sizing corrections.Toast
config
issue fixed.- More semantic tokens reviewed for components.
- More exposed tokens for components.
- Color of
Rating
. Pictogram
not always rendering.- Spread layout for WebComponents inputs.
- Default
config
ofProgressTracker
is nowhorizontal
Cross-Origin-Resource-Policy
modifications.- Fixes in the publish of testing results to show all available suites.
- Fixed the icon search in docs and other component imports missing.
0.5.5
📄 Documentation:
- Change documentation disposition.
- Partial substitution of StackBlitz per CodeSandbox.
- Customization added to Playgrounds. Instance customization will be now parsed.
⚠️ Breaking changes!:
z-theme
implicit change of color and background will only work with container tags:<div>
,<article>
,<section>
,<main>
,<body>
,<aside>
,<header>
, or<footer>
.
🆕 New features:
- React WebComponents are now capable of using JSX as attributes if they are capable of being slotted.
Avatar
has now more slotted options.Stage
hasdefault
slot andcontent
attribute.label
slot forCheckboxSelect
andCheckboxGroup
.- Figma plugin now usable in VSCode. Full functionality requires DevMode.
Accessibility
PoC concept for visual evaluation in dev-mode.
🪲 Fixes:
- More semantic tokens reviewed for components.
- Issues with slots for frameworks.
- Fixed
Profile
backgrounds. - Fixed
value
parsing in Vue wrappers for non-model-based components. - Fixed some errors with React events.
- Fixed types acquisition for Vue and React.
- Simplified React wrappers.
- Model of
Accordion
. Select
not working ifname
not provided.
0.5.6
📄 Documentation:
- More components documentation
- Everything about UX/UI guidelines will now stay in the ZeroHeight documentation. These docs will only reference those guidelines when required.
Open in CodeSandbox
option in Web and CSS Playgrounds.- Dynamic binding in code examples
- Fixes in the code examples and JSX parsing.
⚠️ Breaking changes!:
- Social media icons have been removed. They will be available under a new component
SocialMediaIcon
. These are not suitable for changing colors and preserve the original branding ones. value
for non-model-based components changed toamount
(Number
andCurrency
),date
(Date
),time
Time
, andpercentage
ProgressBar
.- Development CSS tooling will require an explicit import for performance (
dev.css
).
- Social media icons have been removed. They will be available under a new component
🆕 New features:
z-flex
admits nowcol
as a shortcut forcolumn
.spread
option forwide
Button
.dataList
param ofNumberInput
andTextInput
as slotted configuration.- Added special use cases of
Button
. - Slotted
<z-shape>
forPromo
andStage
. Link
gets an underline if it's used inside a<p>
tag to follow guidelines.- Icons in
Tabs
.
🧩 New components:
🪲 Fixes:
- Minor fixes in React type acquisition.
- Error emitted on inputs.
- Default custom tokens values.
- Fixed priority of slotted configurations.
- Fixed some attributes not passed in Angular components.
- Fixed
Tooltip
positioning. - Fixed
Skeleton
customization. - Fixed
ChipsSet
shaped
anddark
visuals. - Fixed
popover-target
forButton
. - Fixed React events sometimes blocking the thread and breaking the component.
- Fixed decimals in localized
Number
. - Fixed
Pagination
snapping and double selection. - Fixed container spreads in Angular.
0.5.7
📄 Documentation:
- Some corrections in RL references
🪲 Fixes:
- Error with files missing in the CDN.
0.5.8
📄 Documentation:
- Playgrounds use slotted configs as default samples.
🆕 New features:
🪲 Fixes:
- Fixed
false
attrs affecting Vue components' style. - Fixed
resizable
inResizer
. - Better
Textarea
elastic behavior and styles solved. - Fixed
Footer
social icons not showing. - Fixed Angular
EmptyState
not receiving most properties. - Fixed Angular
ProgressBar
not receivingstatus
. - Fixed Angular components not receiving
readonly
. - Fixed type import in
@zurich/dev-utils
. - Fixed
copyright
styling forImage
. - Fixed CSS
Tag
not showing the icon. - Fixed touchpad not working with some components.
- Fixed width for
Image
when using caption.
- Fixed
0.5.9
More images from BlueRoom available, and added to the Figma plugin (now more than 2.700).
📄 Documentation:
- Components status is back.
- Images search fixed.
- Relative path in CDN self-imports for better performance.
- New paths and new reporter for tests reports (still WIP):
⚠️ Breaking changes!:
value
for model-based components changed tomodel
.- Editable feature WebComponents removed. Slots can be used instead.
🆕 New features:
Flag.css
available in@zurich/design-tokens
to show flags emojis in Windows.click
event forButtonGroup
.
🪲 Fixes:
Accordion
binding.- Fixed types for React CSS components.
- Fix in
invalid
assignation loop and clarifications added to the documentation. - Flags management in Angular wrappers.
- Angular components updated to version
18.1.0
. - Fixed slotted styling of Angular
ButtonGroup
. - Fixed
readonly
in Angular. - Improvements in Vue and React event typing.
- By removing the
editable
feature, most React components are now more SSR friendly.
0.5.10
📄 Documentation:
- Localization docs.
- Fixed some docs issues and mismatches.
🆕 New features:
Emojis.css
available in@zurich/design-tokens
to show consistent emojis across platforms and devices.- Slotted images for
SafeSpace
,ActionCard
,ArticleCard
,EmptyState
,Promo
, andStage
. - Possibility of localize
TimeInput
andDateInput
. Fieldset
andForm
layout manipulation.DateInput
experimentalcustom-ui
flag.align-right
inTextInput
andNumberInput
🪲 Fixes:
Invalid input
defaulthelp-text
gone afterinvalid
is set tofalsy
.- Initial missing 10 ZurichImages are back.
- Fixed
Promo
image-src
. - Fixed
Pagination
array parser. - Fixed
ProgressTracker
andSlider
responsiveness. - Fixed
Slider
bubble number, alignment, and rendering problems. - Fixed
unit
display inNumberInput
. - Overriden
focus()
for inputs. - Use of
style
in React components. TimeInput
andDateInput
duplicated icons in Firefox.- Adjustment in
Fieldset
andInputGroup
. - Fixed
ActionMenu
elements
in React and the slotted mechanism.
0.5.11
🆕 New features:
🪲 Fixes:
0.5.12
- 🪲 Fixes:
- Types reference in
@zurich/web-components
. - Removed non-implemented CSS components.
- Types reference in
0.5.13
📄 Documentation.
- Fixed splats in redirections.
- Improved performance.
🆕 New features:
🪲 Fixes:
- Duplicated key in
@zurich/design-tokens
exports. AvatarList
overflow over+9
.Accordion
fixes to match design.- Fixes in visuals of
Button
andButtonGroup
. - Issue with import via CDN for
DateInput
and others. - Design review and adjustments for some components.
- No icons in
readonly
inputs.
- Duplicated key in
0.5.14
📄 Documentation.
- Dark theme applied to all code examples
- Custom tokens playground fixed.
- GIF and slotted images examples.
- Outdated version message in docs.
- Information about the integration with Salesforce.
FloatingBanner
changed as layout.- Fixed route aliases conflicts.
- Performance improvements.
🆕 New features:
- Better navigation for
Calendar
. Calendar
events andbackTo*
methods and footer navigation.Slider
button for min and max setting.Stage
withoutSafeSpace
option.Resizer
breakpoints' triggered events.Carousel
overflow
version,no-loop
flag, and dots navigation.ActionCard
andArticleCard
wide
flags.
- Better navigation for
⚠️ Breaking changes!:
RadioSelect
no longer usesinvalid-text
, buthelper-text
and/orinvalid
.ActionMenu
no longer has separators (to match design).FloatingBanner
no longer has optionalclosable
(to match design).
🪲 Fixes:
Shape
dark versions updated for contrast.- Better mechanisms for
Shape
theme inference. - Design review of many components.
- Corrections in WebComponents container limits and fitting.
- Internal
z-theme
spread. Tabs
internal state.- Better a11y and implementation for
SegmentedControl
. RadioSelect
andSlider
value assignation error fixed.Icon
inline behavior.ActionCard
andArticleCard
React events fixed.- Localization display elements inline behavior.
0.5.15
📄 Documentation.
- Performance improvements.
- Examples for
reset()
method in input components.
⚠️ Breaking changes!:
- Individual imports of Vue and React WebComponents no longer use
/dist/
.
- Individual imports of Vue and React WebComponents no longer use
🪲 Fixes:
0.5.16
📄 Documentation.
- Performance improvements.
- Examples of use in Next.js.
- CSS implementation selector in docs.
🆕 New features:
id
andclassName
props in React wrappers.- CJS builds for Next.js.
reset()
forForm
.getLoremPicsum
helper function- Some extra slots as properties in React WebComponent wrappers.
🪲 Fixes:
z-theme
andslot
in framework CSS wrappers.
0.5.17
📄 Documentation.
- Documentation about how to localize the components in detail.
- Some docs fixes with missing imports.
- Preparation con CSS framework wrappers docs.
🆕 New features:
- New improved and more optimized mechanism for locales.
- Slotted images in CSS framework wrappers.
- CSS Vue and React components no longer require explicit CSS imports per component.
::part
selectors in most WebComponents.- Locales translations in CDN.
eager
flag forImage
.
⚠️ Breaking changes!:
- The localization mechanism require the explicit load of the locales.
- The mechanism for slotted images has changed a bit for WebComponents.
- CSS
Image
requires to use the<picture>
tag. ProgressBar
status
variants set asinvalid
andhighlight
flags.
🪲 Fixes:
- SCSS functionalities are back in
@zurich/dev-utils
. - Build path of Vue CSS components.
- Images are now properly slotted (no config-based).
- SCSS functionalities are back in
0.5.18
📄 Documentation.
- Added parsers for Vue and React CSS components.
- Some improvements in the documentation of the components.
🆕 New features:
no-counter
flag forTextInput
- Inputs can use
min
andmax
as overrides ofrange
.
⚠️ Breaking changes!:
BooleanIcon
,Checkbox
, andSwitch
no longer usesinvalid-text
, buthelper-text
and/orinvalid
.Image
andProgressBar
require nowFigure
forcaption
.
🧩 New components:
- ✔
Figure
- ✔
🪲 Fixes:
- Performance improvements in Angular inputs.
- Fixed round
Button
when noconfig
is used. - Fixed the
invalid
appearance of inputs when required. Now only set if they are touched. - Fixed the
required
logic, decoupled now from validation. - Fixed the
max-length
not working in open loop. - Fixed small glitch with boolean inputs.
- Using
aria-invalid
instead ofdata-invalid
flag for better a11y. - Popover API backdrop color.
0.5.19
📄 Documentation:
- Optimization in imports use.
- Updated figma IDs.
- Related components updated.
- Parameters section moved to component's guidelines.
- Implementations links added to component's guidelines.
- Some thumbnails in CDN.
- Performance improvements.
- No search engines indexation for examples.
- Updated version of VitePress to
1.5.0
.
🆕 New features:
Navigation
new configs and contents.locale
forLoader
.- Added
onBlur
for most React and Vue WC inputs .
⚠️ Breaking changes!:
- CSS
Stage
andStageBanner
uses now the<aside>
tag instead<picture>
for the elements positioning. - We reworked the tags of
Navigation
in CSS for better UX adn responsiveness.
- CSS
🪲 Fixes:
Select
required validation.- Chain of validation in inputs for internal validations too.
InputGroup
output width.SocialMediaIcon
icon token acquisition for CSS and separation of design tokens.Profile
image fallback.Navigation
responsiveness.AvatarList
slotted overflow.- Performance improvements when using images.
- Fixed sizing issues in iOS with boolean inputs.
- Range errors in
DateInput
datetime-local
type. - Size pixel adjustments in inputs and buttons.
0.5.20
New testing processes added in the pipelines.
📄 Documentation:
- Separated section for Rebranding.
- Fixes in some playgrounds.
🆕 New features:
- Added
onValidated
event for WC inputs. - Default localization for default status texts of WC inputs.
ForwardedRef
added for React WC components.- Possibility or extending the collection or overwriting the sources of
Icon
,Pictogram
,Logo
andSmilingZ
. - Referenced React WC have now direct injection of complex attributes (not via HTML attributes).
- New helper functions for Date manipulation.
- Added
⚠️ Breaking changes!:
Alert
no longer needsnone
for icon attribute.- Components using internal buttons (
ActionCard
,ArticleCard
,Promo
andEmptyState
) rely now on theactions
slot. Props have been removed to simplify components and make them more suitable for SSR. Events are now handled directly in the slotted button - Action icon of
ActionCard
uses now theaction-button
slot. Events are now handled directly in the slotted button. DateInput
now manages internally the standard formats depending on theinput-type
. So the model returned will follow the corresponding format too.
🪲 Fixes:
- Invalid state not being reset in WC inputs.
- Avoiding max depth JSON parsing if object is an Array in React WC wrappers.
className
issues in React WC wrappers.- Some fixes in visuals of components.
- Fixes in
Select
use, bugs when usingwith-search
, and performance. - Better
reset()
behavior.
0.5.21
- 🪲 Fixes:
- Incompatibility between React
ref
andforwardRef
in WC wrappers with direct property injection. onSearch
event inSelect
exposed.- Better typing for
ref
in WCs.
- Incompatibility between React
0.5.22
- 🪲 Fixes:
- Missing import in React WC wrappers.
0.4.0
📦 New packages:
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.
- Angular components are no longer available under
🆕 New features:
- Angular Components can now access the WebComponent using
templateRef
. isDirty
,isInvalid
, andisTouched
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.
- Angular Components can now access the WebComponent using
🧩 Revamped components:
🧩 New components:
🪲 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.
- Type issues in
0.4.1
🆕 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.2
🆕 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
andStage
can now modify theirShapes
or remove them. ZurichImage
values in theimage-src
attributes of web components can be used.- You can now define
quality
androtate
for theZurichImage
. 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
- WC
0.4.3
- 🪲 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.4
📄 Documentation:
- StackBlitz integrations examples.
🆕 New features:
- New presentation video.
ArticleCard
andActionCard
components have now thepre-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 docsSegmentedControl
click hit-box.SegmentedControl
dark mode.Sidebar
background for dark modeTabs
dark mode selected- WC
Inputs
initial invalid only whenrequired
and dirty or explicitly invalid. - Internal states for
CheckboxGroup
andSelect
. Shapes
fixed for glitches and themes.- Fix default
Shapes
theme forStage
andPromo
. 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.
- Some fixes fix
0.4.5
More images from BlueRoom available, and added to the Figma plugin (+350).
📄 Documentation:
- Info about the available slots in the WebComponents.
⚠️ Breaking changes!:
🆕 New features:
- Components adjustments for SSR.
custom-str
attribute in WebComponents for easier config.popover
APIs forButton
andCard
.- Slotted options for
Select
. - Slotted summary for
Accordion
. Button
as-submit
option.cross-origin
attribute added for images.- Self closing
Sidebar
andModal
. icon
forTag
.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 onmin
set.Promo
shape rendering and narrow configuration fixed.help-text
forInputs
dark mode.- Dark theme for
AvatarList
,Toast
andAlert
. Checkbox
&Switch
double opacity issue for disabled fixed.
- Review of the
0.3.0
📄 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 asSmilingZ
.- APIs of
SmilingZ
andLogo
have changed. - Easier CSS implementation for
SafeSpace
andSegmentedControl
.
- In order to ensure consistency, respect the standard and avoid rendering problems, we have transformed all the attributes and properties casing to
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:
🪲 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
, andProfile
. - Fixed
Shape
flip in WebComponents. - Fixed
SegmentedControl
errors.
0.3.1 and 0.3.2
- Fixed issue with the DNS address pointing to the stage environment.
0.3.3
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.
⚠️ Breaking changes!:
Badge
z-color
attribute changed tofill
.Profile
profile-status
attribute changed tostatus
.Profile
,Avatar
, andAvatarList
CSS implementations are simpler and easier.
🪲 Fixes:
0.3.4
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
implementchecked
now, with prevalence overvalue
.
- Boolean
🪲 Fixes:
0.3.5
- Fix type dependency for
@zurich/dev-utils
.
0.3.6
📄 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
, andSafeSpace
for require explicitonerror
callbacks if scripts is used.- Scripts added for
@zurich/css-components
to ease the use of some components like theSlider
orTextarea
and add extra functionality toInputs
.
- Validation mechanisms for
⚠️ Breaking changes!:
🪲 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.
- Fixes in layouts of all
0.3.7
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
ofAccordion
changed toconfig
.state
ofToast
changed toconfig
.icon-left
ofButton
changed toicon-right
.RadioSelect
CSS version uses nowfieldset
.Dropdown
renamed to toActionMenu
.Button
alert
variant removed.SafeSpace
config
attribute order changed.Tag
color
attribute changed tofill
.
🆕 New features:
wide
option forButton
.autocomplete
forInputs
.icon
forTextInput
andNumberInput
.- sizeable
Pictogram
. - Casters and manipulation helpers in
@zurich/dev-utils
. - Editable components.
min
andmax
forDateInput
andTimeInput
.
🪲 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 for
Checkbox
andSwitch
. - General fixes for
ArticleCard
andActionCard
. checked
for WC version ofBooleanIcon
,Checkbox
andSwitch
.
0.3.8
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 for
PasswordInput
added. - Test approach for BlueRoom integration.
Button
has now link capabilities.
⚠️ Breaking changes!:
SegmentControl
model uses nowstring
.Icon
z-icon
property partially changed toicon
(for optimization).icon
attributes foroutlined
version changed from:outline
to:line
for optimization.Pictogram
dark
version is set in thepictogram
property and not fromz-theme
.- CDN outlined icons now end with
--o.svg
instead of--outline.svg
for optimization. m
is now defaults size forInputs
.
🪲 Fixes:
0.3.9
- 🪲 Fixes:
- Fixed
Illegal constructor
issue with Angular components. - Fixed
z-theme
andeditable
for Angular components. - Fixed
PasswordInput
label behavior. Accordion
custom tokens.
- Fixed
0.3.10
Docs using Vitepress 1.1.0.
⚠️ Breaking changes!:
- Angular components using two-way data binding change the name of the property from
value
tongModel
to match the standard.
- Angular components using two-way data binding change the name of the property from
🪲 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.2.0
📦 New packages:
📄 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.
- Vue components use
🪲 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.2.1
🧩 Component implementations for
@zurich/react-native
:⚠️ Breaking changes!:
- React components use
Zr
as prefix to avoid recursion and render problems.
- React components use
🪲 Fixes in
@zurich/web-components
:- React inputs
onChange
andonInput
callbacks properly working for all.
- React inputs
0.2.2
🧩 Component implementations for
@zurich/react-native
:🪲 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.3
🆕 New features:
- You can now use JSX Elements inside some of the attributes of
@zurich/web-components/react
components. Check the info here
- You can now use JSX Elements inside some of the attributes of
📦 New packages:
🪲 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
andSafeSpace
components with the fallbacks. - Dark mode for
Logo
andIsotype
components. - Fixed
Rating
component. - Several events fixed for input components.
0.1.0
🏗️ 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 UAT (stage) environment under:
📄 Documentation.
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:
🧩 Revamped components:
🧩 New components:
0.1.1
🪲 Fixes:
- Fixes with the CDN and the routing
- Major fixes with the versioning of packages
0.1.2
🪲 Fixes:
- Solving Angular rendering in deployment environments
- Fix
SegmentedControl
for frameworks. - Fix
disabled
forNumberInput
- Fix some theming issues for inputs.
- Fix documentation typos.