Addons to Clarity Design System
Full Changelog: https://github.com/porscheinformatik/clarity-addons/compare/v17.0.0-RC.2...v17.0.0
Full Changelog: https://github.com/porscheinformatik/clarity-addons/compare/v17.0.0-RC.1...v17.0.0-RC.2
Execute the automatic Angular upgrade to version 17 as usual.
The upgrade will convert all @ signs to @ in the HTML templates. If you
don't use the automatic upgrade, you have to do this manually. This is a breaking change!
Make sure, that your angular.json contains all the necessary styles in the following order. The
following configuration is required:
"styles": [
"node_modules/@cds/core/global.min.css",
"node_modules/@cds/core/styles/theme.dark.min.css",
"node_modules/@clr/ui/clr-ui.min.css",
"node_modules/@porscheinformatik/clr-addons/styles/clr-addons-phs.min.css",
... any other styles
]
The theme.dark.min.css is optional. Have a look at the
Clarity Documentation for more information.
And finally, make sure, that your body element contains a cds-theme tag. This wasn't
mandatory until now, but it won't work without the setting (or if the theme is specified on the
html element).
This is a breaking change! The body elements must contain the tag:
cds-theme="phs" (or cds-theme="light").
With Clarity 16, there were some heavy changes to the default names of Tokens and Aliases (see Clarity Tokens). We tried to compensate this and updated all settings accordingly. As a result, some of our variable names have changed. If you are setting or overriding these variables, it may not have the desired effect anymore. The variables that are affected include:
--blue-light
--blue-mid
--blue-dark
--blue-darker
--turquoise
--turquoise-lighter
--turquoise-light
--turquoise-darkest
--green-turquiose
--green-lighter
--green-light
--green-light-mid
--green-mid
--green
--green-dark
--green-darkest
--red-lighter
--red-light
--red-dark
--red-darker
--red-darkest
--orange-dark
--orange-darker
--orange-light
--yellow-light
--black
--white
Previously, we used these variables to define the colors of our components and to set the colors of the theme. Now, our components use the Clarity color aliases directly and the theme just sets the color aliases of Clarity directly. As a result, defining and updating colors is much easier and more consistent and our components do work with all themes.
This is a breaking change! In order to override the color settings, follow the instructions of the Clarity Color documentation. All our components follow these default settings, now, and by overriding them, you can adjust the colors of both, Clarity and PHS components to your needs.
The override for some styles have been removed in order to align the PHS style with Clarity. This may cause some troubles.
This is a breaking change! Make sure, that your buttons inside a notification do have the class
alert-action assigned and reside within a <div class="alert-action">. Otherwise,
the buttons will have the wrong color.
Alerts did change in the same way as Notifications.
This is a breaking change! Like with Notifications, make sure, that the buttons inside an alert do have
the class alert-action assigned and reside within a <div class="alert-action">.
Otherwise, the buttons will have the wrong color.
The class "required" has been deprecated in favor of the class "clr-required-mark" by
Clarity. Usually, this class is used in combination with the <label> element, but it may be used
on other type of elements, too.
This is (soon) a breaking change! Replace the class="… required …" with
class="… clr-required-mark …" in your templates.
The styling of the calendar has been updated to match the Clarity style. This should not cause any troubles, but you may notice some changes to the colors. Events do have an hover effect, now.
The CSS definition of some of the variables has been moved to the element with the phs-theme instead of
the :root element.
The alignment of lines in the header of the weekly calendar has been fixed.
The Dark Theme of Clarity did not work anymore after the upgrade to Clairty 16. This has been fixed.
Updated the Colors page in order to provide an easy way to compare and test themes.
Full Changelog: https://github.com/porscheinformatik/clarity-addons/compare/v15.10.1...v16.0.0
Full Changelog: https://github.com/porscheinformatik/clarity-addons/compare/v15.10.0...v15.10.1
Full Changelog: https://github.com/porscheinformatik/clarity-addons/compare/v15.9.0...v15.10.0
[C3DEV-192490] fix clr.history limitation https://github.com/porscheinformatik/clarity-addons/pull/2091