Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Introduce Drawer component #DS-1580 #1836

Merged
merged 2 commits into from
Jan 14, 2025
Merged

Feat: Introduce Drawer component #DS-1580 #1836

merged 2 commits into from
Jan 14, 2025

Conversation

curdaj
Copy link
Contributor

@curdaj curdaj commented Jan 6, 2025

Description

Additional context

Issue reference

@github-actions github-actions bot added the feature New feature or request label Jan 6, 2025
@curdaj curdaj changed the title Feat: Introduce Drawer component #DS-1580 🚧 Feat: Introduce Drawer component #DS-1580 Jan 6, 2025
@netlify Netlify
Copy link

netlify bot commented Jan 6, 2025 •
edited
Loading

✅ Deploy Preview for spirit-design-system-storybook ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-storybook/deploys/6784d8d98049d0f2e1efa891
😎 Deploy Preview https://deploy-preview-1836--spirit-design-system-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Jan 6, 2025 •
edited
Loading

✅ Deploy Preview for spirit-design-system ready!

Name Link
🔨 Latest commit bab2e02
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system/deploys/6784d6868e635f000859f181
😎 Deploy Preview https://deploy-preview-1836--spirit-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 96 (no change from production)
Accessibility: 91 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@curdaj curdaj force-pushed the feat/ds-1580-drawer branch 2 times, most recently from 15e455e to 7e0e684 Compare January 6, 2025 14:39
@curdaj curdaj changed the title 🚧 Feat: Introduce Drawer component #DS-1580 Feat: Introduce Drawer component #DS-1580 Jan 7, 2025
@curdaj curdaj force-pushed the feat/ds-1580-drawer branch from a602bc8 to 87b58d1 Compare January 7, 2025 13:08
@curdaj curdaj added the run-visual-tests Runs visual regression testing on this PR label Jan 7, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12652236827/artifacts/2395700687

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12652443176/artifacts/2395757543

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12652670830/artifacts/2395821946

@curdaj curdaj force-pushed the feat/ds-1580-drawer branch from 32a323a to 078743d Compare January 7, 2025 13:54
@curdaj curdaj marked this pull request as ready for review January 7, 2025 14:01
crishpeen
crishpeen reviewed Jan 7, 2025
View reviewed changes
Copy link
Member

@crishpeen crishpeen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add more examples without close button, without close on backdrop and with long scrollable content.

This can be made using a form to configure (like in Toast).

packages/web-react/src/components/Drawer/Drawer.tsx Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/Drawer.tsx Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/DrawerCloseButton.tsx Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/index.html Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
adamkudrna
adamkudrna reviewed Jan 7, 2025
View reviewed changes
Copy link
Contributor

@adamkudrna adamkudrna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! 👍 I quickly checked the web implementation.

packages/web/src/scss/components/Drawer/index.html Outdated Show resolved Hide resolved
tests/e2e/demo-components-compare.spec.ts-snapshots/drawer-chromium-linux.png Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/README.md Outdated Show resolved Hide resolved
@crishpeen
Copy link
Member

Also, I am considering if we shouldn't point this branch to the integration/header. So we can test if it works in the whole combination.

@literat
Copy link
Collaborator

literat commented Jan 8, 2025

Do we add the same animation for opening and closing as we have in HeaderDialog?

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12668924346/artifacts/2400721338

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12669025106/artifacts/2400758163

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12671321005/artifacts/2401431936

@curdaj
Copy link
Contributor Author

curdaj commented Jan 8, 2025

Do we add the same animation for opening and closing as we have in HeaderDialog?

Sorry, you just hit the moment when the animation didn't work

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12672358761/artifacts/2401786201

@curdaj
Copy link
Contributor Author

curdaj commented Jan 8, 2025

Please add more examples without close button, without close on backdrop and with long scrollable content.

This can be made using a form to configure (like in Toast).

added

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12672609278/artifacts/2401853723

@curdaj curdaj force-pushed the feat/ds-1580-drawer branch from 59f5eed to 3c2efb4 Compare January 8, 2025 14:42
@coveralls
Copy link

Coverage Status

coverage: 79.469%. remained the same
when pulling 3c2efb4 on feat/ds-1580-drawer
into a9fee8e on main.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12672867838/artifacts/2401936074

@curdaj curdaj force-pushed the feat/ds-1580-drawer branch from ec773d3 to 9528554 Compare January 8, 2025 16:04
@curdaj curdaj changed the base branch from main to integration/header January 8, 2025 16:04
crishpeen
crishpeen reviewed Jan 9, 2025
View reviewed changes
packages/web-react/src/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/__tests__/useDrawerStyleProps.test.ts Outdated Show resolved Hide resolved
packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/README.md Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/_Drawer.scss

--#{tokens.$css-variable-prefix}drawer-translate-x: 0%;

all: unset;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(@adamkudrna) maybe it would be nice to add a reset mixin for this. I assume it is partly the same as in Modal (and HeaderDialog)

Copy link
Contributor

@adamkudrna adamkudrna Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean for this line? 👀 Or something like reset.dialog()?

packages/web/src/scss/components/Drawer/index.html Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/index.html Outdated Show resolved Hide resolved
packages/web/src/scss/components/Drawer/index.html Outdated Show resolved Hide resolved
@curdaj curdaj requested a review from crishpeen January 9, 2025 10:10
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12688087808/artifacts/2406469988

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/12688087808/artifacts/2406587584

@curdaj curdaj requested a review from literat January 10, 2025 09:38
literat
literat approved these changes Jan 10, 2025
View reviewed changes
Copy link
Collaborator

@literat literat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! A lot of work you have done 👏

@curdaj curdaj force-pushed the feat/ds-1580-drawer branch from 461da8b to bab2e02 Compare January 13, 2025 09:01
@curdaj curdaj merged commit 00ac421 into integration/header Jan 14, 2025
23 checks passed
@curdaj curdaj deleted the feat/ds-1580-drawer branch January 14, 2025 08:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@literat literat literat approved these changes

@crishpeen crishpeen crishpeen approved these changes

@pavelklibani pavelklibani Awaiting requested review from pavelklibani pavelklibani is a code owner

@adamkudrna adamkudrna Awaiting requested review from adamkudrna adamkudrna is a code owner

Assignees

@curdaj curdaj

Labels
feature New feature or request run-visual-tests Runs visual regression testing on this PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@curdaj @crishpeen @literat @coveralls @adamkudrna