Skip to main content

6 posts tagged with "major"

View All Tags

Version 6.0.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

✨🌈 Welcome Chameleon 6.0.0!​

It may look the same on the surface, but behind the scenes, we’ve done some serious housekeeping. We’ve refactored all of our visual assets — logos, icons & illustrations — so everything’s now neat and easy to find. On top of that, we took out the trash by removing some long-deprecated code.

All in all, think of it as a refreshing spring cleaning.

Be sure to check out our migration guide to help guide you through the process of upgrading.

🎨 Themes​

  • 💥 BREAKING: The main reason for this major version: a complete refactor of all of our visual assets. Be sure to check our migration guide.

🚀 New Feature​

  • An easy composable implementation to retrieve available SubThemes and Themes. !1718

🏠 Internal​

  • Updates to dependencies
  • Remove some unused config files. !1638
  • Removed ChCard component in Kotlin. !1673
  • We’ve significantly improved our workflow by automating asset downloads directly from Figma, boosting efficiency and greatly reducing the chances of human error. This is a solid step forward in making things smoother and more reliable. !1427
  • 💥 BREAKING: Remove deprecated code and align some API's. Be sure to check our migration guide as a guide to these breaking changes. !1669 !1685 !1708 !1712

Version 5.0.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🎨 Themes​

  • Changed the default date time format for all MHNR brands. !1491
  • Updated some teaser font-weights for all MHNR brands. !1476
  • Fixed an a11y issue for chameleon-theme-hbvl by changing highlight.dateTime token. !1492
  • Made some small visual changes to chameleon-theme-co and chameleon-theme-lw teaser font styling. !1481

🚀 New Feature​

chameleon-react​

  • Configurable locale: you can now pass a locale to <Datepicker /> and <DateTime />. !1105
  • Redesigned <ListTeaser /> date-time alignment. !1493

chameleon-kotlin & chameleon-swift​

  • Dynamic subtheming! For the purpose of AB testing, we now allow you to create your own subthemes at runtime. This introduces a 💥 BREAKING change for chameleon-kotlin. Be sure to check out the migration guide. !1447
  • The List component now has the ability to pass an icon with a color. !1497

🐛 Bug Fix​

chameleon-react​

  • Fixed an issue with the inset prop for <DefaultTeaser />. !1477
  • Added the text-transform CSS rules for teaser taxonomies. !1474
  • Fixes an issue with sizing of premium logos. !1483
  • Fixes an issue with sizing of images in horizontal <DefaultTeaser/>. !1484
  • Fixes an issue with alignment/word-breaking in some teaser taxonomies. !1490

🏠 Internal​

  • Updates to dependencies
    • @percy/cli: 1.27.7 -> 1.28.0
    • apple/swift-log: 1.5.3 -> 1.5.4
    • compose-activity: 1.8.0 -> 1.8.2
    • compose-bom: 2023.10.01 -> 2024.02.00
    • compose-navigation: 2.7.5 -> 2.7.7
    • kotlin-android: 1.9.20 -> 1.9.22
    • kotlin-compiler-extension: 1.5.4 -> 1.5.8

Version 4.0.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

✨🌈 Time to shed that old skin: welcome Chameleon 4.0.0!​

Remember our old design token setup? Our new major version is a complete overhaul of our design token setup, making the old one look like a chameleon in a black and white movie. #NewSkinWhoDis?

Be sure to check out our migration guide to help guide you through the process of upgrading.

🎨 Themes​

  • 💥 BREAKING: We’ve completely overhauled our design token setup. Don't worry, we’ve also provided a way to keep using the legacy setup for now. Be sure to check out our migration guide. (In the process of doing so, there have been numerous little tweaks to a lot of themes.)

🚀 New Feature​

  • <a> tags are able to look like buttons now when placed in <RichContent /> component. !1104
  • Added a pickerFooter prop to our <DatePicker /> component. !1071
  • Added a timeZone prop to our <DateTime /> component. !1014

🏠 Internal​

  • Updates to dependencies
  • Our design tokens are now synced with Figma Tokens Studio.
  • Total revamp of chameleon-scripts.
  • Lots of performance updates to our CI setup and a lot more yet to come.
  • Switched from yarn to pnpm package manager. !1098
  • Switched from jest to vitest testing library. !1098
  • Drastically improved our CI workflow for Percy snapshot testing !1074
  • Started stylelinting our .css files. !1028
  • Migrated to storybook v7 !949

🦦 Other​

  • 💥 BREAKING: in the process of upgrading to our new setup, there have been numerous tweaks to all of our chameleon-react components. Be sure to check out our migration guide.
  • 💥 BREAKING: regarding fonts, our web packages will only contain .woff2 files from now on.
  • 💥 BREAKING: chameleon-react and chameleon-swift have had to make some changes, again, please check out our migration guide.

Version 3.0.1

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🐛 Bug Fix​

  • For chameleon-theme-lw, some text color tokens were wrongly mapped internally. In practice this doesn't really change any values, as coincidentally, the underlying values happened to be correct. !601
  • Small improvement in <Stepper /> responsiveness. !684, !734
  • Fixes a font issue with "Nuacht Serif Headline" in Windows environments for chameleon-theme-indo and chameleon-theme-beltel. !709
  • Fixed the font-weights in chameleon-theme-ds. !713
  • Fixed: <Accordion> children aren't allowed to be null or undefined when they're not the sole child. !748
  • Fix logos for chameleon-theme-vl. !770
  • Fix favicons for chameleon-theme-lt. !770

