Fix(web-twig): Add the missing `isOpen` prop to `Collapse` #653

adamkudrna · 2023-01-24T15:28:46Z

Sync snapshots with updated icons (to be removed once Test(web-twig): Update snapshots due to icons change #650 is merged)
Add the missing isOpen prop to Collapse

Once added in web, it must be also added in Twig.

netlify · 2023-01-24T15:29:22Z

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	`8c82bd0`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/63cff9302c12b9000957e50f

netlify · 2023-01-24T15:30:13Z

✅ Deploy Preview for spirit-design-system-demo canceled.

Name	Link
🔨 Latest commit	`8c82bd0`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-demo/deploys/63cff93074d82b0008fe4736

adamkudrna · 2023-01-24T16:56:37Z

Make sure icon snapshots are unchanged once Test(web-twig): Update snapshots due to icons change #650 is merged.

## Migration Guide The original `Header__*` classes no longer exist, and so does the original structure. Instead, new subcomponents replace the original nested classes. The most notable change is that the mobile and desktop navigation are now separate components that cannot be nested: - `Header` - `HeaderDialog` Formerly, the desktop dialog (holding the site navigation) was a responsive CSS modification of a shared HTML code. With the new `Header` and `HeaderDialog`, each component has its own instance of the navigation, i.e. the navigation code is duplicated. This is because `HeaderDialog` will become an independent component in the future. You may need to take additional measures so your SEO is not affected by the duplicate HTML code of the navigation. While there are important changes also in the HTML structure, the old class names in `Header` can be roughly mapped onto the new subcomponents like this: - `Header__mobileOnlyActions` → `HeaderMobileOnlyActions` - `Header__bar` → removed without a replacement - `Header__content` → removed without a replacement - `Header__dialog` → `HeaderDialog`, stands outside of `Header` - `Header__close` → removed without a replacement - `Header__actions` → `HeaderDesktopOnlyActions` - `Header__nav` → `HeaderNav` - `Header__navItem` → `HeaderNavItem` - `Header__link` → `HeaderLink` - `Header__text` → removed without a replacement Inside `HeaderDialog`: - `Header__close` → `HeaderDialogCloseButton` - `Header__actions` → `HeaderDialogActions` - `Header__nav` → `HeaderDialogNav` - `Header__navItem` → `HeaderDialogNavItem` - `Header__link` → `HeaderDialogLink` - `Header__text` → `HeaderDialogText` Please refer back to these instructions or reach out to our team if you encounter any issues during migration.

## Migration Guide ### HTML and CSS The original `Header__*` classes no longer exist, and so does the original structure. Instead, new subcomponents replace the original nested classes. The most notable change is that the mobile and desktop navigation are now separate components that cannot be nested: - `Header` - `HeaderDialog` Formerly, the desktop dialog (holding the site navigation) was a responsive CSS modification of a shared HTML code. With the new `Header` and `HeaderDialog`, each component has its own instance of the navigation, i.e. the navigation code is duplicated. This is because `HeaderDialog` will become an independent component in the future. You may need to take additional measures so your SEO is not affected by the duplicate HTML code of the navigation. While there are important changes also in the HTML structure, the old class names in `Header` can be roughly mapped onto the new subcomponents like this: - `Header__mobileOnlyActions` → `HeaderMobileOnlyActions` - `Header__bar` → removed without a replacement - `Header__content` → removed without a replacement - `Header__dialog` → `HeaderDialog`, stands outside of `Header` - `Header__close` → removed without a replacement - `Header__actions` → `HeaderDesktopOnlyActions` - `Header__nav` → `HeaderNav` - `Header__navItem` → `HeaderNavItem` - `Header__link` → `HeaderLink` - `Header__text` → removed without a replacement Inside `HeaderDialog`: - `Header__close` → `HeaderDialogCloseButton` - `Header__actions` → `HeaderDialogActions` - `Header__nav` → `HeaderDialogNav` - `Header__navItem` → `HeaderDialogNavItem` - `Header__link` → `HeaderDialogLink` - `Header__text` → `HeaderDialogText` ### JavaScript The deprecated `Header` JS plugin was removed in favour of the `Offcanvas` plugin. - `import { Header } from '@lmc-eu/spirit-web'` → `import { Offcanvas } from '@lmc-eu/spirit-web'` - `data-toggle="header"` → `data-toggle="offcanvas"` - `data-dismiss="header"` → `data-dismiss="offcanvas"` --- Please refer back to these instructions or reach out to our team if you encounter any issues during migration.

## Migration Guide ### HTML and CSS The original `Header__*` classes no longer exist, and so does the original structure. Instead, new subcomponents replace the original nested classes. The most notable change is that the mobile and desktop navigation are now separate components that cannot be nested: - `Header` - `HeaderDialog` Formerly, the desktop dialog (holding the site navigation) was a responsive CSS modification of a shared HTML code. With the new `Header` and `HeaderDialog`, each component has its own instance of the navigation, i.e. the navigation code is duplicated. This is because `HeaderDialog` will become an independent component in the future. You may need to take additional measures so your SEO is not affected by the duplicate HTML code of the navigation. While there are important changes also in the HTML structure, the old class names in `Header` can be roughly mapped onto the new subcomponents like this: - `Header__mobileOnlyActions` → `HeaderMobileOnlyActions` - `Header__bar` → removed without a replacement - `Header__content` → removed without a replacement - `Header__dialog` → `HeaderDialog`, stands outside of `Header` - `Header__close` → removed without a replacement - `Header__actions` → `HeaderDesktopOnlyActions` - `Header__nav` → `HeaderNav` - `Header__navItem` → `HeaderNavItem` - `Header__link` → `HeaderLink` - `Header__text` → removed without a replacement Inside `HeaderDialog`: - `Header__close` → `HeaderDialogCloseButton` - `Header__actions` → `HeaderDialogActions` - `Header__nav` → `HeaderDialogNav` - `Header__navItem` → `HeaderDialogNavItem` - `Header__link` → `HeaderDialogLink` - `Header__text` → `HeaderDialogText` ### JavaScript The deprecated `Header` JS plugin was removed in favour of the `Offcanvas` plugin. - `import { Header } from '@lmc-eu/spirit-web'` → `import { Offcanvas } from '@lmc-eu/spirit-web'` - `data-toggle="header"` → `data-spirit-toggle="offcanvas"` (`spirit` infix is made mandatory in another PR) - `data-dismiss="header"` → `data-spirit-dismiss="offcanvas"` (`spirit` infix is made mandatory in another PR) --- Please refer back to these instructions or reach out to our team if you encounter any issues during migration.

## Migration Guide ### HTML and CSS The original `Header__*` classes no longer exist, and so does the original structure. Instead, new subcomponents replace the original nested classes. The most notable change is that the mobile and desktop navigation are now separate components that cannot be nested: - `Header` - `HeaderDialog` Formerly, the desktop dialog (holding the site navigation) was a responsive CSS modification of a shared HTML code. With the new `Header` and `HeaderDialog`, each component has its own instance of the navigation, i.e. the navigation code is duplicated. This is because `HeaderDialog` will become an independent component in the future. You may need to take additional measures so your SEO is not affected by the duplicate HTML code of the navigation. While there are important changes also in the HTML structure, the old class names in `Header` can be roughly mapped onto the new subcomponents like this: - `Header__mobileOnlyActions` → `HeaderMobileOnlyActions` - `Header__bar` → removed without a replacement - `Header__content` → removed without a replacement - `Header__dialog` → `HeaderDialog`, stands outside of `Header` - `Header__close` → removed without a replacement - `Header__actions` → `HeaderDesktopOnlyActions` - `Header__nav` → `HeaderNav` - `Header__navItem` → `HeaderNavItem` - `Header__link` → `HeaderLink` - `Header__text` → removed without a replacement Inside `HeaderDialog`: - `Header__close` → `HeaderDialogCloseButton` - `Header__actions` → `HeaderDialogActions` - `Header__nav` → `HeaderDialogNav` - `Header__navItem` → `HeaderDialogNavItem` - `Header__link` → `HeaderDialogLink` - `Header__text` → `HeaderDialogText` ### JavaScript The deprecated `Header` JS plugin was removed in favour of the `Offcanvas` plugin. - `import { Header } from '@lmc-eu/spirit-web'` → `import { Offcanvas } from '@lmc-eu/spirit-web'` - `data-toggle="header"` → `data-spirit-toggle="offcanvas"` (`spirit` infix is made mandatory in PR #935) - `data-dismiss="header"` → `data-spirit-dismiss="offcanvas"` (`spirit` infix is made mandatory in PR #935) --- Please refer back to these instructions or reach out to our team if you encounter any issues during migration.

adamkudrna added 2 commits January 24, 2023 16:21

Test(web-twig): Sync snapshots with updated icons

6982d69

Fix(web-twig): Add the missing isOpen prop to Collapse

8c82bd0

adamkudrna requested a review from literat as a code owner January 24, 2023 15:28

adamkudrna self-assigned this Jan 24, 2023

adamkudrna requested review from crishpeen, tomassychra and a team as code owners January 24, 2023 15:28

github-actions bot added the bug Something isn't working label Jan 24, 2023

literat approved these changes Jan 24, 2023

View reviewed changes

tomassychra approved these changes Jan 25, 2023

View reviewed changes

adamkudrna merged commit e65e7d8 into main Jan 27, 2023

adamkudrna deleted the bugfix/twig-collapse branch January 27, 2023 13:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix(web-twig): Add the missing `isOpen` prop to `Collapse` #653

Fix(web-twig): Add the missing `isOpen` prop to `Collapse` #653

adamkudrna commented Jan 24, 2023 •

edited

Loading

netlify bot commented Jan 24, 2023 •

edited

Loading

netlify bot commented Jan 24, 2023 •

edited

Loading

adamkudrna commented Jan 24, 2023 •

edited

Loading

Fix(web-twig): Add the missing isOpen prop to Collapse #653

Fix(web-twig): Add the missing isOpen prop to Collapse #653

Conversation

adamkudrna commented Jan 24, 2023 • edited Loading

netlify bot commented Jan 24, 2023 • edited Loading

✅ Deploy Preview for spirit-design-system-storybook canceled.

netlify bot commented Jan 24, 2023 • edited Loading

✅ Deploy Preview for spirit-design-system-demo canceled.

adamkudrna commented Jan 24, 2023 • edited Loading

Fix(web-twig): Add the missing `isOpen` prop to `Collapse` #653

Fix(web-twig): Add the missing `isOpen` prop to `Collapse` #653

adamkudrna commented Jan 24, 2023 •

edited

Loading

netlify bot commented Jan 24, 2023 •

edited

Loading

netlify bot commented Jan 24, 2023 •

edited

Loading

adamkudrna commented Jan 24, 2023 •

edited

Loading