feat(MediaCard): add top icon support #824

thiagoaraujo-tlf · 2023-07-18T14:02:10Z

Figma: https://www.figma.com/file/Y89JWviWrWV4RFFyqwCj3b/Asset-Media-Card---Circle-text?type=design&node-id=110-14234&mode=design&t=N44KdlRs1GH019sK-0

github-actions · 2023-07-18T14:04:57Z

Size stats

	master	this branch	diff
Total JS	9.39 MB	9.39 MB	+667 B
JS without icons	909 kB	910 kB	+667 B
Lib overhead	127 kB	127 kB	0 B
Lib overhead (gzip)	32.8 kB	32.8 kB	0 B

github-actions · 2023-07-18T14:06:26Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-nur5a8jud-tuentisre.vercel.app

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

github-actions · 2023-07-18T14:08:21Z

Accessibility report
✔️ No issues found

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

AlexJCelmer · 2023-07-19T12:41:42Z

src/card.tsx

@@ -407,6 +407,7 @@ interface MediaCardBaseProps {
    subtitle?: string;
    subtitleLinesMax?: number;
    description?: string;
+    icon?: React.ReactElement


In figma it was called Asset, you may need to make this switch from icon to Asset
@FernandoRRosa

yes, better call "asset" will be the new name for all props that contains assets. We want to make this breaking change in the next major and rename icon to asset to be more generic → #626

In my opinion, we have to embrace the new nomenclature and use asset

hmmm... I think we should still use icon, as we do in other Card components. I agree with Yayo that we have a pending rename for this prop, but we should do that rename in all the cards at the same time. That rename will be done in a future mistica major release, not now

AlexJCelmer · 2023-07-19T12:42:19Z

src/card.css.ts

@@ -147,6 +147,22 @@ export const mediaCardContent = style([
    },
 ]);

