[DTO-4855] info banner changes #3072

sambocharov · 2023-11-07T15:26:05Z

Changes:

BpkInfoBanner component created according to the figma design
Depricated BpkBannerAlert

New Version Screenshots

Deprication of BpkBannerAlert:
Please, replace BpkBannerAlert with BpkInfoBanner

Remember to include the following changes:

README.md (If you have created a new component)
Component README.md
Tests
Storybook examples created/updated
For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

examples/bpk-component-info-banner/examples.js

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx

packages/bpk-component-info-banner/src/themeAttributes-test.ts

packages/bpk-component-info-banner/src/themeAttributes.d.ts

packages/bpk-component-info-banner/src/themeAttributes.ts

package-lock.json

github-actions · 2023-11-08T09:38:27Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 3c51c4e

github-actions · 2023-11-08T09:38:51Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-08T14:19:42Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-08T14:46:06Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-08T15:18:23Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-08T17:01:38Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-08T17:43:35Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-09T07:48:41Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-09T09:17:36Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-09T10:24:21Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-09T11:37:57Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-14T09:56:58Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

packages/bpk-mixins/src/mixins/_info-banners.scss

github-actions · 2023-11-14T12:20:39Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

olliecurtis

Could you take a look at the default storybook example as it seems to be erroring when trying to access it: https://backpack.github.io/storybook-prs/3072/?path=/story/bpk-component-info-banner--default

olliecurtis · 2023-11-14T13:19:16Z

packages/bpk-component-info-banner/src/BpkInfoBannerExpandable.tsx

One thing I notice missing here from the design and the API design is for the expandable is the action property that is optional and manages if to show an CTA inside and sets the click handler

olliecurtis

Sorry accidently clicked approve with the above request

github-actions · 2023-11-14T15:32:57Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-14T15:54:22Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

sambocharov · 2023-11-14T15:58:49Z

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx

@@ -167,6 +172,10 @@ const BpkInfoBannerInner = ({
    isExpandable && 'bpk-info-banner__header--expandable'
  );

+  const childrenContainerClassName = action && isExpandable


had to do this conditional class to add different spacing. Will need to check with designers as well, since with "action" button implementation was not reviewed.

github-actions · 2023-11-14T16:06:44Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-15T10:42:16Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

olliecurtis

LGTM! Thank you for the contribution and sticking by during this 😄

… prefix

github-actions · 2023-11-15T12:56:54Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

github-actions · 2023-11-15T13:19:10Z

Visit https://backpack.github.io/storybook-prs/3072 to see this build running in a browser.

sambocharov added the minor Non breaking change label Nov 7, 2023

olliecurtis requested changes Nov 7, 2023

View reviewed changes

olliecurtis reviewed Nov 7, 2023

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

sambocharov requested a review from olliecurtis November 8, 2023 17:04

olliecurtis requested changes Nov 14, 2023

View reviewed changes

packages/bpk-mixins/src/mixins/_info-banners.scss Outdated Show resolved Hide resolved

sambocharov requested a review from olliecurtis November 14, 2023 12:24

olliecurtis approved these changes Nov 14, 2023

View reviewed changes

olliecurtis requested changes Nov 14, 2023

View reviewed changes

sambocharov commented Nov 14, 2023

View reviewed changes

sambocharov requested a review from olliecurtis November 14, 2023 16:15

olliecurtis approved these changes Nov 15, 2023

View reviewed changes

DavidHeiniluoma added 2 commits November 15, 2023 12:40

make copy of component with new name and old code

42a1a58

footnote text style and border radius

ccfdef9

sambocharov and others added 23 commits November 15, 2023 12:40

padding on expanded version

6862125

updated snapshots

70596a6

backpack-foundations new version specified, tokens now have private…

e65605f

… prefix

brought back version 19 for bpk-svgs

73b3690

fix package-lock registry

3f4e739

flow comments removed

4e7307f

readme component references fixed

d0e2f4c

css changes according to codereview

90569bd

style prop made optional

bd46bd2

warning type fixed, type made optional

a79d9ec

simplified classNames

8e95547

removed themedAttributes files

0f42392

removed old flexbox browser support

0e9c5b6

built css module

1dc8d4e

sectionClass simplified

c36a8a3

index.d.ts fix

5ed9c68

changed private tokens

8dd5c99

moved small mixin to scss

a65f96a

implemented action functionality for expandable version

4cc5dde

snapshot update

50d2e66

linting fix

df24f1a

BpkButtonLink -> BpkLink

7f148e7

Update BpkInfoBannerExpandable.d.ts

e866d2d

olliecurtis force-pushed the DTO-4855-info-banner-changes branch from b0291b7 to e866d2d Compare November 15, 2023 12:43

Updating lockfile

d32ba2b

Updating lockfile

3c51c4e

olliecurtis merged commit 214a903 into main Nov 15, 2023
9 checks passed

olliecurtis deleted the DTO-4855-info-banner-changes branch November 15, 2023 14:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DTO-4855] info banner changes #3072

[DTO-4855] info banner changes #3072

sambocharov commented Nov 7, 2023

github-actions bot commented Nov 8, 2023 •

edited

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

olliecurtis left a comment

olliecurtis Nov 14, 2023

olliecurtis left a comment

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

sambocharov Nov 14, 2023

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 15, 2023

olliecurtis left a comment

github-actions bot commented Nov 15, 2023

github-actions bot commented Nov 15, 2023

[DTO-4855] info banner changes #3072

[DTO-4855] info banner changes #3072

Conversation

sambocharov commented Nov 7, 2023

github-actions bot commented Nov 8, 2023 • edited

Browser support

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 9, 2023

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

olliecurtis left a comment

Choose a reason for hiding this comment

olliecurtis Nov 14, 2023

Choose a reason for hiding this comment

olliecurtis left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

sambocharov Nov 14, 2023

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 15, 2023

olliecurtis left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 15, 2023

github-actions bot commented Nov 15, 2023

github-actions bot commented Nov 8, 2023 •

edited