feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

marcoskolodny · 2024-08-21T18:14:33Z

BREAKING CHANGE: icon/Icon/asset props are renamed in several components

Issue: Link

⚠️ Remark

The only component that is not following the convention is the Sheet, because changing this would create inconsistencies with the bridge.

🗒️ Note

I've reviewed with @yceballost component by component and we concluded that we will proceed as follows (components in bold are affected by this PR):

Components with asset prop:

Callout
Cards
Dialogs
EmptyState
EmptyStateCard
FeedbackScreen (we want to allow Lottie animations in here for example, so Icon is not enough)
Accordion (no changes needed)
Lists (no changes needed)
Popover (no changes needed)

Components with Icon prop:

Tabs
Chips (no changes needed)
Avatar (no changes needed)
Menu (no changes needed)
Tag (no changes needed)
InfoFeedbackScreen (no changes needed)

github-actions · 2024-08-21T18:16:37Z

Size stats

	master	this branch	diff
Total JS	12.2 MB	12.2 MB	+243 B
JS without icons	2.03 MB	2.03 MB	+243 B
Lib overhead	76.4 kB	76.4 kB	0 B
Lib overhead (gzip)	18.6 kB	18.6 kB	0 B

github-actions · 2024-08-21T18:17:18Z

Accessibility report
✔️ No issues found

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

github-actions · 2024-08-21T18:20:46Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-1ce5wlfbn-flows-projects-65bb050e.vercel.app

Built with commit 6490451.
This pull request is being automatically deployed with vercel-action

src/tabs.tsx

pladaria · 2024-08-26T15:34:40Z

src/tabs.tsx

