Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE(web): Add
spirit
infix to data attr names for compo…
…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.
- Loading branch information