Codey

Appearance

Changelog ​

14.0.0 ​

This is the last version of codey-style and only contains a changelog. version 14 will not be published to npm as it is deprecated.

Main migration steps:

  • Install @xerius/codey-tailwind package and convert the plugin usage to the preset setup.
  • Install @xerius/codey-assets to access the assets.
  • Remove the @xerius/codey-style package from your project.

Take a look at the changes below for details about the last changes.

Major Changes ​

  • 342d45d: Bump of Node engine to >=18.0.0

  • 95f234f: XerNavBar and XerNavBarItem: Removed styles in favor of tailwindcss styling.

  • d6c9308: XerLink: Removed styles in favor of tailwindcss styling.

  • ec4a8fb: XerButtonGroup: Scss styling has been removed in favor of the use of Tailwind Utillity classes in the component.

  • 3269079: XerIcon: Removed styling for icon component.

    To Migrate:

    • Use the @xerius/codey-tailwind package and setup Tailwind CSS in your project.

  • 342d45d: Removal of all Tailwind related config & utilities.

    To Migrate:

    • Install @xerius/codey-tailwind package
    • Convert the plugin use to the preset setup.

    View the @xerius/codey-tailwind documentation for more information.

  • 77f0f64: XerDivider migrated from Codey Style Theme to Tailwind.

  • 3959df0: XerStepIndicator: removed styling

  • 6bcf317: XerTable: Removed styling in conversion to tailwind.

  • 833c523: XerModal: Styling has been removed and the component is update to use Tailwind and Prime Preset.

  • 49afd90: XerOnboarding: Styling has been removed and the component is update to use tailwind.

  • 3efcdc6: XerTabs: Removed styling in migration to PrimeVue tailwind styled component.

  • 73f5a30: Card remove the card styling classes from the Codey Style package.

    The removed classes:

    css
    .card .card--animated .card--xxxl .card--xxl .card--xl .card--l .card--s .card--xs;

    To migrate:

    • Remove the card classes from your HTML elements.
    • If needed, use Tailwind utility classes to achieve the same layout.

  • 342d45d: Side Sheet: Remove XerSideSheet component for XerSidebar.

  • 93e65f1: XerBreadcrumb migrated from Codey Style Theme to Tailwind.

  • ae15743: XerOptionInput: Removed styling, component is deprecated, check @xerius/codey-component for migration.

  • e5fbeb2: FileUpload: removed style overrides. These are now included in @xerius/codey-components.

  • db6d9de: XerEllipsis: Styling has been removed and the component is update to use tailwind.

  • 342d45d: Tailwind Config: Screen breakpoints have been adjusted to new design standaards.

    To Migrate:

    • Verify your responsive design is functioning correctly.
    • Ensure you implemented responsive design with a mobile first approach as recommended by Tailwind.

  • 2e3d460: Removed assets, migrate to @xerius/codey-assets.

Minor Changes ​

  • 342d45d: Add color stroke default

  • 342d45d: Add svg assets for bubble button

  • 342d45d: Tailwind Config: Add missing default min-h properties.

  • 342d45d: Refactor the styling for supporting Prime Vue component styling

  • 342d45d: Tailwind Config: Add tokens for layer states on hover, active, focus,...

    Use these tokens to style the layer states on hover, active, and focus depending on the variant colors.

  • 342d45d: Tailwind Config: Add font theme setup

13.5.0 ​

Minor Changes ​

  • 2f6d2acf7: Assets: Added existing pictograms to images/xerius to prepare for theme support within assets.
  • 2f6d2acf7: Images: add emily-blij-circle for myfamily

13.4.0 ​

Minor Changes ​

  • 43e9ce6d1: XerHeader: Allow usage of header image instead of background and setting blobs when required

13.3.0 ​

Minor Changes ​

  • 1c6888af2: Add myfamily logo to the assets.

13.2.0 ​

Minor Changes ​

  • dfbf9a639: Add themable colors support

13.1.2 ​

Patch Changes ​

  • 3a132246f: Update styling for the Option Input lists with items as containers

13.1.1 ​

Patch Changes ​

  • e6406cc9f: XerSideSheet: fix getting behind the backdrop.

13.1.0 ​

Minor Changes ​

  • 9eb923d7a: XerTextfield: Tweak scrollable option styles

Patch Changes ​

  • 43aac15a4: Add list-style:none to make sure the list has no bullets even without Tailwind reset

13.0.0 ​

Major Changes ​

  • c634c15f3: Migrate to tailwindcss 3 and added config helper functions.

    Migration:

    Remove the links towards the tailwind.min.css files from the @xerius/codey-style package.

    This can be found for example in the main.js file:

    js
    ...
import './../build/tailwind.min.css'
...

    Or in the styles.scss file:

    css
    ...
