Skip to main content

Version 3.1.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🐛 Bug Fix​

  • In chameleon-swift the system italic font is now actually italic, it was incorrectly shown as regular. !842

🎨 Themes​

  • For chameleon-theme-indo, the brand-plus-main and brand-plus-main-white logos have been updated !848
  • A new illustration named region has been added !847

🏠 Internal​

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.4.1

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🐛 Bug Fix​

  • For chameleon-theme-mh and chameleon-theme-az, icons were not properly processed, resulting in icons that didn't inherit the fill color. !601

🎨 Themes​

  • We gave some extra love to chameleon-theme-mh by tweaking the design of some of its components. !597

🏠 Internal​

Version 2.2.0

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🚀 New Feature​

  • We’ve added a showOnFocus prop to our <DatePicker /> component. This prop controls whether the calendar should show when the input receives focus. !520
import { DatePicker } from '@mediahuis/chameleon-react';

<DatePicker
  label="Datepicker with showOnFocus"
  value={new Date()}
  showOnFocus={true}
/>;
  • Typescript baby steps: we’ve added a type definition file tokens.d.ts that contains type definitions for each theme's tokens.js file. !518
  • We’ve updated the UX for <AutoComplete />: Hitting the TAB key when an item is highlighted, selects that item. !525

🏠 Internal​

  • Updates to dependencies:
  • We introduced a solution to generate image placeholders on the fly with SVG in our Storybook stories. This way we no longer have to rely on an external service (such as placeholder.com) which results in our Percy snapshots being a little more robust. !533

Version 2.1.1

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🚀 New Feature​

  • We’ve added size adjusted fallback fonts for each brand to try and reduce CLS. !472
  • The <Placeholder /> component now accepts any value for the aspectRatio prop in the form of X:Y, so for example <Placeholder aspectRatio="4:5">, so you are no longer stuck with the predefined aspect ratios. !502

🎨 Themes​

  • We welcome 3 new brands to Chameleon in this release!
    • Aachener Zeitung: chameleon-theme-az. !498
    • Telegraaf: chameleon-theme-tel. !484
    • Mediahuis Group: chameleon-theme-mh. !491
  • chameleon-theme-ds received a well deserved rebranding with new fonts, colors, logos and more! !489

🐛 Bug Fix​

  • We’ve fixed the fact that actions in <BrandedHeading /> in chameleon-theme-swcom were hidden since our CSS Custom Properties '2.0.0' release. !496
  • We’ve fixed the Nuacht Serif Headline font not appearing for chameleon-theme-indo and chameleon-theme-beltel as well as slightly adapting their designs for the <BrandedHeading />. !508

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​

Version 1.15.1

Thomas Mattheussen
Thomas Mattheussen
PO & Lead Developer

🎨 Themes​

  • Fixed a visual glitch in the favicons of chameleon-theme-hbvl-summer-2020 (more specifically in the u of 'Nieuws'). !465
  • Updated the color.primary.40 value for chameleon-theme-dl from #41A7E5 to #2DA2E3 !464

🐛 Bug Fix​

  • Fixed an issue with the inputmask dependency that arose after our big tree shaking refactor. !460
  • Fixed an issue where the Android output file tokens-integers.xml contained float values. !463

🏠 Internal​

  • Updates to dependencies: