PosterCard-background #844

brunocezar-tlf · 2023-08-07T13:22:15Z

https://www.figma.com/file/tKdPOfcUALzVIh5oizFbm7/🔸-Cards-Specs?type=design&node-id=1868%3A3853&mode=design&t=fpLlSjW8QU44yIDg-1

github-actions · 2023-08-07T13:25:04Z

Size stats

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

github-actions · 2023-08-07T13:27:07Z

Accessibility report
✔️ No issues found

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

github-actions · 2023-08-07T13:34:47Z

Screenshot tests report

✔️ All passing

github-actions · 2023-08-07T13:36:46Z

Deploy preview for mistica-web ready!

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

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

daviteixeira-tlf · 2023-08-07T16:25:21Z

It would be a good idea to add a snippet that uses the backgroundColor for those who are going to use the playroom.

daviteixeira-tlf · 2023-08-07T16:26:33Z

In the storybook, it's better to move up the backgroundColor to be below the background, so when you see the two properties
be one below the other. Also add one more case when there is no media to use the backgroundColor and add the color backgroundBrand as the default backgroundColor in the storybook.

daviteixeira-tlf · 2023-08-07T16:24:38Z

src/__stories__/poster-card-story.tsx

@@ -58,6 +60,8 @@ export const Default: StoryComponent<PosterCardArgs> = ({
    width,
    height,
    aspectRatio,
+    inverse,


Adjust property name to isInverse to maintain standardization.

daviteixeira-tlf · 2023-08-07T16:24:55Z

src/__stories__/poster-card-story.tsx

@@ -155,7 +162,9 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                        width={width}
                        height={height}
                        aspectRatio={aspectRatio}
+                        // isInverse={inverse}


Could you remove this comment here.

daviteixeira-tlf · 2023-08-09T14:07:25Z

@atabel @aweell

yceballost · 2023-08-09T15:11:41Z

src/card.tsx

this usage is wrong
https://tinyurl.com/24fsdre5

the possibility to change text color its only allowed for custom background color

update: In windows works (or isInverse doesn't works xD) as expected. In Mac OS chrome this is happening

"the possibility to change text color its only allowed for custom background color"
The text should only change the color if it receives a background color, in the case of an image, should the color be default?

"update: In windows works (or isInverse doesn't works xD) as expected. In Mac OS chrome this is happening"
I did not understand your comment. Can you explain better?

The text should only change the color if it receives a background color, in the case of an image, should the color be default?

Exactly. When the card has an image, the gradient covers the need to make the text visible in most of the images. So we don't need to give the possibility to make color changes in the background image and video cases

I did not understand your comment. Can you explain better?

Sure! I tried the link from my first message in Windows, and the isInverse prop doesn't works in the same way as in Chrome in Mac OS. Quite weird in my opinion.. i don't know if anybody can check this in other computes with both OS.

~~In chrome window 10, isInverse prop always paint the text in white (with true and false value) and in chrome in Mac OS, the prop change color as I show in the image 🤔~~

~~Do I make myself clear?~~

Edited: Talked with edu, the reason was dark mode

aweell · 2023-08-10T07:02:32Z

src/card.tsx

@@ -1275,7 +1279,10 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                    >
                        {isTouchable && <div className={styles.touchableCardOverlayMedia} />}


When the card has an image or video defined should use the touchableCardOverlayMedia style, but when the card has no media defined or a custom color defined, depending on if it's inverse or not should use touchableCardOverlayInverse / touchableCardOverlay

I did not understand your comment. Could you explain it better?

Of course! there are three cases:

The card has media defined: The overlay that handle the :hover and pressed styles should use touchableCardOverlayMedia that makes the layer to have a black with 25% opacity when hovered and 35% when pressed, that works in most images since we don't know how dark/light they are.

The card has no media defined and is inverse={false}: The overlay that handle the :hover and pressed styles should use touchableCardOverlay. Since the background will be white (the default) or a light color, the styles for the overlay are more subtle.

The card has no media defined and is inverse={true}: The overlay that handle the :hover and pressed styles should use touchableCardOverlayInverse. Since the background will be backgroundContainerBrand (the default), backgroundContainerBrandOverInverse if it's inside an inverse context, or a dark color, the styles for the overlay should be a little bit stronger in order to be visible.

The same applies to the top actions container (image posted in the previous comment), depending of the case the container will have different default an interaction states.

The card has media defined: The actions container by default is inverse at 70%, and we change the opacity for the :hover (90%) and pressed (100%) states. The icon is black.

The card has no media defined and is inverse={false}: The actions container by default is transparent and uses the tokens backgroundContainerHover & backgroundContainerPressed for the interaction states. The icon uses neutralHigh.

The card has no media defined and is inverse={true}: The actions container by default is transparent and uses the tokens backgroundContainerBrandHover & backgroundContainerBrandPressed for the interaction states. The icon uses inverse.

I hope the explanation is more clear now 😃

atabel

Hi @BrunoGuimaraes103, we have a duplicated PR which implements this same feature in #841

Given this PR needs some fixes/changes, I think it would be more effective to merge #841 instead of dedicating effort to fix this. You can take a look to #841 if you want to see if it covers your needs.

Sorry for the confusion, we didn't know you were working in the same task :(

added prop isInverse and backgroundColor

7e3154c

brunocezar-tlf requested review from daviteixeira-tlf and EduardoLafuente August 7, 2023 13:22

brunocezar-tlf added 6 commits August 8, 2023 15:25

fix: poster-card-story and snippets

3dfa669

fix: backgroundColor default

c2ef620

fix: adjust text

08c4498

fix: exec screenshot-test

8698f8b

fix: exec screenshot-test

c381da8

fix: ts-check

b925ba3

EduardoLafuente approved these changes Aug 9, 2023

View reviewed changes

daviteixeira-tlf approved these changes Aug 9, 2023

View reviewed changes

daviteixeira-tlf requested review from atabel and aweell August 9, 2023 14:07

yceballost requested changes Aug 9, 2023

View reviewed changes

aweell requested changes Aug 10, 2023

View reviewed changes

fix: isInverse darkMode

43028a4

brunocezar-tlf requested a review from yceballost August 10, 2023 19:32

atabel reviewed Aug 11, 2023

View reviewed changes

atabel closed this Aug 11, 2023

marcoskolodny deleted the posterCard-background branch August 30, 2023 13:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PosterCard-background #844

PosterCard-background #844

brunocezar-tlf commented Aug 7, 2023

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

daviteixeira-tlf commented Aug 7, 2023

daviteixeira-tlf commented Aug 7, 2023 •

edited

Loading

daviteixeira-tlf Aug 7, 2023

daviteixeira-tlf Aug 7, 2023

daviteixeira-tlf commented Aug 9, 2023

yceballost Aug 9, 2023

yceballost Aug 9, 2023

brunocezar-tlf Aug 9, 2023

yceballost Aug 9, 2023 •

edited

Loading

aweell Aug 10, 2023

brunocezar-tlf Aug 10, 2023

aweell Aug 11, 2023 •

edited

Loading

atabel left a comment

		@@ -1275,7 +1279,10 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
		>
		{isTouchable && <div className={styles.touchableCardOverlayMedia} />}

PosterCard-background #844

PosterCard-background #844

Conversation

brunocezar-tlf commented Aug 7, 2023

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

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

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

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

daviteixeira-tlf commented Aug 7, 2023

daviteixeira-tlf commented Aug 7, 2023 • edited Loading

daviteixeira-tlf Aug 7, 2023

Choose a reason for hiding this comment

daviteixeira-tlf Aug 7, 2023

Choose a reason for hiding this comment

daviteixeira-tlf commented Aug 9, 2023

yceballost Aug 9, 2023

Choose a reason for hiding this comment

yceballost Aug 9, 2023

Choose a reason for hiding this comment

brunocezar-tlf Aug 9, 2023

Choose a reason for hiding this comment

yceballost Aug 9, 2023 • edited Loading

Choose a reason for hiding this comment

aweell Aug 10, 2023

Choose a reason for hiding this comment

brunocezar-tlf Aug 10, 2023

Choose a reason for hiding this comment

aweell Aug 11, 2023 • edited Loading

Choose a reason for hiding this comment

atabel left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 7, 2023 •

edited

Loading

daviteixeira-tlf commented Aug 7, 2023 •

edited

Loading

yceballost Aug 9, 2023 •

edited

Loading

aweell Aug 11, 2023 •

edited

Loading