@import '../build/tailwind.min.css';
...

    After Updating/Installing Tailwind v3 use the useTailwindConfig and usePostCssConfig helpers to configure Tailwind for your application. Navigate to the tailwind.config.js file to configure Tailwind. Import the useTailwindConfig helper function. This function will return a basic Tailwind config provided by the Codey team.

    js
    // tailwind.config.js
import { useTailwindConfig } from "@xerius/codey-style";

module.exports = useTailwindConfig();

    In our case we also need to customise the Post CSS config a bit. For this you can use the usePostCssConfig helper function from the @xerius/codey-style package. And use it to set the Post CSS config.

    js
    // postcss.config.js
const { usePostCssConfig } = require("@xerius/codey-style");

module.exports = usePostCssConfig();

    More information can be found in the Codey docs.

    Build pipeline template change:

    It's now required to use the v02.yml stage pipeline template. This has to be changed in the project's Build.yml file under stages.

    yml
    stages:
  - template: Templates/Pipelines/Stages/BuildSelfContainedVueWebApp/v02.yml@templates
    ...

    Since the v02.yml template doesn't need the frontendBuildTailwind parameter, you should remove it from the parameters list.

    yml
    parameters:
  ...
  frontendBuildTailwind: true
  ...

    example:

    yml
    stages:
  - template: Templates/Pipelines/Stages/BuildSelfContainedVueWebApp/v02.yml@templates
    parameters:
      frontendWorkingDir: Xerius.AanvraagDetail.Client\src\App
      frontendTestRunTitle: xerius-aanvraag-detail-app
      frontendNodeVersion: "18.*"
      bffSolution: Xerius.AanvraagDetail.Client\src\Xerius.AanvraagDetail.Client.BFF.sln
      bffProject: Xerius.AanvraagDetail.Client\src\BFF\Xerius.AanvraagDetail.Client.BFF.csproj

Minor Changes ​

  • c47bf8dac: XerMultiSelect: Tweak styles and add missing search icon override.
  • 253cde0d6: Add new pictorgrams: form, facturatiegegevens and contactgegevens.
  • 441ee7fd2: Add Prime Multi select component.

Patch Changes ​

  • a897a6f7a: Update exports to support TS 5 ModuleResolution: bundler.
  • a1aa205bc: Update config with safelist of colors.
  • 11d16e9ff: XerMultiSelect: tweak filter icon style.
  • a897a6f7a: Add ignoreDeprecations to tsconfig.json to silence warnings of deprecated features used by Vue base tsconfig.
  • 309a57de2: Fix merge of safelist with pattern.
  • 61cde93da: Enhance performance by cleaning up safelist pattern for tailwind config.

12.0.0 ​

Major Changes ​

  • 69142c9ae: Replaced XerAlert and XerAlertStack with PrimeVue Toast component, witch is exported as XerToast. The documentation for the Toast component can be found here.

  • 3cf9790fb: tailwind.overrides.js renamed to tailwind.overrides.cjs as the lib has changed to type = "module".

  • 619c8df05: Convert build scripts to ESM so they can be run by packages of type: "module".

    For future compatibility it is best to change you application type to module as well.

Minor Changes ​

  • 067cf8a86: Use CDN_URL var from codey-internal package instead of variable file
  • 612180696: Add getCodeyImageUrl to get different img urls pointing to our cdn.
  • cf0a6607a: Add slow rotate css class

Patch Changes ​

  • 619c8df05: Add missing dependencies that are required when running the build scripts by the consumers.
  • eb4a25447: Fix using animation style attribute
  • 6a71a9c82: fix forgetting update package-lock
  • cf72461d3: Extend package.json exports list to be backward compatible when it wasn't there.

11.4.0 ​

Minor Changes ​

  • 982c93f0: Add style prop variant for side sheet

Patch Changes ​

  • f7866c67: Fix z-index of date picker being to low against other components
  • 57f38750: Fix onboarding button width on mobile

11.3.0 ​

Minor Changes ​

  • 31a937ab: Add cross grey pictogram

Patch Changes ​

  • 5a24d89a: Fix side sheet behavior
  • 960849be: Fix full width was clickable of close button

11.2.0 ​

Patch Changes ​

  • 8055b6d2: Fix z-index of side sheet
  • c10d0722: Fix version of Swiperjs to latest supported by vue awesome swiper
  • 72256834: Fix option input styling
  • f0b875f2: fix add word-break styling
  • cfd5d031: Fix side sheet scroll

11.1.0 ​

Minor Changes ​

  • d059fd06: Add clock-late pictogram.

11.0.0 ​

Major Changes ​

  • 23f2a974: postcss@8 is now a required peer dependency
  • 096f0504: Required node version is now >= 14
  • 63cdece0: Reset version to new baseline

