feat(PosterCard): allow backgroundColor/variant #841

atabel · 2023-08-03T13:47:51Z

github-actions · 2023-08-03T13:52:09Z

Size stats

	master	this branch	diff
Total JS	9.42 MB	9.42 MB	+513 B
JS without icons	914 kB	915 kB	+513 B
Lib overhead	127 kB	127 kB	0 B
Lib overhead (gzip)	32.9 kB	32.9 kB	0 B

github-actions · 2023-08-03T13:53:30Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-7foeug3nv-tuentisre.vercel.app

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

github-actions · 2023-08-03T13:54:11Z

Accessibility report
✔️ No issues found

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

github-actions · 2023-08-11T07:05:38Z

Screenshot tests report

✔️ All passing

yceballost · 2023-08-11T07:20:08Z

src/__stories__/poster-card-story.tsx

+    },
+    backgroundColor: {
+        control: {type: 'color'},
+        if: {arg: 'background', eq: 'color'},


I like the solution that was implemented by vivo
https://mistica-a10w6pvfo-tuentisre.vercel.app/?path=/story/components-cards-poster-card--default

You can fill to this field some hex value (#FFF) or a constant (backgroundBrandSecondary) instead of color picker. (From the design side, when possible, always try to use constants and not hex values)

hmmm... how do you know you can use a color constant name there?, that's not intuitive at all

I've tried something different, please take a look now

That's perfect. To be picky maybe we could filter tokens with "text" to avoid that appearing in the list 🌝

that would be tricky, which colors should we exclude/include?

yceballost · 2023-08-11T07:25:08Z

src/card.tsx

Same comment that @aweell said in the other PR. When the card doesn't have image or video and inverse is false, the hover should be the same or similar to row list hover or the rest of white background component hovers.

https://www.figma.com/file/tKdPOfcUALzVIh5oizFbm7/%F0%9F%94%B8-Cards-Specs?type=design&node-id=2094-7031&mode=design&t=UXAJ8MkmcdI5ik8a-4

@aweell maybe it is not too clear in specs, two teams overlooked it.

I think it should be fixed now

The background now work fine, but the top actions states also need to change depending if the background is media or no media variant="inverse", no media variant="default/alternative".

yceballost · 2023-08-11T07:26:45Z

Screenshot tests report

❌ poster-card / poster-card-with-video

I had the same problem yesterday with that screenshot 🤔

src/__stories__/poster-card-story.tsx

atabel · 2023-08-11T08:49:22Z

Screenshot tests report
x poster-card / poster-card-with-video

I had the same problem yesterday with that screenshot thinking

This test seems unstable

atabel · 2023-08-11T09:21:46Z

src/__type_tests__/card-type-test.tsx

+<PosterCard title="title" isInverse />;
+<PosterCard title="title" variant="inverse" />;
+<PosterCard title="title" variant="alternative" />;
+<PosterCard title="title" isInverse backgroundColor="red" />;
+<PosterCard title="title" variant="inverse" backgroundColor="red" />;


these are valid usage examples

aweell

LGTM

yceballost · 2023-08-11T11:18:30Z

...pshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-1-snap.png

This card is impossible to have in dark mode. ThemeVariant is forcing these text to white :( I think that could be a problem. Can we force themeVariant also in dark mode?

This is tricky because Text just uses textPrimary/textPrimaryInverse depending on the variant context, but those color constants are both white in dark mode. So the only way to fix this would be to find a way to disable dark mode in this area. We could explore a solution in a different PR to manage this case

https://jira.tid.es/browse/WEB-1502

.../poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-inverse-1-snap.png

src/__type_tests__/card-type-test.tsx

marcoskolodny · 2023-08-11T13:09:57Z

src/__type_tests__/card-type-test.tsx

 <PosterCard title="title" />;
+// @ts-expect-error if you set a custom backgroundColor, you should specify the variant


Why not using a default value for the variant if it's not provided?

I think I prefer this to be explicit. You set either backgroundImage, backgroundColor or backgroundVideo. backgroundColor can be set explicitly with a custom color (backgroundColor="red") or implicitly using an specific variant (variant="inverse" or isInverse)

# [14.20.0](v14.19.0...v14.20.0) (2023-08-11) ### Bug Fixes * **AdvancedDataCard:** avoid content overflow with top actions ([#839](#839)) ([a1eae2d](a1eae2d)) * **AdvancedDataCard:** Fix Touchable layout, extras positioning, closable DOM position... ([#833](#833)) ([21dea84](21dea84)) * **AdvancedDataCard:** touchable area didn't cover the whole card in some cases ([#847](#847)) ([31ec606](31ec606)) * **ButtonLink:** add aligned prop back until next major release ([#846](#846)) ([3de841c](3de841c)) * **Tabs:** style fixes and align with design spec ([#832](#832)) ([37de417](37de417)) ### Features * **ButtonLink:** scale chevron according to font size ([#849](#849)) ([b69b651](b69b651)) * **Icons:** new Subtract icons ([#845](#845)) ([5f0a5f0](5f0a5f0)) * **NakedCard:** add support for top icon ([#836](#836)) ([f438079](f438079)) * **PosterCard:** allow backgroundColor/variant ([#841](#841)) ([f8e1f37](f8e1f37)) * **Row,BoxedRow:** add pressed style to list rows ([#838](#838)) ([8437198](8437198)) * **skin:** update design tokens ([#851](#851)) ([544f812](544f812)) * **SnapCard, DataCard, DisplayDataCard:** add aspect ratio support ([#848](#848)) ([b3e1639](b3e1639)) * **Title:** add tokens for Title2 and create Title3 ([#835](#835)) ([e218ba1](e218ba1))

tuentisre · 2023-08-11T14:54:51Z

🎉 This PR is included in version 14.20.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

atabel added 2 commits August 3, 2023 15:47

WEB-1498 feat(PosterCard): allow backgroundColor/variant

3a62201

Merge branch 'master' into atoledano-poster-card-background

ca8c627

atabel requested review from marcoskolodny, yceballost and aweell August 11, 2023 06:52

Merge branch 'master' into atoledano-poster-card-background

e1c2498

atabel marked this pull request as ready for review August 11, 2023 06:52

yceballost requested changes Aug 11, 2023

View reviewed changes

yceballost reviewed Aug 11, 2023

View reviewed changes

src/__stories__/poster-card-story.tsx Show resolved Hide resolved

atabel added 2 commits August 11, 2023 10:44

improve story controls

8a39686

fix hover

06ef0fc

atabel added 2 commits August 11, 2023 10:53

fix top actions in story

73c27fb

add some tests

2a9a62a

atabel requested a review from yceballost August 11, 2023 09:18

fix story background type

05c0337

atabel commented Aug 11, 2023

View reviewed changes

atabel added 2 commits August 11, 2023 11:27

fix top actions style

25ca481

Merge branch 'master' into atoledano-poster-card-background

ae9fb8a

aweell approved these changes Aug 11, 2023

View reviewed changes

yceballost requested changes Aug 11, 2023

View reviewed changes

snippets

757bad4

atabel mentioned this pull request Aug 11, 2023

PosterCard-background #844

Closed

marcoskolodny reviewed Aug 11, 2023

View reviewed changes

src/__type_tests__/card-type-test.tsx Outdated Show resolved Hide resolved

fix typpo

a24796c

marcoskolodny reviewed Aug 11, 2023

View reviewed changes

yceballost self-requested a review August 11, 2023 13:14

marcoskolodny approved these changes Aug 11, 2023

View reviewed changes

yceballost approved these changes Aug 11, 2023

View reviewed changes

atabel added this pull request to the merge queue Aug 11, 2023

Merged via the queue into master with commit f8e1f37 Aug 11, 2023
10 checks passed

atabel deleted the atoledano-poster-card-background branch August 11, 2023 13:40

tuentisre added the released label Aug 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(PosterCard): allow backgroundColor/variant #841

feat(PosterCard): allow backgroundColor/variant #841

atabel commented Aug 3, 2023

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 11, 2023 •

edited

Loading

yceballost Aug 11, 2023

atabel Aug 11, 2023

atabel Aug 11, 2023

aweell Aug 11, 2023

yceballost Aug 11, 2023

atabel Aug 11, 2023

yceballost Aug 11, 2023

atabel Aug 11, 2023

aweell Aug 11, 2023

atabel Aug 11, 2023

yceballost commented Aug 11, 2023

atabel commented Aug 11, 2023

atabel Aug 11, 2023

aweell left a comment

yceballost Aug 11, 2023

atabel Aug 11, 2023

atabel Aug 11, 2023

marcoskolodny Aug 11, 2023

atabel Aug 11, 2023 •

edited

Loading

tuentisre commented Aug 11, 2023

		<PosterCard title="title" />;
		// @ts-expect-error if you set a custom backgroundColor, you should specify the variant

feat(PosterCard): allow backgroundColor/variant #841

feat(PosterCard): allow backgroundColor/variant #841

Conversation

atabel commented Aug 3, 2023

github-actions bot commented Aug 3, 2023 • edited Loading

github-actions bot commented Aug 3, 2023 • edited Loading

github-actions bot commented Aug 3, 2023 • edited Loading

github-actions bot commented Aug 11, 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yceballost commented Aug 11, 2023

atabel commented Aug 11, 2023

Choose a reason for hiding this comment

aweell 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

Choose a reason for hiding this comment

atabel Aug 11, 2023 • edited Loading

Choose a reason for hiding this comment

tuentisre commented Aug 11, 2023

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 11, 2023 •

edited

Loading

atabel Aug 11, 2023 •

edited

Loading