[THES-87] [BpkBottomSheet] implementing component #3108

JToporkiewicz · 2023-12-05T16:27:19Z

Adding a new component - Bottom Sheet, based on Figma designs. This component is very similar to BpkModal on desktop. On mWeb it has some significant style differences as well as minor functional differences to BpkModal (especially in the header section)

Props:

Default:

Opening and closing animation (mWeb):
https://github.com/Skyscanner/backpack/assets/35368044/0e6a9bb3-33fd-46dd-be20-f0c7700d28bc

With Action in header:

With no header title:

Overflowing content:

Default Desktop:

Desktop wide:

Remember to include the following changes:

Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
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

github-actions · 2023-12-06T12:04:02Z

Browser support

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

Generated by 🚫 dangerJS against d41e8fd

github-actions · 2023-12-06T12:04:28Z

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

github-actions · 2023-12-06T15:44:49Z

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

packages/bpk-component-bottom-sheet/index.d.ts

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx

packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx

github-actions · 2023-12-07T13:36:32Z

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

github-actions · 2023-12-07T13:47:21Z

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

github-actions · 2023-12-11T11:23:55Z

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

github-actions · 2023-12-11T11:33:20Z

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

README.md

examples/bpk-component-bottom-sheet/examples.tsx

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss

packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.tsx

github-actions · 2023-12-11T14:16:05Z

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

packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.tsx

olliecurtis · 2023-12-11T16:11:22Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx

+        id={id}
+        onClose={handleClose}
+        closeOnScrimClick={closeOnScrimClick}
+        containerClassName={getClassName('bpk-bottom-sheet--container')}


This isn't needed anymore?

containerClassName is for the Scrim so it is still needed

github-actions · 2023-12-11T16:26:16Z

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

github-actions · 2023-12-12T11:02:13Z

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

github-actions · 2023-12-12T11:23:46Z

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

github-actions · 2023-12-12T11:28:40Z

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

github-actions · 2023-12-12T11:56:53Z

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

Justyna Toporkiewicz added 3 commits December 5, 2023 11:56

THES-87 - implement bottom sheet component

9877684

THES-87 - update ReadMe

b0b04eb

THES-87 - fix title text alignment

54c92ac

JToporkiewicz marked this pull request as draft December 5, 2023 16:27

Justyna Toporkiewicz and others added 4 commits December 5, 2023 16:34

THES-87 - add sliding in animation

9d2a0f5

THES-87 - smooth animation

aa4a566

Merge branch 'main' into bpk-component-bottom-sheet

d242ec4

THES-87 - update heading label + accessibility test

b39b6fd

JToporkiewicz added the minor Non breaking change label Dec 6, 2023

JToporkiewicz requested a review from olliecurtis December 6, 2023 11:53

JToporkiewicz marked this pull request as ready for review December 6, 2023 11:54

Merge branch 'main' into bpk-component-bottom-sheet

761571f

pangszenga approved these changes Dec 6, 2023

View reviewed changes

THES-87 - fix header sticky

5837879

anambl reviewed Dec 6, 2023

View reviewed changes

Justyna Toporkiewicz added 2 commits December 7, 2023 12:30

THES-87 - address comments

aa13436

THES-87 - add exit animation

475e4c6

THES-87 - tidy up test

34a1131

JToporkiewicz requested a review from anambl December 7, 2023 13:44

THES-87 - increase border radius

e49d3ad

Justyna Toporkiewicz and others added 2 commits December 11, 2023 11:28

THES-87 - fix stylesheet css file

c5e176a

Merge branch 'main' into bpk-component-bottom-sheet

cedc089

olliecurtis requested changes Dec 11, 2023

View reviewed changes

THES-87 - address comments -> examples + props

aa28d37

JToporkiewicz requested a review from olliecurtis December 11, 2023 14:25

olliecurtis requested changes Dec 11, 2023

View reviewed changes

THES-87 - remove unnecessary variable

9311e20

THES-87 - fix action text alignment

903ef78

THES-87 - fix action text again

da439ae

THES-87 - update css stylesheet

a74d75a

THES-87 - fix rtl header layout

d41e8fd

olliecurtis approved these changes Dec 12, 2023

View reviewed changes

olliecurtis merged commit 99415a0 into main Dec 12, 2023
9 checks passed

olliecurtis deleted the bpk-component-bottom-sheet branch December 12, 2023 14:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[THES-87] [BpkBottomSheet] implementing component #3108

[THES-87] [BpkBottomSheet] implementing component #3108

JToporkiewicz commented Dec 5, 2023 •

edited

github-actions bot commented Dec 6, 2023 •

edited

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

olliecurtis Dec 11, 2023

JToporkiewicz Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

[THES-87] [BpkBottomSheet] implementing component #3108

[THES-87] [BpkBottomSheet] implementing component #3108

Conversation

JToporkiewicz commented Dec 5, 2023 • edited

github-actions bot commented Dec 6, 2023 • edited

Browser support

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

olliecurtis Dec 11, 2023

Choose a reason for hiding this comment

JToporkiewicz Dec 11, 2023

Choose a reason for hiding this comment

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

JToporkiewicz commented Dec 5, 2023 •

edited

github-actions bot commented Dec 6, 2023 •

edited