feat(props)!: rename extra props to slot#1634
Conversation
Remove the Tu skin entirely: skin definition, logo files and their shells, the registry entry, the public exports, and all related stories, screenshot tests, snapshots, storybook/playroom wiring, and docs. BREAKING CHANGE: the Tu skin has been removed. The TuLogo component and the TU_SKIN, getTuSkin, and tuPalette exports are no longer available.
Complete the O2-new cleanup missed in the initial replacement: - playroom/themes.tsx: rename O2_New/O2_New_iOS to O2/O2_iOS so the Playroom O2 theme resolves (fixes the TypeScript build). - audit-accessibility: audit the O2 skin instead of the removed O2-new. - generate-design-tokens and import-mistica-icons: drop the stale o2-new entries so regeneration does not recreate the deleted files. - docs: point to getO2Skin/o2Palette and a single o2 skin row.
The Movistar-new skin no longer exists after its promotion to the canonical Movistar skin, so its committed image snapshots are obsolete. Regeneration does not delete obsolete image files, so remove them here.
These tests were pinned to the legacy Movistar skin because they were unstable on Movistar-new. Since Movistar now is the former Movistar-new, the warning still applies; reword it instead of dropping it.
…ng issue Replace the free-text TODO comments with the `// todo <link> <description>` pattern, pointing at the tracking issue for the screenshot instability.
The O2-new skin was removed from all acceptance test parametrizations when O2-new replaced O2. These snapshot images are no longer generated and are removed as obsolete output.
…-remove-movistar-new
Removes the deprecated data-component-name attribute across all components. getPrefixedDataAttributes now emits only data-testid, and the three hardcoded data-component-name attributes (BurgerMenuIcon, NavigationBarActionGroup, Dialog) are replaced; the duplicate on FixedFooter is dropped. Ref: #1598
Removes deprecated APIs as part of the 17.0.0 breaking changes (#1599). Props removed: - Spinner `rolePresentation` (use `aria-hidden`) - Theme `enableTabFocus` (use the browser `:focus-visible` behavior; the internal TabFocus mechanism is dropped) - NavigationBar `paddingX` (use `wide`) - RowList/BoxedRowList `ariaLabelledby` (use `aria-labelledby`) - Sheet item `Icon` (use `url`) - `isInverse` across Boxed, DataCard, CoverCard, MediaCard, BoxedRow, ResponsiveLayout, LoadingScreen, BoxedAccordionItem, FeedbackScreen, HeaderLayout, MainSectionHeaderLayout and ThemeVariant (use `variant="brand"`) - Card aliases: `button`, `actions`, `media`, `poster`, `imageUrl`, `backgroundImage`, `backgroundVideo`, `backgroundVideoRef`, `secondaryButton` Hooks removed: `useIsInverseVariant`, `useIsInverseOrMediaVariant`. Components removed: `HighlightedCard`, `PosterCard`, `SnapCard`, `DisplayDataCard`, `DisplayMediaCard`, `SmallNakedCard`. Sheet public exports removed: `ActionsSheet`, `InfoSheet`, `ActionsListSheet`, `RadioListSheet` (kept internally for `showSheet`). Stories, playroom snippets, type tests and unit tests are updated to the replacement APIs. Obsolete tests, stories and orphaned screenshot baselines are removed. The `extra` to `slot` migration and the `legacyDisplay` token are intentionally left for their dedicated branches.
Removes legacyDisplay from the five skins where its value is identical to the container token (Vivo, Vivo Evolution, O2, Movistar, esimflag). Telefonica, Blau, defaults, and the two consumers (empty-state.css.ts, feedback.tsx) are left untouched pending design alignment.
Removes legacyDisplay from the remaining skins (Telefonica, Blau, defaults, community cyber-skin) and the shared type and contract, and switches the EmptyState and feedback-screen consumers to the container token. BREAKING CHANGE: the legacyDisplay border radius token is removed. Use container instead. This changes the EmptyState and feedback-screen radius for Telefonica (0 -> 4), Blau (16 -> 8), defaults (16 -> 8), and the community cyber-skin (0 -> 20).
The __ssr_pages__ card and carousel test pages import from the built package root, so the stale local dist masked the removal of the deprecated MediaCard/DataCard aliases. Migrate them to the replacement API: media -> imageSrc + mediaAspectRatio, button -> buttonPrimary.
The image loading fallback (opacity:0 → 1 + skeleton removal) triggers a resize observation on the carousel container during hydration, causing it to recalculate scroll positions and scroll to a non-zero offset on desktop. The carousel SSR test covers the carousel's hydration behaviour, not image loading, so removing the image is the correct fix — mirroring the approach taken in b8c6bde which set loadingFallback={false} on the now-deprecated media prop.
Restores image in the carousel SSR test page. The previous fix removed
the image entirely to avoid a hydration mismatch caused by the loading
skeleton's removal triggering the carousel's ResizeObserver. The proper
fix is to expose imageLoadingFallback on MediaCard (following the image*
prop naming convention) so callers can pass false and get the same
behaviour as the old media={<Image loadingFallback={false} />} pattern.
Rename the `extra` prop family to `slot` across all components, completing the slot migration started for the cards in mistica 16. BREAKING CHANGE: The `extra` prop has been renamed to `slot` (and its variants: `sideExtra` -> `sideSlot`, `burgerMenuExtra` -> `burgerMenuSlot`, `sideBySideExtraOnDesktop` -> `sideBySideSlotOnDesktop`, `extraDividerPadding` -> `slotDividerPadding`, `noExtraDivider` -> `noSlotDivider`). The already-deprecated `extra` and `extraAlignment` props on DataCard, MediaCard and NakedCard have been removed in favour of `slot`/`slotAlignment`.
There was a problem hiding this comment.
Pull request overview
This PR completes the Mistica 17 breaking migration from the extra prop family to slot across components, removing deprecated extra props where slot already existed and updating the surrounding ecosystem (stories, tests, snippets, docs) accordingly.
Changes:
- Renamed
extra→slot(and related compound props likesideExtra/burgerMenuExtra/sideBySideExtraOnDesktop) in the affected components. - Removed previously deprecated
extra(andextraAlignment) from card components that already supportedslot. - Updated stories, unit tests, screenshot tests, playroom snippets, and migration/docs to reflect the new
slotnaming.
Reviewed changes
Copilot reviewed 67 out of 67 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/tooltip.tsx | Rename extra prop usage to slot in Tooltip content rendering. |
| src/popover.tsx | Rename extra prop usage to slot in Popover content rendering. |
| src/navigation-bar.tsx | Rename burgerMenuExtra to burgerMenuSlot and internal wiring. |
| src/meter.tsx | Rename extra prop to slot and related internal variables. |
| src/list.tsx | Rename row/list extra prop to slot in content and a11y text gathering. |
| src/hero.tsx | Rename extra prop to slot for Hero content. |
| src/header.tsx | Rename extra to slot and sideBySideExtraOnDesktop to sideBySideSlotOnDesktop. |
| src/feedback.tsx | Rename extra to slot across FeedbackScreen and related helpers. |
| src/dialog.tsx | Rename extra to slot in dialog props and layout. |
| src/cover-hero.tsx | Rename extra → slot and sideExtra → sideSlot for CoverHero. |
| src/cover-hero.css.ts | Rename side-slot-related style exports/selectors and update comment. |
| src/community/advanced-data-card.tsx | Rename extra array to slot and related divider props to slot equivalents. |
| src/community/advanced-data-card.css.ts | Rename extra style export to slot. |
| src/community/stories/advanced-data-card-story.tsx | Update story args and component usage from extra to slot. |
| src/community/stories/advanced-data-card-carousel-story.tsx | Update carousel story usage from extra to slot. |
| src/community/screenshot_tests/advanced-data-card-screenshot-test.tsx | Update screenshot test args/table from extra to slot. |
| src/card-naked.tsx | Remove deprecated extra usage passthrough; keep slot only. |
| src/card-media.tsx | Remove deprecated extra prop; keep slot only. |
| src/card-data.tsx | Remove deprecated extra and extraAlignment; keep slot/slotAlignment only. |
| src/tests/tooltip-test.tsx | Update Tooltip tests to pass slot instead of extra. |
| src/tests/testid-test.tsx | Update test props to use slot/sideSlot instead of extra/sideExtra. |
| src/tests/naked-card-test.tsx | Update NakedCard tests to pass slot instead of extra. |
| src/tests/media-card-test.tsx | Update MediaCard tests to pass slot instead of extra. |
| src/tests/list-test.tsx | Update Row/List tests to pass slot instead of extra. |
| src/tests/data-card-test.tsx | Update DataCard tests to pass slot instead of extra. |
| src/tests/advanced-data-card-test.tsx | Update AdvancedDataCard tests to pass slot instead of extra. |
| src/stories/tooltip-story.tsx | Update story args/props from extra to slot. |
| src/stories/success-feedback-story.tsx | Update story args/props from extra to slot. |
| src/stories/success-feedback-screen-story.tsx | Update story args/props from extra to slot. |
| src/stories/popover-story.tsx | Update story args/props from extra to slot. |
| src/stories/meter-story.tsx | Update Meter story to pass slot instead of extra. |
| src/stories/menu-story.tsx | Update DataCard example to use slot instead of extra. |
| src/stories/main-navigation-bar-story.tsx | Update story args/props from burgerMenuExtra to burgerMenuSlot. |
| src/stories/list-story.tsx | Update story args/props from extra to slot. |
| src/stories/info-feedback-screen-story.tsx | Update story args/props from extra to slot. |
| src/stories/hero-story.tsx | Update story args/props from extra to slot. |
| src/stories/header-story.tsx | Update story args/props to slot + sideBySideSlotOnDesktop. |
| src/stories/feedback-screen-story.tsx | Update story to pass slot instead of extra. |
| src/stories/error-feedback-screen-story.tsx | Update story args/props from extra to slot. |
| src/stories/dialog-story.tsx | Update story args/props from extra to slot. |
| src/stories/cover-hero-story.tsx | Update story args/props from extra/sideExtra to slot/sideSlot. |
| src/screenshot_tests/tooltip-screenshot-test.tsx | Update screenshot story args from extra to slot. |
| src/screenshot_tests/popover-screenshot-test.tsx | Update screenshot story args from extra to slot. |
| src/screenshot_tests/navigation-bar-screenshot-test.tsx | Update screenshot story args from burgerMenuExtra to burgerMenuSlot. |
| src/screenshot_tests/naked-card-screenshot-test.tsx | Update screenshot story args from extra to slot. |
| src/screenshot_tests/meter-screenshot-test.tsx | Update snapshot-case strings to reflect slot terminology. |
| src/screenshot_tests/media-card-screenshot-test.tsx | Update screenshot story args from extra to slot. |
| src/screenshot_tests/list-screenshot-test.tsx | Update screenshot story args/test names from extra to slot. |
| src/screenshot_tests/header-screenshot-test.tsx | Update screenshot story args/test names to sideBySideSlotOnDesktop. |
| src/screenshot_tests/feedback-screenshot-test.tsx | Update screenshot story args/test names from extra to slot. |
| src/screenshot_tests/dialog-screenshot-test.tsx | Update screenshot story args from extra to slot. |
| src/screenshot_tests/data-card-screenshot-test.tsx | Update screenshot story args/test name from extra to slot. |
| src/screenshot_tests/cover-hero-screenshot-test.tsx | Update screenshot story args/test names to slot/sideSlot. |
| src/private_stories/tooltip-scenarios-story.tsx | Update private story usage from extra to slot. |
| src/private_stories/success-feedback-screen-with-navbar-story.tsx | Update private story usage from extra to slot. |
| src/private_stories/skin-components-story.tsx | Update private story usage from extra to slot. |
| src/private_stories/naked-card-story.tsx | Update private story args/props from extra to slot. |
| src/private_stories/media-card-story.tsx | Update private story args/props from extra to slot. |
| src/private_stories/data-card-story.tsx | Update private story args/props from extra to slot. |
| src/private_stories/components-in-portals-story.tsx | Update dialog invocation from extra to slot. |
| src/private_stories/card-slot-alignment-story.tsx | Update examples to use slot instead of extra. |
| src/acceptance_tests/ssr_pages/header.tsx | Update SSR test page to pass slot instead of extra. |
| src/acceptance_tests/ssr_pages/cover-hero.tsx | Update SSR test page to pass slot/sideSlot instead of extra/sideExtra. |
| playroom/snippets.tsx | Update playroom snippets to use slot terminology/props. |
| doc/migration-guide.md | Add Mistica 16 → 17 migration notes for extra → slot rename/removals. |
| doc/llms/figma-mcp.md | Update LLM guidance examples/wording to reflect slot terminology. |
| doc/components.md | Update docs examples to use slot/sideBySideSlotOnDesktop. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
- Revert cover-hero css comment: "extra space" refers to slideshow bullet layout spacing, not the renamed prop. - Rename AdvancedDataCard screenshot test titles "extras" -> "slots". - Rename internal `extraRef` -> `slotRef` in Row for naming consistency.
|
Accessibility report ℹ️ You can run this locally by executing |
The update_screenshots bot added new *-slot-* baselines but jest-image-snapshot does not delete the obsolete *-extra-* baselines when a test title changes. Remove the 83 stale baselines whose renamed slot counterparts now exist.
# Conflicts: # doc/llms/llms.md # playroom/components/index.tsx # src/__private_stories__/card-slot-alignment-story.tsx # src/__screenshot_tests__/__image_snapshots__/data-card-screenshot-test-tsx-data-card-with-extra-content-1-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-4-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-4-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/counter-screenshot-test.tsx # src/card-data.tsx # src/card-media.tsx # src/card-naked.tsx # src/header.tsx # src/test-utils/index.tsx # src/utils/dom.tsx
|
Size stats
|
|
🎉 This PR is included in version 16.72.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 17.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #1602. Part of #626 — Major release plan 17.0.0.
Changes
Renames the
extraprop family toslotacross every component, finishing the slot migration that was started for the cards in mistica 16.!! Decision — how each
extra-named prop was handledheads up to the reviewers! Are we ok with these decisions below?
extraprop, noslotyet → hard-renamed toslot(no deprecation shim, since 17.0.0 is the breaking release):CoverHero,Hero,Popover,Tooltip,Meter,Dialog,HeaderLayout,Row/RowList,FeedbackScreen,AdvancedDataCard.extraalready deprecated withslotalready available → the deprecatedextrawas removed (consumers use the existingslot):DataCard,MediaCard,NakedCard.DataCard's deadextraAlignmentwas also removed (slotAlignmentstays).Extrain a compound name → renamed to keep the family consistent:sideExtra→sideSlot(CoverHero),burgerMenuExtra→burgerMenuSlot(MainNavigationBar),sideBySideExtraOnDesktop→sideBySideSlotOnDesktop(HeaderLayout),extraDividerPadding→slotDividerPaddingandnoExtraDivider→noSlotDivider(AdvancedDataCard).extraLargeDesktopbreakpoint, generated icon keywords, and prose comments.Internal css classes and helper variables tied to the renamed props were renamed too. Stories, tests, playroom snippets and the migration guide were updated accordingly.
Stack position — 9 of 10
This PR targets the branch from #1600, as #1601 is not open yet. GitHub will retarget it (to #1601's branch, then to
master) as parents merge.For the full merge strategy and ordering, see #626. Do not merge out of order.