Skip to content

feat(props)!: rename extra props to slot#1634

Merged
brtbrt merged 39 commits into
masterfrom
mbertamini/1602-extra-to-slot
Jul 15, 2026
Merged

feat(props)!: rename extra props to slot#1634
brtbrt merged 39 commits into
masterfrom
mbertamini/1602-extra-to-slot

Conversation

@brtbrt

@brtbrt brtbrt commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Closes #1602. Part of #626 — Major release plan 17.0.0.

Changes

Renames the extra prop family to slot across every component, finishing the slot migration that was started for the cards in mistica 16.

!! Decision — how each extra-named prop was handled

heads up to the reviewers! Are we ok with these decisions below?

  • Bare extra prop, no slot yet → hard-renamed to slot (no deprecation shim, since 17.0.0 is the breaking release): CoverHero, Hero, Popover, Tooltip, Meter, Dialog, HeaderLayout, Row/RowList, FeedbackScreen, AdvancedDataCard.
  • extra already deprecated with slot already available → the deprecated extra was removed (consumers use the existing slot): DataCard, MediaCard, NakedCard. DataCard's dead extraAlignment was also removed (slotAlignment stays).
  • Props with Extra in a compound name → renamed to keep the family consistent: sideExtrasideSlot (CoverHero), burgerMenuExtraburgerMenuSlot (MainNavigationBar), sideBySideExtraOnDesktopsideBySideSlotOnDesktop (HeaderLayout), extraDividerPaddingslotDividerPadding and noExtraDividernoSlotDivider (AdvancedDataCard).
  • Unrelated uses of the word "extra" were left untouched: the extraLargeDesktop breakpoint, 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.

brtbrt and others added 30 commits June 30, 2026 21:19
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.
Closes #1597. Part of #626 — Major release plan 17.0.0.
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.
Closes #1617. Part of #626 — Major release plan 17.0.0.
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.
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`.
Copilot AI review requested due to automatic review settings July 7, 2026 23:13
@brtbrt
brtbrt requested a review from a team as a code owner July 7, 2026 23:13
@brtbrt brtbrt added the AI AI Generated label Jul 7, 2026
@brtbrt brtbrt changed the title feat!: rename extra props to slot feat(props): rename extra props to slot Jul 7, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 extraslot (and related compound props like sideExtra/burgerMenuExtra/sideBySideExtraOnDesktop) in the affected components.
  • Removed previously deprecated extra (and extraAlignment) from card components that already supported slot.
  • Updated stories, unit tests, screenshot tests, playroom snippets, and migration/docs to reflect the new slot naming.

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 extraslot and sideExtrasideSlot 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 extraslot 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.

Comment thread src/cover-hero.css.ts Outdated
Comment thread src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx Outdated
Comment thread src/list.tsx
@brtbrt brtbrt linked an issue Jul 7, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Deploy preview for mistica-web ready!

Project:mistica-web
Status: ✅  Deploy successful!
Preview URL:https://mistica-nbl0gtrmi-flows-projects-65bb050e.vercel.app
Latest Commit:a0685ee

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.
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

@Telefonica Telefonica deleted a comment from github-actions Bot Jul 7, 2026
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.
Comment thread doc/migration-guide.md
# 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
@brtbrt
brtbrt changed the base branch from mbertamini/1600-remove-border-radius-token to master July 15, 2026 18:03
@brtbrt brtbrt changed the title feat(props): rename extra props to slot feat(props)!: rename extra props to slot Jul 15, 2026
@github-actions

Copy link
Copy Markdown

Size stats

master this branch diff
Total JS 15.8 MB 15.8 MB -135 B
JS without icons 1.92 MB 1.92 MB -135 B
Lib overhead 95.1 kB 95.1 kB 0 B
Lib overhead (gzip) 20.8 kB 20.8 kB 0 B

@brtbrt
brtbrt added this pull request to the merge queue Jul 15, 2026
Merged via the queue into master with commit fe7e65e Jul 15, 2026
12 checks passed
@tuentisre

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 16.72.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@tuentisre

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 17.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI AI Generated released

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rename props *Extra to *Slot

4 participants