@@ -33,7 +33,7 @@ export type TabsProps = {
    tabs: ReadonlyArray<{
        readonly text: string;
        readonly trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-        readonly icon?: React.ReactNode;
+        readonly Icon?: React.FC<IconProps>;


Consider React.FC as deprecated. You can use React.ComponentType<IconProps>

We have React.FC in hundreds of files in Mistica:

I think we can solve this issue in the entire repo in a separate PR. I've created a Jira ticket to track this: https://jira.tid.es/browse/WEB-2003

-fix-icon-asset-naming-convention

# [15.21.0](v15.20.1...v15.21.0) (2024-09-12) ### Features * **ButtonLink:** add default variant ([#1211](#1211)) ([047e058](047e058)) * **Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs:** remove icon prop and use only Icon/asset ([#1206](#1206)) ([afc4604](afc4604)) * **Feedback, FixedFooterLayout, Dialog, Accordion, Touchable, Header, IconButton, NavigationBar, OverscrollColor:** remove deprecated props ([#1205](#1205)) ([3808b4f](3808b4f)) * **Header, MainSectionHeader:** use "default" as component's default variant ([#1207](#1207)) ([8efe655](8efe655)) * **i18n:** refactor texts to improve bundle size ([#1228](#1228)) ([02e3ee1](02e3ee1)) * **Icons:** add new icons and rename others ([#1197](#1197)) ([0ff767c](0ff767c)) * **React:** require react18 and replace useAriaId with React.useId ([#1213](#1213)) ([672b873](672b873)) * **skin:** rename some design tokens ([#1203](#1203)) ([fcf15d0](fcf15d0)) * **Snackbar:** update snackbar duration logic ([#1208](#1208)) ([7df20eb](7df20eb)) * **ThemeVariant:** add media theme variant and update components in order to adapt to it ([#1236](#1236)) ([f14e82e](f14e82e)) * **Titles:** add new Title2, replace Title2 and Title3 with Title3 and Title4 respectively ([#1202](#1202)) ([7e405bb](7e405bb))

tuentisre · 2024-09-12T18:19:06Z

🎉 This PR is included in version 15.21.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

…en, Tabs): remove icon prop and use only Icon/asset (#1206) BREAKING CHANGE: icon/Icon/asset props are renamed in several components

# [15.21.0](v15.20.1...v15.21.0) (2024-09-12) ### Features * **ButtonLink:** add default variant ([#1211](#1211)) ([047e058](047e058)) * **Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs:** remove icon prop and use only Icon/asset ([#1206](#1206)) ([afc4604](afc4604)) * **Feedback, FixedFooterLayout, Dialog, Accordion, Touchable, Header, IconButton, NavigationBar, OverscrollColor:** remove deprecated props ([#1205](#1205)) ([3808b4f](3808b4f)) * **Header, MainSectionHeader:** use "default" as component's default variant ([#1207](#1207)) ([8efe655](8efe655)) * **i18n:** refactor texts to improve bundle size ([#1228](#1228)) ([02e3ee1](02e3ee1)) * **Icons:** add new icons and rename others ([#1197](#1197)) ([0ff767c](0ff767c)) * **React:** require react18 and replace useAriaId with React.useId ([#1213](#1213)) ([672b873](672b873)) * **skin:** rename some design tokens ([#1203](#1203)) ([fcf15d0](fcf15d0)) * **Snackbar:** update snackbar duration logic ([#1208](#1208)) ([7df20eb](7df20eb)) * **ThemeVariant:** add media theme variant and update components in order to adapt to it ([#1236](#1236)) ([f14e82e](f14e82e)) * **Titles:** add new Title2, replace Title2 and Title3 with Title3 and Title4 respectively ([#1202](#1202)) ([7e405bb](7e405bb))

# [16.0.0](v15.20.1...v16.0.0) (2024-09-13) ### Features * **ButtonLink:** add default variant ([#1211](#1211)) ([97aa4ad](97aa4ad)) * **Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs:** remove icon prop and use only Icon/asset ([#1206](#1206)) ([eb06fa3](eb06fa3)) * **Feedback, FixedFooterLayout, Dialog, Accordion, Touchable, Header, IconButton, NavigationBar, OverscrollColor:** remove deprecated props ([#1205](#1205)) ([e1c84ec](e1c84ec)) * **Header, MainSectionHeader:** use "default" as component's default variant ([#1207](#1207)) ([29e0ef4](29e0ef4)) * **i18n:** refactor texts to improve bundle size ([#1228](#1228)) ([088a290](088a290)) * **Icons:** add new icons and rename others ([#1197](#1197)) ([4cfffa5](4cfffa5)) * **React:** require react18 and replace useAriaId with React.useId ([#1213](#1213)) ([b29f778](b29f778)) * **skin:** rename some design tokens ([#1203](#1203)) ([d0a1452](d0a1452)) * **Snackbar:** update snackbar duration logic ([#1208](#1208)) ([2ef5804](2ef5804)) * **ThemeVariant:** add media theme variant and update components in order to adapt to it ([#1236](#1236)) ([eada194](eada194)) * **Titles:** add new Title2, replace Title2 and Title3 with Title3 and Title4 respectively ([#1202](#1202)) ([bed8fdf](bed8fdf)) ### BREAKING CHANGES * **ThemeVariant:** a new theme variant has been added and it may require changes in any logic that depends on variants * **ButtonLink:** ButtonLink won't be small as default anymore * **i18n:** texts from useTheme are now empty by default. If a mistica defined text is required, it should be imported from text-tokens and must be translated using the t function from useTheme * **Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs:** icon/Icon/asset props are renamed in several components * **skin:** some mistica internal tokens are renamed * **Snackbar:** snackbar duration prop type has changed * **React:** react17 is no longer supported by Mistica and useAriaId hook is removed * **Header, MainSectionHeader:** Header's variant changes from inverse to default if variant prop is not used * **Feedback, FixedFooterLayout, Dialog, Accordion, Touchable, Header, IconButton, NavigationBar, OverscrollColor:** deprecated props are removed in several components * **Titles:** renamed Title2 to Title3 and Title3 to Title4 * **Icons:** renamed some icons autentication-failure → authentication-failure autentication-success → authentication-success adn → dna hamburguer → hamburger garaje → garage millenials → millennials not-photo-camera → no-photo-camera not-conexion-file → no-conexion-file smiley-happy → face-happy smiley-sad → face-sad like → thumb-up

fix naming convention

26e9341

marcoskolodny requested review from pladaria, atabel and yceballost August 21, 2024 18:15

marcoskolodny added the breaking-change label Aug 21, 2024

marcoskolodny mentioned this pull request Aug 21, 2024

Breaking changes for 17.0.0 #626

Open

2 tasks

update playroom snippets

08e7361

atabel approved these changes Aug 22, 2024

View reviewed changes

src/tabs.tsx Show resolved Hide resolved

resolve conflicts

deea132

pladaria reviewed Aug 26, 2024

View reviewed changes

pladaria approved these changes Aug 26, 2024

View reviewed changes

Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1992

e15685b

-fix-icon-asset-naming-convention

yceballost approved these changes Aug 29, 2024

View reviewed changes

marcoskolodny added 2 commits September 11, 2024 17:58

Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1992

ee1ff99

-fix-icon-asset-naming-convention

remove react.fc

9ce37b8

marcoskolodny added this pull request to the merge queue Sep 12, 2024

github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Sep 12, 2024

fix conflicts

6490451

marcoskolodny enabled auto-merge September 12, 2024 16:55

marcoskolodny added this pull request to the merge queue Sep 12, 2024

Merged via the queue into master with commit afc4604 Sep 12, 2024
11 checks passed

marcoskolodny deleted the WEB-1992-fix-icon-asset-naming-convention branch September 12, 2024 17:15

tuentisre added the released label Sep 12, 2024

atabel pushed a commit that referenced this pull request Sep 13, 2024

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScre…

eb06fa3

…en, Tabs): remove icon prop and use only Icon/asset (#1206) BREAKING CHANGE: icon/Icon/asset props are renamed in several components

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

marcoskolodny commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

pladaria Aug 26, 2024

marcoskolodny Aug 26, 2024 •

edited

Loading

tuentisre commented Sep 12, 2024

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

Conversation

marcoskolodny commented Aug 21, 2024 • edited Loading

⚠️ Remark

🗒️ Note

Components with asset prop:

Components with Icon prop:

github-actions bot commented Aug 21, 2024 • edited Loading

github-actions bot commented Aug 21, 2024 • edited Loading

github-actions bot commented Aug 21, 2024 • edited Loading

pladaria Aug 26, 2024

Choose a reason for hiding this comment

marcoskolodny Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

tuentisre commented Sep 12, 2024

marcoskolodny commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

marcoskolodny Aug 26, 2024 •

edited

Loading