Minor Changes ​

  • 27477a82: Added phone-ringing pictogram

Patch Changes ​

  • 69e3dfba: Fix footer background image size
  • 8fe27061: Change codey-constants vars to local variables.js file
  • bf2e4992: Force patch update after changeset config change: updateInternalDependents: always
  • 3499b69f: Fix header partner logo uitlijning
  • Updated dependencies [baa5c1d1]
    • @xerius/codey-utils@11.0.0

Previous versions ​

6.2.2 ​

  • Bugfix: fixes placement of content footer blob

6.2.0 ​

  • Feature: updates secondary-1 and secondary-3 color

6.1.5 ​

  • Bugfix: tabs border visual fix

6.1.0 ​

  • Feature: adds styling for table filtering

6.0.2 ​

  • Bugfix: xerius logo is now correctly rendered on tablet (header)

6.0.0 ​

  • Feature: Tailwind upgrade to v2

5.0.4 ​

  • Feature: adds horizontal prop and class to Tabs component

5.0.1 ​

  • Bugfix: peer dependencies

5.0.0 ​

  • Chore: now using cdn.xerius.be as CDN URL

4.3.12 ​

  • Chore: adds minimum node version check (v12+)

4.3.11 ​

  • Bugfix: side sheet is now scrollable

4.3.5 ​

  • Assets: add pom icon

4.3.1 ​

  • Improvement: changes styling of header partner blob
  • Assets: adds filter icon

4.3.0 ​

  • Feature: adds popover styling

4.2.0 ​

  • Feature: adds XXXL font size and heading

4.1.0 ​

  • Feature: adds styling for side menu

4.0.0 ​

  • Feature: adds the navigation option to the header styling

3.22.0 ​

  • Feature: adds partner variant to header

3.21.0 ​

  • Assets: adds new icons

3.20.2 ​

  • Bugfix: card animation is now optional
  • Improvement: button animation is now more fluent

3.20.0 ​

  • Feature: changes tab styling based on feedback

3.19.0 ​

  • Feature: adds card hover states

3.18.0 ​

  • Feature: adds styling for using icons in the modal

3.17.0 ​

  • Feature: reworked table styling

3.16.0 ​

  • Feature: adds onboarding pattern styling

3.15.0 ​

  • Feature: adds table styling

3.14.0 ​

  • Feature: adds pagination styling

3.12.0 ​

  • Feature: button group component styling

3.11.0 ​

  • Feature: tabs component styling

3.10.0 ​

  • Feature: styling overrides for the slider

3.9.0 ​

  • Feature: adds class for animating the alert

3.8.0 ​

  • Feature: adds Xerius favicon images

3.7.0 ​

  • Feature: Password strength meter styling

3.6.0 ​

  • Feature: Alert stack styling and alert improvements

3.5.0 ​

  • Feature: button now has a new variant 'no-styling'
  • Improvement: modal now uses a button as close icon to be more semantically correct

3.4.0 ​

  • Feature: fonts are now fetched from the CDN

3.3.3 ​

  • Assets: adds xerius-logo and xerius-logo-color

3.3.2 ​

  • Assets: adds document-download icon

3.3.0 ​

  • Feature: added styling for the textarea counter in error state
  • Bugfix: textarea counter will now also appear disabled when the textarea is disabled

3.2.0 ​

  • Feature: added file upload styling (was previously in components)

3.1.0 ​

  • Bugfix: revert of link should not show hover styling etc. when it does not have an href attribute
  • Assets: 5 new pictograms (winning-cup, wondernemerscan, 401, 404, gavel)
  • Assets: 4 new icons (account, info, eid, eid-color)

3.0.4 ​

  • Bugfix: disabled input button now shows icon again

3.0.3 ​

  • Bugfix: tailwind.overrides.js now supports env variables

3.0.1 ​

  • Bugfix: codey-style now contains build files

3.0.0 [Breaking] ​

  • Refactor: xerius.min.css has been renamed to codey.min.css
  • Feature: the import of the setup stylesheet is now seperate from the Codey stylesheet
  • Feature: Tailwind override has been made optional with more default values
  • Feature: icon element selector has been replaced with the icon class selector
  • Feature: added new modal pictogram modifier class
  • Bugfix: added .xer-codey class to be used on the html tag to fix the remaining style leakage.

2.6.0 ​

  • [Unintented breaking] Bugfix: link should not show hover styling etc. when it does not have an href attribute
  • Assets: 1 new pictogram (laptop-sad)

2.5.4 ​

  • Bugfix: minus icon is now visible
  • Bugfix: add cursor pointer to links

2.5.3 ​

  • Assets: new browser icons

