BREAKING CHANGE: Add spirit infix to data attr names for components and JS plugins #DS-585 #935

crishpeen · 2023-07-13T10:17:01Z

Description

Add spirit to all data-api attributes of our components.

Additional context

See each commit for a list of affected components.

Issue reference

#DS-585

Before submitting the PR, please make sure you do the following

Read the Contributing Guidelines.
Follow the PR Title/Commit Message Convention.
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
Ideally, include relevant tests that fail without this PR but pass with it.

netlify · 2023-07-13T10:17:05Z

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

Name	Link
🔨 Latest commit	`70f6cb7`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-demo/deploys/64b7c06e15cc3d00086f38cd

coveralls · 2023-07-13T10:17:44Z

coverage: 96.46%. remained the same when pulling 70f6cb7 on bc/data-api-spirit-infix into 28aa795 on integration/bc-version-1.

netlify · 2023-07-13T10:19:41Z

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

Name	Link
🔨 Latest commit	`70f6cb7`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-react/deploys/64b7c06e7f1276000880452d

…ers from `Dropdown` #DS-588 Also improved demo and docs. ## Migration Guide Use `data-spirit-fullwidthmode` instead of `Dropdown--fullWidth` and `data-breakpoint` on `Dropdown` component. `spirit` infix is made mandatory in PR #935. - `<div class="Dropdown Dropdown--fullWidth" …>` → `<div class="Dropdown" data-spirit-fullwidthmode="all" …>` (`spirit` infix is made mandatory in PR #935) - `<div class="Dropdown Dropdown--fullWidth" data-breakpoint="mobile" …>` → `<div class="Dropdown" data-spirit-fullwidthmode="mobile-only" …>` (`spirit` infix is made mandatory in PR #935) Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…refs #DS-840 ## Migration Guide Use `data-spirit-toggle="tabs"` to initialize Tabs functionality. `spirit` infix is made mandatory in PR #935. The original data attribute was removed due to unwanted initialization of Tabs which was not under control of the developer. Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…refs #DS-840 ## Migration Guide Use `data-spirit-toggle="tabs"` to initialize Tabs functionality. `spirit` infix is made mandatory in PR #935. - `<TabLink …>` → `<TabLink data-spirit-toggle="tabs" …>` The original data attribute was removed due to unwanted initialization of Tabs which was not under control of the developer. Please refer back to this guide 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.

## Migration Guide 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.

…ers from `Dropdown` #DS-588 Also improved demo and docs. ## Migration Guide Use `data-spirit-fullwidthmode` instead of `Dropdown--fullWidth` and `data-breakpoint` on `Dropdown` component. `spirit` infix is made mandatory in PR #935. - `<div class="Dropdown Dropdown--fullWidth" …>` → `<div class="Dropdown" data-spirit-fullwidthmode="all" …>` (`spirit` infix is made mandatory in PR #935) - `<div class="Dropdown Dropdown--fullWidth" data-breakpoint="mobile" …>` → `<div class="Dropdown" data-spirit-fullwidthmode="mobile-only" …>` (`spirit` infix is made mandatory in PR #935) Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…refs #DS-840 ## Migration Guide Use `data-spirit-toggle="tabs"` to initialize Tabs functionality. `spirit` infix is made mandatory in PR #935. - `<TabLink …>` → `<TabLink data-spirit-toggle="tabs" …>` The original data attribute was removed due to unwanted initialization of Tabs which was not under control of the developer. Please refer back to this guide or reach out to our team if you encounter any issues during migration.

literat · 2023-07-18T14:06:58Z