+export const mediaCardIcon = style([


If icon get changed to Asset will need to change here too.

yceballost

Could you add an asset prop to playroom Media Card snippets?

mistica-web/playroom/snippets.tsx

Lines 608 to 646 in 45d96ce

    
                   group: 'Cards', 
        
                   name: 'MediaCard with Image', 
        
                   code: ` 
        
                   <MediaCard 
        
                       media={<Image src="https://picsum.photos/1200/1200" aspectRatio="16:9"/>} 
        
                       headline={<Tag type="promo">Headline</Tag>} 
        
                       pretitle="Pretitle" 
        
                       title="Title" 
        
                       subtitle="Subtitle" 
        
                       description="Description" 
        
                       extra={<Placeholder />} 
        
                       button={ 
        
                           <ButtonPrimary small onPress={() => {}}> 
        
                               Action 
        
                           </ButtonPrimary> 
        
                       } 
        
                       buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>} 
        
                   />`, 
        
               }, 
        
               { 
        
                   group: 'Cards', 
        
                   name: 'MediaCard with Video', 
        
                   code: ` 
        
                   <MediaCard 
        
                       media={<Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" aspectRatio="16:9" />} 
        
                       headline={<Tag color={colors.promo}>headline</Tag>} 
        
                       pretitle="Pretitle" 
        
                       title="Title" 
        
                       subtitle="Subtitle" 
        
                       description="Description" 
        
                       extra={<Placeholder />} 
        
                       button={ 
        
                           <ButtonPrimary small onPress={() => {}}> 
        
                               Action 
        
                           </ButtonPrimary> 
        
                       } 
        
                       buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>} 
        
                   />`, 
        
               },

for example
asset={<Avatar size={40} src="https://source.unsplash.com/600x600/?face" />}

yceballost

nice 🤩

atabel · 2023-07-24T09:44:46Z

...__image_snapshots__/media-card-screenshot-test-tsx-media-card-with-body-closeable-1-snap.png

what happened here?
Please review that extra bottom padding

atabel · 2023-07-24T09:49:27Z

src/card.tsx

+                                    {asset}
+                                </Box>
+                            ) : (
+                                <Box paddingBottom={actions?.length || onClose ? 64 : 0} />


This is not needed. It's needed in other cards like DisplayMediaCard because the asset is not absolutely positioned like here.

atabel · 2023-07-24T09:54:50Z

src/card.css.ts

+                paddingLeft: 24,
+                paddingTop: 24,
+                paddingBottom: 32,


@aweell, it's ok to have different paddings in desktop? I don't see this in the specs.

If these are needed, we should move them to the Box element instead of creating a new media query here @thiagoaraujo-tlf:

<Box paddingLeft={{mobile: 16, desktop: 24}} paddingTop={{mobile: 16, desktop: 24}}>

Also, I think paddingRight and paddingBottom are not needed, just left and top

Yes, the asset has a spacing left and top of 16 in mobile and 24 in desktop.

Mobile:

Desktop:

This is intended to align the asset to the content since the padding of the content increases in desktop.

The other changes, it seems they're related the content padding? They are already working in the current component.

Mobile:

Desktop:

I just added icon padding for when it's on desktop @atabel

github-actions · 2023-07-24T15:22:16Z

Screenshot tests report

✔️ All passing

tuentisre · 2023-07-28T14:48:42Z

🎉 This PR is included in version 14.19.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [14.19.0](v14.18.2...v14.19.0) (2023-07-28) ### Bug Fixes * **ButtonLink, Title:** update alignments ([#829](#829)) ([87bd3e3](87bd3e3)) * **Cards:** CardAction type ([#831](#831)) ([6631788](6631788)) ### Features * **MediaCard:** add top icon support ([#824](#824)) ([e9a79a3](e9a79a3))

feat(PTIECBC03-4665): media-card circle

ce14917

AlexJCelmer requested review from FernandoRRosa and AlexJCelmer July 18, 2023 14:03

AlexJCelmer reviewed Jul 19, 2023

View reviewed changes

FernandoRRosa approved these changes Jul 19, 2023

View reviewed changes

gabrielmarquesini-tlf added 2 commits July 19, 2023 11:57

fix: switch name from icon to asset

6b3511d

fix: prettier executed in component story

ebbb6ac

gabrielmarquesini-tlf requested review from AlexJCelmer and FernandoRRosa July 19, 2023 18:10

AlexJCelmer approved these changes Jul 20, 2023

View reviewed changes

AlexJCelmer requested review from atabel and yceballost July 20, 2023 12:44

yceballost requested changes Jul 20, 2023

View reviewed changes

gabrielmarquesini-tlf force-pushed the media-card-circle-component branch from fcac9b7 to b0a9a43 Compare July 20, 2023 15:31

gabrielmarquesini-tlf requested a review from yceballost July 20, 2023 16:06

yceballost approved these changes Jul 20, 2023

View reviewed changes

feat: asset props in media card playroom

f8e5a89

gabrielmarquesini-tlf force-pushed the media-card-circle-component branch from b0a9a43 to f8e5a89 Compare July 20, 2023 17:15

gabrielmarquesini-tlf and others added 2 commits July 20, 2023 16:21

fix: resolving conflicting files

518abbd

Merge branch 'master' into media-card-circle-component

c34aa8d

atabel reviewed Jul 24, 2023

View reviewed changes

gabrielmarquesini-tlf and others added 3 commits July 24, 2023 08:08

Merge branch 'master' into media-card-circle-component

fb2824c

fix: switch name from asset to icon

80be765

fix: media card padding when closing

f5498ff

gabrielmarquesini-tlf and others added 2 commits July 24, 2023 14:21

fix: media card screenshot test

02fa71b

Merge branch 'master' into media-card-circle-component

1917d9b

gabrielmarquesini-tlf requested a review from atabel July 24, 2023 17:51

atabel approved these changes Jul 25, 2023

View reviewed changes

FernandoRRosa approved these changes Jul 25, 2023

View reviewed changes

fix: media card icon padding on desktop

b1d3d00

gabrielmarquesini-tlf requested a review from aweell July 26, 2023 15:49

aweell approved these changes Jul 27, 2023

View reviewed changes

atabel approved these changes Jul 28, 2023

View reviewed changes

atabel changed the title ~~feat(PTIECBC03-4665): media-card circle~~ feat(MediaCard): add top icon support Jul 28, 2023

atabel added this pull request to the merge queue Jul 28, 2023

Merged via the queue into master with commit e9a79a3 Jul 28, 2023
10 checks passed

atabel deleted the media-card-circle-component branch July 28, 2023 14:44

tuentisre added the released label Jul 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(MediaCard): add top icon support #824

feat(MediaCard): add top icon support #824

thiagoaraujo-tlf commented Jul 18, 2023

github-actions bot commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

AlexJCelmer Jul 19, 2023

yceballost Jul 20, 2023

atabel Jul 24, 2023

AlexJCelmer Jul 19, 2023

yceballost left a comment

yceballost left a comment

atabel Jul 24, 2023

atabel Jul 24, 2023

atabel Jul 24, 2023

aweell Jul 26, 2023 •

edited

Loading

gabrielmarquesini-tlf Jul 26, 2023

github-actions bot commented Jul 24, 2023 •

edited

Loading

tuentisre commented Jul 28, 2023

	group: 'Cards',
	name: 'MediaCard with Image',
	code: `
	<MediaCard
	media={<Image src="https://picsum.photos/1200/1200" aspectRatio="16:9"/>}
	headline={<Tag type="promo">Headline</Tag>}
	pretitle="Pretitle"
	title="Title"
	subtitle="Subtitle"
	description="Description"
	extra={<Placeholder />}
	button={
	<ButtonPrimary small onPress={() => {}}>
	Action
	</ButtonPrimary>
	}
	buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
	/>`,
	},
	{
	group: 'Cards',
	name: 'MediaCard with Video',
	code: `
	<MediaCard
	media={<Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" aspectRatio="16:9" />}
	headline={<Tag color={colors.promo}>headline</Tag>}
	pretitle="Pretitle"
	title="Title"
	subtitle="Subtitle"
	description="Description"
	extra={<Placeholder />}
	button={
	<ButtonPrimary small onPress={() => {}}>
	Action
	</ButtonPrimary>
	}
	buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
	/>`,
	},

feat(MediaCard): add top icon support #824

feat(MediaCard): add top icon support #824

Conversation

thiagoaraujo-tlf commented Jul 18, 2023

github-actions bot commented Jul 18, 2023 • edited Loading

github-actions bot commented Jul 18, 2023 • edited Loading

github-actions bot commented Jul 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yceballost left a comment

Choose a reason for hiding this comment

yceballost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aweell Jul 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 24, 2023 • edited Loading

tuentisre commented Jul 28, 2023

github-actions bot commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

aweell Jul 26, 2023 •

edited

Loading

github-actions bot commented Jul 24, 2023 •

edited

Loading