🚀 New Feature​

  • 🚀 Welcome to the Chameleon family: chameleon-swift! Beginning with this release we also publish a Swift library for Chameleon via Swift Package Manager. Note, this is a 💥 BREAKING change as the lib/ios output folder in all NPM packages has been removed. !490
  • We’ve added success states for some form components in chameleon-react: <Textarea> and <Select>. !671, !682
  • We’ve added an error state for <Switch> in chameleon-react. !675
  • Some new icons have been added: plate, plate-fill, plate-half, star-half (for ratings) and play-fill (for podcasts). !698, !757
  • We updated the <Accordion /> component. Notably:
    • it now uses <details> > <summary> under the hood
    • an onChange callback prop has been added (called whenever another item inside gets expanded)
    • it now has a better focus style !631
  • We’ve added <table> styling in <RichContent> for chameleon-react. !740
  • There's a new component in town: <Dropdown>! A Dropdown is a contextual menu that you can anchor to a a component of your choosing (usually a Button). It uses a WideList component under the hood. 💥 BREAKING change: to accomodate this new component we’ve made 2 changes to WideList:
    • the clickable prop no longer adds a <ChevronForward /> icon by default to show that it is clickable.
    • the icon and iconColor props have been removed and 2 new props are added: iconLeft and iconRight. !740

🎨 Themes​

  • <BrandedHeading /> actions are no longer hidden on smaller screens for chameleon-theme-lw, chameleon-theme-lt, chameleon-theme-co, chameleon-theme-tc and chameleon-theme-hub !648
  • Welcome chameleon-theme-vl, our chameleon implementation for Virgule. !685
  • Sending some extra love to chameleon-theme-ds:
    • Updated the illustrations to make them more branded
    • Tweaked design tokens !742, !725
  • Updated the foundations for chameleon-theme-co and chameleon-theme-lt. !744
  • Updated the external icon for chameleon-theme-hub, chameleon-theme-vl, chameleon-theme-lw, chameleon-theme-lt, chameleon-theme-co and chameleon-theme-tc !744, !791
  • Updated some font-sizes/line-heights & the design of the <BrandedHeading> for chameleon-theme-indo and chameleon-theme-beltel. !754, !764
  • Updated the fonts for chameleon-theme-gva-summer-2020. All fonts have been reexported from Monotype and we’ve now included a bold weight for the primary and secondary font. !765
  • Update brand & brand-fill icon for chameleon-theme-ds !770, !788
  • Update and add star ratings icons for chameleon-theme-nb, chameleon-theme-gva and chameleon-theme-hbvl !770
  • Adds missing BrandNameWhite logos for chameleon-theme-co and chameleon-theme-lt !803
  • Updated the alias.focusColor token for chameleon-theme-mh !785

🏠 Internal​

🦦 Other​

  • 💥 BREAKING: in <AutoComplete /> the deprecated onSuggestionSelected prop is now removed (use onSelect instead). !626

  • 💥 BREAKING: in <Choice /> we’ve renamed the caption prop to message. Update your implementations from <Choice caption="..." /> to <Choice message="..." /> !662

  • 💥 BREAKING: in <IconButton /> the deprecated name prop is now removed (use icon instead). !626

  • 💥 BREAKING: the deprecated <Image /> component is now removed. !626

  • We changed the look of <Choice type="radio" /> a little bit. It's now clearer that this has radio functionality. !634

  • The calendar icon in <DatePicker /> moved to the right of the input field. !636

  • We’ve made some improvements to the design of sortable tables which makes things more clear and accessible. !677

  • 💥 BREAKING: Fixed the readOnly prop on <DatePicker> in chameleon-react and added a pickerInputOnly prop. !732

  • 💥 BREAKING: we’ve renamed all our theme packages to be compliant with Mediahuis' Entity & Brand Codes. So starting with this version number, you may need to install a different package. A short summary:

    • chameleon-theme-gva-summer-2020 -> chameleon-theme-gva

    • chameleon-theme-hbvl-summer-2020 -> chameleon-theme-hbvl

    • chameleon-theme-hmc-ge -> chameleon-theme-ge

    • chameleon-theme-hmc-hd -> chameleon-theme-hd

    • chameleon-theme-hmc-ld -> chameleon-theme-ld

    • chameleon-theme-hmc-nhd -> chameleon-theme-nhd

    • chameleon-theme-hmc-yc -> chameleon-theme-yc

    • chameleon-theme-nb -> chameleon-theme-nb-legacy

    • chameleon-theme-nb-winter-2021 -> chameleon-theme-nb

    • chameleon-theme-swcom -> chameleon-theme-sw

    • chameleon-theme-wort-de -> chameleon-theme-lw

    • chameleon-theme-wort-en -> chameleon-theme-lt

    • chameleon-theme-wort-pt -> chameleon-theme-co

    • chameleon-theme-wort-tc -> chameleon-theme-tc

      !761

Version 2.0.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🚀 New Feature​

  • 💥 BREAKING: We’ve completely overhauled our CSS architecture in chameleon-react and now use vanilla CSS instead of SCSS. This also means we now use CSS Custom Properties instead of SCSS variables! (An SCSS output of all design tokens still remains available for you to use for the time being.) To be able to use it, you now have to include a little PostCSS configuration to make it work. !395.
  • max breakpoints: we’ve added some extra breakpoint design tokens. Each breakpoint now also has a 'max' version with a value of 1px less than the next breakpoint. This way, you have a breakpoint on each end of a viewport size. Now, when you are using @media (max-width: ...) you can use these new breakpoints! The <Hidden /> component now takes this into account as well. (which is technically speaking also 💥 BREAKING)

🎨 Themes​

  • Enlarged the font-size for the small <BrandedHeading /> from 18px to 24px in chameleon-theme-dl !479
  • Added a logo variation brand-icon-newspaper to chameleon-theme-hbvl-summer-2020, chameleon-theme-gva-summer-2020, chameleon-theme-nb-winter-2021 !480

🏠 Internal​