@crishpeen Please recheck your web-react commit, because data-placement is used by FloatingUI to align the arrow of the tip (https://floating-ui.com/docs/arrow#placement). Thus this should be without infix.

packages/web-react/src/components/Tooltip/README.md

packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidth.twig

packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthMobile.twig

packages/web/src/js/utils/ComponentFunctions.ts

literat · 2023-07-19T09:31:28Z

https://64b7a217467f0d0008cfb613--spirit-design-system-demo.netlify.app/

…nents and JS plugins #DS-585 ## Migration Guide Add `spirit` to all data-api attributes of affected components. - `data-toggle="collapse"` → `data-spirit-toggle="collapse"` List of affected components: - Accordion - Collapse - Dropdown - FileUploader - Header - Modal - ScrollView - Tabs - TextArea - TextField - Tooltip List of affected JS plugins: - Collapse - Dropdown - FileUploader - Header - Modal - Offcanvas - Tabs - Tooltip To make everything work, you have to make these changes: ### Accordion - `<section class="Accordion" data-toggle="accordion" …>` → `<section class="Accordion" data-spirit-toggle="accordion" …>` - `<button class="Accordion__itemToggle" data-toggle="collapse" data-target="target-id" …>` → `<button class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="target-id" …>` ### Collapse - `<button data-toggle="collapse" data-target="target-id" …>` → `<button data-spirit-toggle="collapse" data-spirit-target="target-id" …>` - `<div id="target-id" class="Collapse" data-parent="#parent-id" …>` → `<div id="target-id" class="Collapse" data-spirit-parent="#parent-id" …>` - `<div class="Collapse" data-breakpoint="tablet" …>` → `<div class="Collapse" data-spirit-breakpoint="tablet" …>` - `<a data-toggle="collapse" data-more …>` → `<a data-spirit-toggle="collapse" data-spirit-more …>` ### Dropdown - `<button data-toggle="dropdown" data-target="target-id" …>` → `<button data-spirit-toggle="dropdown" data-spirit-target="target-id" …>` - `<button data-toggle="dropdown" data-autoclose="true" …>` → `<button data-spirit-toggle="dropdown" data-spirit-autoclose="true" …>` - `<div class="Dropdown" data-breakpoint="tablet" …>` → `<div class="Collapse" data-spirit-breakpoint="tablet" …>` ### FileUploader - `<div class="FileUploader" data-toggle="fileUploader" …>` → `<div class="FileUploader" data-spirit-toggle="fileUploader" …>` - `<div class="FileUploaderInput" data-file-queue-limit="2" …>` → `<div class="FileUploaderInput" data-spirit-file-queue-limit="2" …>` ### Header - `<button data-toggle="offcanvas" data-target="target-id" …>` → `<button data-spirit-toggle="offcanvas" data-spirit-target="target-id" …>` - `<button class="HeaderDialogCloseButton" data-dismiss="offcanvas" data-target="target-id" …>` → `<button class="HeaderDialogCloseButton" data-spirit-dismiss="offcanvas" data-spirit-target="target-id" …>` ### Modal - `<button data-toggle="modal" data-target="target-id" …>` → `<button data-spirit-toggle="modal" data-spirit-target="target-id" …>` - `<button data-dismiss="modal" data-target="target-id" …>` → `<button data-spirit-dismiss="modal" data-spirit-target="target-id" …>` ### ScrollView - `<div class="ScrollView" data-toggle="scrollView" …>` → `<div class="ScrollView" data-spirit-toggle="scrollView" …>` ### Tabs - `<button class="Tabs__link" data-toggle="tabs" data-target="target-id" …>` → `<button class="Tabs__link" data-spirit-toggle="tabs" data-spirit-target="target-id" …>` ### TextArea - `<div class="TextArea" data-toggle="autoResize" …>` → `<div class="TextArea" data-spirit-toggle="autoResize" …>` ### TextField - `<button class="TextField__passwordToggle__button" data-toggle="password" …>` → `<button class="TextField__passwordToggle__button" data-spirit-toggle="password" …>` ### Tooltip - `<button data-toggle="tooltip" data-target="target-id" …>` → `<button data-spirit-toggle="tooltip" data-spirit-target="target-id" …>` - `<button class="Tooltip__close" data-dismiss="tooltip" data-target="target-id" …>` → `<button class="Tooltip__close" data-spirit-dismiss="tooltip" data-spirit-target="target-id" …>` - `<div class="Tooltip" data-placement="top" …>` → `<div class="Tooltip" data-spirit-placement="top" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…omponents #DS-585 ## Migration Guide Add `spirit` infix to all affected APIs. - `data-toggle="collapse"` → `data-spirit-toggle="collapse"` You have to modify these component APIs or usages: - Collapse - Dropdown - FileUploader - Header - Modal - ScrollView - Tooltip To make everything work, you have to make these changes: ### Collapse - `<Button data-toggle="collapse" data-target="target-id" …>` → `<Button data-spirit-toggle="collapse" data-spirit-target="target-id" …>` - `<ButtonLink data-toggle="collapse" data-more …>` → `<ButtonLink data-spirit-toggle="collapse" data-spirit-more …>` ### Dropdown - `<Button data-toggle="dropdown" data-target="target-id" …>` → `<Button data-spirit-toggle="dropdown" data-spirit-target="target-id" …>` - `<Button data-toggle="dropdown" data-autoclose="true" …>` → `<Button data-spirit-toggle="dropdown" data-spirit-autoclose="true" …>` ### FileUploader - `<FileUploader data-toggle="fileUploader" …>` → `<FileUploader data-spirit-toggle="fileUploader" …>` ### Header - `<HeaderButton data-toggle="offcanvas" data-target="target-id" …>` → `<HeaderButton data-spirit-toggle="offcanvas" data-spirit-target="target-id" …>` ### Modal - `<Button data-toggle="modal" data-target="target-id" …>` → `<Button data-spirit-toggle="modal" data-spirit-target="target-id" …>` - `<Button data-dismiss="modal" data-target="target-id" …>` → `<Button data-spirit-dismiss="modal" data-spirit-target="target-id" …>` ### ScrollView - `<ScrollView data-toggle="scrollView" …>` → `<ScrollView data-spirit-toggle="scrollView" …>` ### Tabs - `<button class="Tabs__link" data-toggle="tabs" data-target="target-id" …>` → `<button class="Tabs__link" data-spirit-toggle="tabs" data-spirit-target="target-id" …>` ### Tooltip - `<Button data-toggle="tooltip" data-target="target-id" …>` → `<Button data-spirit-toggle="tooltip" data-spirit-target="target-id" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…ooltip #DS-585 Also added `spirit` infix to internal implementations of components where it controls CSS behaviour. ## Migration Guide If you need advanced positioning of Tooltip with Floating UI, you need to change `data-placement` prop to `data-spirit-placement`. - `<Tooltip data-placement={placement} …>` → `<Tooltip data-spirit-placement={placement} …>` See updated README of the Tooltip component. Please refer back to this guide or reach out to our team if you encounter any issues during migration.

…` in Validation Text #DS-585 Rename attribute `data-element` to `data-spirit-element` of Validation Text element. ## Migration Guide Add `spirit` infix to your styles and other integrations - `.Component > [data-element="validation_text"] {}` → `.Component > [data-spirit-element="validation_text"] {}` If you use Spirit components, then you don't need to do anything, internal styles are already updated. Please refer back to this guide or reach out to our team if you encounter any issues during migration.

literat

LGTM 👍