Skip to content

Commit fe7e65e

Browse files
brtbrtbrtbrt
authored
feat(props)!: rename extra props to slot (#1634)
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: `sideExtra` → `sideSlot` (`CoverHero`), `burgerMenuExtra` → `burgerMenuSlot` (`MainNavigationBar`), `sideBySideExtraOnDesktop` → `sideBySideSlotOnDesktop` (`HeaderLayout`), `extraDividerPadding` → `slotDividerPadding` and `noExtraDivider` → `noSlotDivider` (`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.** --------- Co-authored-by: brtbrt <brtbrt@users.noreply.github.com>
1 parent 2282d4d commit fe7e65e

162 files changed

Lines changed: 351 additions & 343 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎doc/components.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -409,8 +409,8 @@ const [selectedIndex, setSelectedIndex] = React.useState(0);
409409
description="Page description text"
410410
/>
411411
}
412-
extra={<Placeholder />}
413-
sideBySideExtraOnDesktop
412+
slot={<Placeholder />}
413+
sideBySideSlotOnDesktop
414414
/>
415415
```
416416

@@ -468,7 +468,7 @@ dialog({
468468
title: 'Title',
469469
subtitle: 'Subtitle',
470470
message: 'Message',
471-
extra: <Placeholder />,
471+
slot: <Placeholder />,
472472
acceptText: 'Accept',
473473
cancelText: 'Cancel',
474474
});

‎doc/llms/figma-mcp.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,8 @@ props from the combined picture.
150150
### How to gather
151151

152152
For any CodeConnect-wrapped **composite component** — one with multiple content slots (`headline`, `pretitle`,
153-
`title`, `subtitle`, `description`, `extra`, `slot`, `buttonPrimary`, `buttonSecondary`, `buttonLink`,
154-
`asset`, etc.) — re-fetch the node with Code Connect disabled before mapping props:
153+
`title`, `subtitle`, `description`, `slot`, `buttonPrimary`, `buttonSecondary`, `buttonLink`, `asset`, etc.) —
154+
re-fetch the node with Code Connect disabled before mapping props:
155155

156156
```
157157
get_design_context({
@@ -164,7 +164,7 @@ get_design_context({
164164

165165
That returns the real child tree: the actual text nodes, their font-size tokens, the actual image aspect
166166
ratio, Tag instances with their `type` (e.g. the `--tagbackgroundinfo` CSS variable tells you `type="info"`),
167-
child slots that correspond to `extra` / `slot` / `headline`, sibling buttons, etc.
167+
child slots that correspond to `slot` / `headline`, sibling buttons, etc.
168168

169169
Use `get_metadata` on the same node when you also need to understand which children are component instances
170170
vs. raw nodes.

‎doc/migration-guide.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
## Migration Guide from mistica 16.x to mistica 17.x
2+
3+
Mistica 17 is a major release. Among other breaking changes, the `extra` prop family has been renamed to
4+
`slot` across all components.
5+
6+
### Renamed props: `*Extra` → `*Slot`
7+
8+
- The `extra` prop has been renamed to `slot` in `CoverHero`, `Hero`, `Popover`, `Tooltip`, `Meter`, `Dialog`,
9+
`HeaderLayout`, `Row`/`RowList`, `FeedbackScreen`, and `AdvancedDataCard`.
10+
- In `DataCard`, `MediaCard`, and `NakedCard` the previously deprecated `extra` prop has been removed. Use
11+
`slot` instead (already available in mistica 16).
12+
- `CoverHero`: `sideExtra` has been renamed to `sideSlot`.
13+
- `MainNavigationBar`: `burgerMenuExtra` has been renamed to `burgerMenuSlot`.
14+
- `HeaderLayout`: `sideBySideExtraOnDesktop` has been renamed to `sideBySideSlotOnDesktop`.
15+
- `DataCard`: the previously deprecated `extraAlignment` prop has been removed. Use `slotAlignment` instead.
16+
- `AdvancedDataCard`: `extraDividerPadding` has been renamed to `slotDividerPadding`, and `noExtraDivider` has
17+
been renamed to `noSlotDivider`.
18+
119
## Migration Guide for the New Cards Ecosystem (Starting from Mistica 16.xx.xx)
220

321
The changes introduced in this version are backwards compatible; however, several components and props have

‎playroom/snippets.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1021,7 +1021,7 @@ const popoverSnippets = [
10211021
}
10221022
title="Amanda Harvey"
10231023
description="Product designer"
1024-
extra={
1024+
slot={
10251025
<Box paddingTop={16}>
10261026
<Stack space={16}>
10271027
<Divider />
@@ -1058,7 +1058,7 @@ const headerSnippets: Array<Snippet> = [
10581058
title="The last invoice is available"
10591059
/>
10601060
}
1061-
extra={<Placeholder />}
1061+
slot={<Placeholder />}
10621062
/>
10631063
`,
10641064
},
@@ -1073,7 +1073,7 @@ const headerSnippets: Array<Snippet> = [
10731073
title="The last invoice is available"
10741074
/>
10751075
}
1076-
extra={<Placeholder />}
1076+
slot={<Placeholder />}
10771077
/>
10781078
`,
10791079
},
@@ -1093,7 +1093,7 @@ const headerSnippets: Array<Snippet> = [
10931093
title="The last invoice is available"
10941094
/>
10951095
}
1096-
extra={<Placeholder />}
1096+
slot={<Placeholder />}
10971097
/>
10981098
`,
10991099
},
@@ -1114,7 +1114,7 @@ const headerSnippets: Array<Snippet> = [
11141114
title="The last invoice is available"
11151115
/>
11161116
}
1117-
extra={<Placeholder />}
1117+
slot={<Placeholder />}
11181118
/>
11191119
`,
11201120
},
@@ -2239,7 +2239,7 @@ const exampleScreens: Array<Snippet> = [
22392239
headline={<Tag type="active">New</Tag>}
22402240
title={["AirPods Pro", "Mobiles", "Tablets"][idx % 2]}
22412241
description={["2nd generation", "Mobiles", "Tablets"][idx % 2]}
2242-
extra={
2242+
slot={
22432243
<Box paddingTop={16}>
22442244
<Stack space={4}>
22452245
<Text2
@@ -3203,7 +3203,7 @@ const alertSnippets = [
32033203
title: 'Title',
32043204
message: 'Message',
32053205
acceptText: 'Accept terms and conditions',
3206-
extra: <Text1 regular>This is the extra zone</Text1>,
3206+
slot: <Text1 regular>This is the slot zone</Text1>,
32073207
forceWeb: true,
32083208
showCancel: true,
32093209
link: <ButtonLink href="https://google.com">Link</ButtonLink>,
@@ -3517,7 +3517,7 @@ const heroSnippets = [
35173517
pretitle="Pretitle"
35183518
title={["Title", "Title2"][idx]}
35193519
description="This is a long description with a long text to see how this works"
3520-
extra={<Placeholder />}
3520+
slot={<Placeholder />}
35213521
button={<ButtonPrimary fake>Action</ButtonPrimary>}
35223522
buttonLink={<ButtonLink href="#">Link</ButtonLink>}
35233523
dataAttributes={{ testid: "hero" }}
@@ -3538,8 +3538,8 @@ const heroSnippets = [
35383538
title="Vuela con la Fibra 1Gb"
35393539
description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
35403540
button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
3541-
extra={<Placeholder />}
3542-
sideExtra={<Placeholder />}
3541+
slot={<Placeholder />}
3542+
sideSlot={<Placeholder />}
35433543
/>
35443544
`,
35453545
},
@@ -3554,8 +3554,8 @@ const heroSnippets = [
35543554
title="Vuela con la Fibra 1Gb"
35553555
description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
35563556
button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
3557-
extra={<Placeholder />}
3558-
sideExtra={<Placeholder />}
3557+
slot={<Placeholder />}
3558+
sideSlot={<Placeholder />}
35593559
/>
35603560
`,
35613561
},
@@ -3578,8 +3578,8 @@ const heroSnippets = [
35783578
"",
35793579
][idx]
35803580
}
3581-
extra={<Placeholder />}
3582-
sideExtra={<Placeholder />}
3581+
slot={<Placeholder />}
3582+
sideSlot={<Placeholder />}
35833583
button={<ButtonPrimary fake>Action</ButtonPrimary>}
35843584
buttonLink={<ButtonLink href="#">Link</ButtonLink>}
35853585
/>
@@ -3804,7 +3804,7 @@ const advancedDataCardSnippets = [
38043804
pretitle="pretitle"
38053805
pretitleAs="h4"
38063806
description="description"
3807-
extra={[
3807+
slot={[
38083808
<RowBlock title="RowBlock" description="description" />,
38093809
<SimpleBlock
38103810
image={

‎src/__acceptance_tests__/__ssr_pages__/cover-hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const CarouselTest = (): JSX.Element => (
99
title="Vuela con la Fibra 1Gb"
1010
description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
1111
button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
12-
extra={<Placeholder />}
13-
sideExtra={<Placeholder />}
12+
slot={<Placeholder />}
13+
sideSlot={<Placeholder />}
1414
/>
1515
);
1616

‎src/__acceptance_tests__/__ssr_pages__/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const HeaderTest = (): JSX.Element => (
1313
<Stack space={8}>
1414
<HeaderLayout
1515
header={<Header title="La última factura de diciembre ya esta disponible" />}
16-
extra={<Placeholder />}
16+
slot={<Placeholder />}
1717
/>
1818
<MainSectionHeaderLayout>
1919
<MainSectionHeader

‎src/__private_stories__/card-slot-alignment-story.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const SlotAlignment: StoryComponent = () => {
2020
subtitle="Media card"
2121
imageSrc={IMAGE_SRC}
2222
mediaAspectRatio="16:9"
23-
extra={<Placeholder height={100} />}
23+
slot={<Placeholder height={100} />}
2424
buttonLink={
2525
<ButtonLink small href="https://google.com">
2626
Link
@@ -33,7 +33,7 @@ export const SlotAlignment: StoryComponent = () => {
3333
slotAlignment="content"
3434
imageSrc={IMAGE_SRC}
3535
mediaAspectRatio="16:9"
36-
extra={<Placeholder height={50} />}
36+
slot={<Placeholder height={50} />}
3737
buttonLink={
3838
<ButtonLink small href="https://google.com">
3939
Link
@@ -46,7 +46,7 @@ export const SlotAlignment: StoryComponent = () => {
4646
slotAlignment="bottom"
4747
imageSrc={IMAGE_SRC}
4848
mediaAspectRatio="16:9"
49-
extra={<Placeholder height={50} />}
49+
slot={<Placeholder height={50} />}
5050
buttonLink={
5151
<ButtonLink small href="https://google.com">
5252
Link
@@ -59,7 +59,7 @@ export const SlotAlignment: StoryComponent = () => {
5959
slotAlignment="space-between"
6060
imageSrc={IMAGE_SRC}
6161
mediaAspectRatio="16:9"
62-
extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
62+
slot={[<Placeholder height={30} />, <Placeholder height={30} />]}
6363
buttonLink={
6464
<ButtonLink small href="https://google.com">
6565
Link
@@ -73,7 +73,7 @@ export const SlotAlignment: StoryComponent = () => {
7373
subtitle="Naked card"
7474
imageSrc={IMAGE_SRC}
7575
mediaAspectRatio="16:9"
76-
extra={<Placeholder height={100} />}
76+
slot={<Placeholder height={100} />}
7777
buttonLink={
7878
<ButtonLink small href="https://google.com">
7979
Link
@@ -86,7 +86,7 @@ export const SlotAlignment: StoryComponent = () => {
8686
slotAlignment="content"
8787
imageSrc={IMAGE_SRC}
8888
mediaAspectRatio="16:9"
89-
extra={<Placeholder height={50} />}
89+
slot={<Placeholder height={50} />}
9090
buttonLink={
9191
<ButtonLink small href="https://google.com">
9292
Link
@@ -99,7 +99,7 @@ export const SlotAlignment: StoryComponent = () => {
9999
slotAlignment="bottom"
100100
imageSrc={IMAGE_SRC}
101101
mediaAspectRatio="16:9"
102-
extra={<Placeholder height={50} />}
102+
slot={<Placeholder height={50} />}
103103
buttonLink={
104104
<ButtonLink small href="https://google.com">
105105
Link
@@ -112,7 +112,7 @@ export const SlotAlignment: StoryComponent = () => {
112112
slotAlignment="space-between"
113113
imageSrc={IMAGE_SRC}
114114
mediaAspectRatio="16:9"
115-
extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
115+
slot={[<Placeholder height={30} />, <Placeholder height={30} />]}
116116
buttonLink={
117117
<ButtonLink small href="https://google.com">
118118
Link
@@ -127,7 +127,7 @@ export const SlotAlignment: StoryComponent = () => {
127127
subtitle="Small Naked card"
128128
imageSrc={IMAGE_SRC}
129129
mediaAspectRatio="16:9"
130-
extra={<Placeholder height={100} />}
130+
slot={<Placeholder height={100} />}
131131
/>
132132
<NakedCard
133133
size="snap"
@@ -136,7 +136,7 @@ export const SlotAlignment: StoryComponent = () => {
136136
slotAlignment="content"
137137
imageSrc={IMAGE_SRC}
138138
mediaAspectRatio="16:9"
139-
extra={<Placeholder height={50} />}
139+
slot={<Placeholder height={50} />}
140140
/>
141141
<NakedCard
142142
size="snap"
@@ -145,7 +145,7 @@ export const SlotAlignment: StoryComponent = () => {
145145
slotAlignment="bottom"
146146
imageSrc={IMAGE_SRC}
147147
mediaAspectRatio="16:9"
148-
extra={<Placeholder height={50} />}
148+
slot={<Placeholder height={50} />}
149149
/>
150150
<NakedCard
151151
size="snap"
@@ -154,14 +154,14 @@ export const SlotAlignment: StoryComponent = () => {
154154
slotAlignment="space-between"
155155
imageSrc={IMAGE_SRC}
156156
mediaAspectRatio="16:9"
157-
extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
157+
slot={[<Placeholder height={30} />, <Placeholder height={30} />]}
158158
/>
159159
</Inline>
160160
<Inline space={16}>
161161
<DataCard
162162
title="Default"
163163
subtitle="Data card"
164-
extra={<Placeholder height={100} />}
164+
slot={<Placeholder height={100} />}
165165
buttonLink={
166166
<ButtonLink small href="https://google.com">
167167
Link
@@ -172,7 +172,7 @@ export const SlotAlignment: StoryComponent = () => {
172172
title="Content"
173173
subtitle="Data card"
174174
slotAlignment="content"
175-
extra={<Placeholder height={50} />}
175+
slot={<Placeholder height={50} />}
176176
buttonLink={
177177
<ButtonLink small href="https://google.com">
178178
Link
@@ -183,7 +183,7 @@ export const SlotAlignment: StoryComponent = () => {
183183
title="Bottom"
184184
subtitle="Data card"
185185
slotAlignment="bottom"
186-
extra={<Placeholder height={50} />}
186+
slot={<Placeholder height={50} />}
187187
buttonLink={
188188
<ButtonLink small href="https://google.com">
189189
Link
@@ -194,7 +194,7 @@ export const SlotAlignment: StoryComponent = () => {
194194
title="Space Between"
195195
subtitle="Data card"
196196
slotAlignment="space-between"
197-
extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
197+
slot={[<Placeholder height={30} />, <Placeholder height={30} />]}
198198
buttonLink={
199199
<ButtonLink small href="https://google.com">
200200
Link
@@ -207,28 +207,28 @@ export const SlotAlignment: StoryComponent = () => {
207207
size="snap"
208208
title="Default"
209209
subtitle="Snap card"
210-
extra={<Placeholder height={100} />}
210+
slot={<Placeholder height={100} />}
211211
/>
212212
<DataCard
213213
size="snap"
214214
title="Content"
215215
subtitle="Snap card"
216216
slotAlignment="content"
217-
extra={<Placeholder height={50} />}
217+
slot={<Placeholder height={50} />}
218218
/>
219219
<DataCard
220220
size="snap"
221221
title="Bottom"
222222
subtitle="Snap card"
223223
slotAlignment="bottom"
224-
extra={<Placeholder height={50} />}
224+
slot={<Placeholder height={50} />}
225225
/>
226226
<DataCard
227227
size="snap"
228228
title="Space Between"
229229
subtitle="Snap card"
230230
slotAlignment="space-between"
231-
extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
231+
slot={[<Placeholder height={30} />, <Placeholder height={30} />]}
232232
/>
233233
</Inline>
234234
</Stack>

‎src/__private_stories__/components-in-portals-story.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Default: StoryComponent = () => {
3434
dialog({
3535
title: 'Title',
3636
message: 'Message',
37-
extra: (
37+
slot: (
3838
<Stack space={8}>
3939
<Inline space={8}>
4040
<Menu

0 commit comments

Comments
 (0)