feat(message-card): build message card by lhbrennan · Pull Request #5068 · uber/baseweb

lhbrennan · 2022-07-29T21:01:44Z

Description

New MessageCard component

Scope

Minor: New Feature

codesandbox-ci · 2022-07-29T21:03:05Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d5ded55:

Sandbox	Source
Basic usage	Configuration

cloudflare-workers-and-pages · 2022-07-29T21:35:15Z

Deploying with Cloudflare Pages

Latest commit:	`35d6bc0`
Status:	✅ Deploy successful!
Preview URL:	https://c8411b27.baseweb.pages.dev
Branch Preview URL:	https://message-card.baseweb.pages.dev

View logs

UberOpenSourceBot · 2022-07-29T22:12:20Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5069

lhbrennan · 2022-07-29T23:22:18Z

src/message-card/utils.ts

+        it does not pass accessibility contrast tests for either white or black text.`
+    );
+  }
+  if (LIGHT_COLORS.includes(backgroundColor)) {


I thought about using a map instead of an array for LIGHT_COLORS and DARK_COLORS so I can get constant time lookup here. Seems like the performance gain is negligible, but let me know if you disagree.

try using a Set

Ah, great idea!

lhbrennan · 2022-07-29T23:23:03Z

src/message-card/types.js.flow

+  overrides?: MessageCardOverridesT,
+};
+
+export type StyledRoot = StyletronComponent<


I'm not entirely confident that these exports at the bottom here are correctly typed -- please take a close look.

UberOpenSourceBot · 2022-07-29T23:43:57Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

lhbrennan · 2022-08-01T21:54:33Z

src/message-card/constants.ts

+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export const BACKGROUND_COLOR_TYPE = {


BACKGROUND_COLOR_TYPE is bulky. Welcoming suggestions for alternate ways to name this constant.

lhbrennan · 2022-08-01T22:02:43Z

src/message-card/index.ts

+export { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';


MessageCard uses the secondary and tertiary values from the Button's KIND constant. Does it make sense to duplicate that constant in MessageCard's constants.ts file and expose it? Or should devs using MessageCard import the KIND constant from baseui/button?

I ended up creating a BUTTON_KIND constant to export from MessageCard. I couldn't get the docs site working otherwise.

UberOpenSourceBot · 2022-08-01T22:22:33Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

lhbrennan · 2022-08-01T22:35:50Z

src/message-card/types.ts

+  onClick: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+  heading?: string;
+  paragraph?: string;
+  buttonLabel?: string;


Design uses the word "Call to Action" instead of "Button". Semantically, "Call to Action" is more accurate since the entire MessageCard surface is a tap target, whereas the button itself is inert. But it seems to me that anyone familiar with Base Web would think of this element as "Button" since it does use the Base Web Button component. Open to suggestions.

UberOpenSourceBot · 2022-08-04T22:48:52Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-05T01:32:46Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-05T02:55:03Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-05T21:17:27Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-06T01:44:24Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-08T19:31:45Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-09T00:18:12Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

UberOpenSourceBot · 2022-08-09T01:43:15Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

Cloudflare was failing to build due to node running out of memory

UberOpenSourceBot · 2022-08-09T18:58:30Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5070

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

UberOpenSourceBot · 2022-08-10T03:41:22Z

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5085

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

chasestarr · 2022-08-10T20:37:46Z

src/message-card/utils.ts

+        it does not pass accessibility contrast tests for either white or black text.`
+    );
+  }
+  if (LIGHT_COLORS.includes(backgroundColor)) {


try using a Set

src/message-card/types.ts

src/message-card/message-card.tsx

UberOpenSourceBot mentioned this pull request Jul 29, 2022

test(vrt): update visual snapshots for message-card [skip ci] #5069

Merged

lhbrennan force-pushed the message-card branch from af1bb4d to 6cb6dc0 Compare July 29, 2022 23:11

lhbrennan commented Jul 29, 2022

View reviewed changes

UberOpenSourceBot mentioned this pull request Jul 29, 2022

test(vrt): update visual snapshots for message-card [skip ci] #5070

Merged

lhbrennan commented Aug 1, 2022

View reviewed changes

lhbrennan force-pushed the message-card branch from 87132b5 to b9c7a94 Compare August 5, 2022 20:44

lhbrennan added 11 commits August 8, 2022 11:52

feat(message-card): build message card

498c6b2

chore(message-card): replace StyledButtonContainer with Button

2fb004d

chore(message-card): fix svg import issue

4ff32a7

chore(message-card): add flow types

4b8158d

chore(message-card): cleanup

d87e6b4

chore(message-card): more cleanup

2f3509a

chore(message-card): change heading, paragraph, buttonLabel to ReactNode

de53c9e

chore(message-card): add oversized jpg image to trailing scenario

1ee0bb6

chore(message-card): convert img to background img

0e6836d

chore(message-card): add dark mode overlay

d1d4578

chore(message-card): make call-to-action button always light theme

b6991a1

chore(message-card): add docs

b52ef26

lhbrennan force-pushed the message-card branch from 26cd366 to b52ef26 Compare August 8, 2022 18:55

Luke Brennan added 2 commits August 8, 2022 11:58

chore(message-card): add header to index.d.ts file

a56a6be

chore(color-tokens): add flow types for new color primitives

2f16abb

chore(message-card): fix change type.js.flow to index.js.flow

78067a7

lhbrennan force-pushed the message-card branch from f8f3fdd to 78067a7 Compare August 8, 2022 23:44

chore(message-card): remove unused imports from docs examples

e01b0dc

chore(docs): double max_old_space_size size

58804cf

Cloudflare was failing to build due to node running out of memory

test(vrt): update visual snapshots for 58804cf [skip ci] (#5070)

154138c

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

lhbrennan marked this pull request as ready for review August 9, 2022 20:42

lhbrennan requested review from chasestarr and tajo as code owners August 9, 2022 20:42

Luke Brennan added 3 commits August 9, 2022 16:57

Merge branch 'master' into message-card

4249cad

fix(message-card): change button size to compact

719464b

fix(message-card): button text is sometimes blue on mobile

5a290bd

UberOpenSourceBot mentioned this pull request Aug 10, 2022

test(vrt): update visual snapshots for message-card [skip ci] #5085

Merged

test(vrt): update visual snapshots for 5a290bd (#5085)

e86636e

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

chasestarr reviewed Aug 10, 2022

View reviewed changes

Luke Brennan added 2 commits August 10, 2022 15:16

chore(message-card): use sets for light/dark/contrast color lists

f30a4ca

chore(message-card): add aria-label to image

9587ab0

chasestarr approved these changes Aug 10, 2022

View reviewed changes

Luke Brennan added 2 commits August 10, 2022 16:12

Merge branch 'master' into message-card

35d6bc0

Merge branch 'master' into message-card

d5ded55

lhbrennan merged commit a6a7281 into master Aug 11, 2022

lhbrennan deleted the message-card branch August 11, 2022 16:52

Conversation

lhbrennan commented Jul 29, 2022

Description

Scope

Uh oh!

codesandbox-ci bot commented Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Pages

Uh oh!

UberOpenSourceBot commented Jul 29, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

UberOpenSourceBot commented Jul 29, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

UberOpenSourceBot commented Aug 1, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

UberOpenSourceBot commented Aug 4, 2022

Uh oh!

UberOpenSourceBot commented Aug 5, 2022

Uh oh!

UberOpenSourceBot commented Aug 5, 2022

Uh oh!

UberOpenSourceBot commented Aug 5, 2022

Uh oh!

UberOpenSourceBot commented Aug 6, 2022

Uh oh!

UberOpenSourceBot commented Aug 8, 2022

Uh oh!

UberOpenSourceBot commented Aug 9, 2022

Uh oh!

UberOpenSourceBot commented Aug 9, 2022

Uh oh!

UberOpenSourceBot commented Aug 9, 2022

Uh oh!

UberOpenSourceBot commented Aug 10, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codesandbox-ci bot commented Jul 29, 2022 •

edited

Loading

cloudflare-workers-and-pages bot commented Jul 29, 2022 •

edited

Loading