2.5.0 ​

  • Assets: 1 new pictogram (heart-healthcare)

2.4.0 ​

  • Feature: added header class to the application shell template to improve style on mobile and desktop
  • Assets: 1 new icon (external-link)
  • Assets: 1 new pictogram (under-construction)

2.3.0 ​

  • Feature: Tailwind update 1.6.2

2.2.3 ​

  • Bugfix: adds _versions.scss, so cookiebot can also build sass

2.2.2 ​

  • Refactor: non floating textfield options now have z-index: auto as they are part of the DOM

2.2.1 ​

  • Bugfix: fixes issue when theme files were not updated

2.2.0 ​

  • Feature: added lineheight 0 en spacing 0 (margin, padding...) tailwind classes
  • Feature: mobile small now uses a smaller root font size

2.1.10 ​

  • Bugfix: double scroll container has been removed
  • Bugfix: application shell template main section no longer has rounded corners on mobile
  • Bugfix: application shell template main section takes the navigation bar into account to calculate its height
  • Bugfix: textfield icons now have the correct placement in regards to the input
  • Bugfix: text from a disabled input is now again visible on IOS
  • Bugfix: textfield height is now consistent
  • Bugfix: option input text no longer jumps around when (de)selected
  • Bugfix: show slideout backdrop on desktop

2.1.8 ​

  • Bugfix: application shell template main section has his rounded corners back on desktop

2.1.7 ​

  • Bugfix: correct spacing between textarea and error message

2.1.6 ​

  • Bugfix: documentation text now has the correct size
  • Bugfix: modal title now uses the heading-xl style
  • Bugfix: use correct values for breakpoints
  • Bugfix: add missing tailwind breakpoint (mobile-small)
  • Bugfix: backdrop color now has the correct value

2.1.5 ​

  • Refactor: replace array.flat with an alternative that does not require node 11

2.1.4 ​

  • Bugfix: checkbox check has now the correct position when using the option input container
  • Bugfix: disabled inputs no longer have an opacity when shown on Safari

2.1.3 ​

  • Bugfix: include correct tailwind configuration file

2.1.2 ​

  • Bugfix: now use correct spacing variable in textarea styling

2.1.1 ​

  • Bugfix: tailwind build also checks for nested paths now

2.1.0 ​

  • Feature: style for textarea component
  • Feature: style for scrollbar in webkit supported browsers
  • Feature: add "box-shadow: none" to tailwind classes
  • Bugfix: option input is now centered relative to the first line of the label
  • Bugfix: checkbox check is now the correct size

2.0.0 [Breaking] ​

  • Feature: new tailwind setup (tailwind.overrides.js)
  • Refactor: changes spacing naming (removes prefix 0)

1.9.0 ​

  • Feature: style for non floating textfield dropdown

1.8.0 ​

  • Feature: style for text with a text overflow ellipsis
  • Assets: 2 new icons (cross-circle, gear-circle)

1.7.0 ​

  • Assets: 3 new icons (plus, plus-circle, minus-circle)

1.6.0 ​

  • Feature: style for adding sub content/questions to the option inputs
  • Bugfix: option input is now shown next to the first line of a multiline label.

1.5.8 ​

  • Bugfix: checkbox check position with multiline label
  • Bugfix: option input width with multiline label
  • Bugfix: spacing between error and option input list

1.5.7 ​

  • Bugfix: Icon placement in multiline button.

1.5.6 ​

  • Bugfix: button placement next to input-label container that exceeds expected height

1.5.5 ​

  • Bugfix: run stylesheet build instead of CDN build

1.5.4 ​

  • Bugfix: adds xerius.min.css to NPM package

1.5.0 ​

  • Add navigation bar application template

1.4.0 ​

  • Add navigation bar style

1.3.0 ​

  • Add divider style

1.2.1 ​

  • Fix stylesheet references to assets
  • Remove unnecessary assets

1.2.0 ​

  • Add rotate animation
  • Fix cursor style for modal close

1.1.0 ​

  • Add the possibility for a question in an option input list

1.0.2 ​

  • Make button disabled attribute styling also work on link element

1.0.0 [Breaking] ​

  • Combine checkbox and radio-button styling under option-input
  • Separate files for each input type
  • No styling directly on inputs, a class is now needed
  • Error text on inputs now also need a specific error class according to the input type
  • Put button text styling in button file instead of typography file

0.2.2 ​

  • Minor fixes
  • Adds watch:stylesheet script

0.2.0 ​

  • Rename @xerius/codey-theme to @xerius/codey-style
  • Now also includes Codey scss source files

0.1.1 ​

  • Fixes relative path to utility function bug

0.1.0 ​

  • Adds support for passing an output path (see Info > API)
  • Changes build scripts
  • Fixes Node v9 support