chore: add drawer component #3294

YahiaElTai · 2023-11-08T18:17:03Z

Summary

This PR adds the new Drawer component which will implement a side panel container with similarities to modal pages.

github-actions · 2023-11-08T18:20:29Z

Deploy preview for merchant-center-application-kit ready!

✅ Preview
https://merchant-center-application-876fr84ll-commercetools.vercel.app
https://appkit-sha-ac20fb954c1c56bb1f382b65af946bdfd1fd67be.commercetools.vercel.app
https://appkit-pr-3294.commercetools.vercel.app

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

github-actions · 2023-11-08T18:21:47Z

Deploy preview for application-kit-custom-views ready!

✅ Preview
https://application-kit-custom-views-1x2pttih6-commercetools.vercel.app
https://appkit-cv-sha-ac20fb954c1c56bb1f382b65af946bdfd1fd67be.commercetools.vercel.app
https://appkit-cv-pr-3294.commercetools.vercel.app

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

...cation-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx

packages/application-components/src/components/modal-pages/internals/modal-page.tsx

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

...application-components/src/components/custom-views/custom-view-loader/custom-view-loader.tsx

packages/application-components/src/components/modal-pages/internals/modal-page.tsx

...cation-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx

packages/application-components/src/components/drawer/drawer.tsx

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

changeset-bot · 2023-11-09T12:47:46Z

🦋 Changeset detected

Latest commit: f3b3a78

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 37 packages

Name	Type
@commercetools-frontend/application-components	Minor
@commercetools-local/visual-testing-app	Minor
@commercetools-local/playground	Minor
@commercetools-frontend/application-shell	Minor
@commercetools-frontend/codemod	Minor
@commercetools-frontend/mc-scripts	Minor
@commercetools-applications/merchant-center-template-starter-typescript	Minor
@commercetools-applications/merchant-center-template-starter	Minor
@commercetools-applications/merchant-center-custom-view-template-starter-typescript	Minor
@commercetools-website/components-playground	Minor
@commercetools-frontend/cypress	Minor
@commercetools-backend/eslint-config-node	Minor
@commercetools-backend/express	Minor
@commercetools-backend/loggers	Minor
@commercetools-frontend/actions-global	Minor
@commercetools-frontend/application-config	Minor
@commercetools-frontend/application-shell-connectors	Minor
@commercetools-frontend/assets	Minor
@commercetools-frontend/babel-preset-mc-app	Minor
@commercetools-frontend/browser-history	Minor
@commercetools-frontend/constants	Minor
@commercetools-frontend/create-mc-app	Minor
@commercetools-frontend/eslint-config-mc-app	Minor
@commercetools-frontend/i18n	Minor
@commercetools-frontend/jest-preset-mc-app	Minor
@commercetools-frontend/jest-stylelint-runner	Minor
@commercetools-frontend/l10n	Minor
@commercetools-frontend/mc-dev-authentication	Minor
@commercetools-frontend/mc-html-template	Minor
@commercetools-frontend/notifications	Minor
@commercetools-frontend/permissions	Minor
@commercetools-frontend/react-notifications	Minor
@commercetools-frontend/sdk	Minor
@commercetools-frontend/sentry	Minor
@commercetools-frontend/url-utils	Minor
@commercetools-website/custom-applications	Minor
@commercetools-website/custom-views	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

CarlosCortizasCT · 2023-11-14T12:50:00Z

Thanks @YahiaElTai, this looks great! 👍

Maybe just a couple of things more to play safe in the long term:

Maybe we could add another VRT where both title and subtitle are so long they will use multiple lines: this would help to make sure those respect the close icon "column".
Since the Drawer has intro and exit animations, it would be great to add an example to the playground application so we can validate it. This would be the file to update. Please let me know if you need some context about how the playground works.

Also for @FilPob, since you can't see the new component in a preview deployment, just wanted to share that the new overlay color seems too shallow to me and just wanted to double check it is intended 😅

FilPob · 2023-11-14T13:06:10Z

@CarlosCortizasCT thanks for the early update! Yes the light overlay is expected.

YahiaElTai · 2023-11-14T16:08:50Z

Thanks @YahiaElTai, this looks great! 👍

Maybe just a couple of things more to play safe in the long term:

Maybe we could add another VRT where both title and subtitle are so long they will use multiple lines: this would help to make sure those respect the close icon "column".

Since the Drawer has intro and exit animations, it would be great to add an example to the playground application so we can validate it. This would be the file to update. Please let me know if you need some context about how the playground works.

Also for @FilPob, since you can't see the new component in a preview deployment, just wanted to share that the new overlay color seems too shallow to me and just wanted to double check it is intended 😅

Thanks @CarlosCortizasCT for all the feedback :) much appreciated.

I have added the requested VRT for title and subtitle. (I also removed the truncate so now the title and subtitle both will stretch on multiple lines)
I have added the new example to the playground

emmenko · 2023-11-14T16:25:52Z

Thanks @YahiaElTai for the work so far ❤️

A couple of general questions:

Is it allowed to open another drawer on top of a drawer? If so, what's the current / expected behaviour?
Is it allowed to open a modal component (e.g. dialog) on top of a drawer? If so, what's the current / expected behaviour?

Maybe you can use the playground to check / verify these points. Thanks 🤗

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

packages/application-components/src/components/modal-pages/internals/modal-page.tsx

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

CarlosCortizasCT

Could you please move the PR out of draft mode?

packages/application-components/src/components/drawer/drawer.tsx

YahiaElTai · 2023-11-17T10:12:31Z

@CarlosCortizasCT Thanks for the comments and the help with this PR. The only thing left is to review and approve the percy snapshots. I will leave that to you 😄

CarlosCortizasCT

Ok. Now it looks great to me 💯

Thanks a lot for your awesome work 🙇

emmenko

Thanks a lot for the contribution! ❤️

Only a changeset is missing now 😉

emmenko · 2023-11-17T13:25:13Z

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts

 };

 export const getContainerStyles = (_props: StyleProps): SerializedStyles => css`
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
-  width: ${_props.size === 'small' ? '600px !important' : '100%'};
+  width: ${_props.size !== 'scale'


Nit: I know it was already like this but could you rename it to props instead of _props? In TS an underscore as a prefix is used to silent the compiler that a variable is unused.

Thanks

emmenko

💯

chore: add drawer component

eb72c3a

github-actions bot deployed to Preview November 8, 2023 18:19 View deployment

YahiaElTai self-assigned this Nov 8, 2023

YahiaElTai commented Nov 8, 2023

View reviewed changes

...cation-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx Show resolved Hide resolved

YahiaElTai commented Nov 8, 2023

View reviewed changes

packages/application-components/src/components/modal-pages/internals/modal-page.tsx Show resolved Hide resolved

YahiaElTai commented Nov 8, 2023

View reviewed changes

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts Outdated Show resolved Hide resolved

YahiaElTai requested a review from CarlosCortizasCT November 9, 2023 08:32

YahiaElTai added the 🙏 Status: Dev Review Waiting for technical reviews label Nov 9, 2023

CarlosCortizasCT reviewed Nov 9, 2023

View reviewed changes

chore: use numeric values for size and correct colors

cdf9102

github-actions bot deployed to Preview November 9, 2023 12:50 View deployment

chore: update base modal size and box shadow

5fe78e7

YahiaElTai commented Nov 14, 2023

View reviewed changes

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts Show resolved Hide resolved

github-actions bot deployed to Preview November 14, 2023 09:08 View deployment

github-actions bot deployed to Preview November 14, 2023 09:09 View deployment

chore: add all paths in spec

ef2effb

github-actions bot deployed to Preview November 14, 2023 09:12 View deployment

chore: add new drawer to playrgound app as an example

43c242e

github-actions bot deployed to Preview November 14, 2023 16:08 View deployment

github-actions bot deployed to Preview November 16, 2023 13:43 View deployment

CarlosCortizasCT reviewed Nov 16, 2023

View reviewed changes

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts Outdated Show resolved Hide resolved

chore: group helpers into one style object by size

b0f6784

github-actions bot deployed to Preview November 16, 2023 15:41 View deployment

CarlosCortizasCT reviewed Nov 16, 2023

View reviewed changes

packages/application-components/src/components/modal-pages/internals/modal-page.tsx Show resolved Hide resolved

packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts Outdated Show resolved Hide resolved

chore: remove transition constant values

fae4595

github-actions bot deployed to Preview November 17, 2023 08:20 View deployment

CarlosCortizasCT reviewed Nov 17, 2023

View reviewed changes

packages/application-components/src/components/drawer/drawer.tsx Outdated Show resolved Hide resolved

YahiaElTai marked this pull request as ready for review November 17, 2023 10:08

Merge branch 'main' into CKT-2182-drawer-component

70fbe95

github-actions bot deployed to Preview November 17, 2023 12:57 View deployment

github-actions bot deployed to Preview November 17, 2023 12:58 View deployment

CarlosCortizasCT approved these changes Nov 17, 2023

View reviewed changes

CarlosCortizasCT requested a review from a team November 17, 2023 13:09

emmenko reviewed Nov 17, 2023

View reviewed changes

chore: update _props to props

5cb6426

github-actions bot deployed to Preview November 17, 2023 15:29 View deployment

chore: add changeset

f3b3a78

YahiaElTai requested a review from emmenko November 17, 2023 15:34

github-actions bot deployed to Preview November 17, 2023 15:36 View deployment

emmenko approved these changes Nov 17, 2023

View reviewed changes

CarlosCortizasCT merged commit db6e172 into main Nov 20, 2023
14 checks passed

CarlosCortizasCT deleted the CKT-2182-drawer-component branch November 20, 2023 11:56

ct-changesets bot mentioned this pull request Nov 20, 2023

Version Packages #3301

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add drawer component #3294

chore: add drawer component #3294

YahiaElTai commented Nov 8, 2023 •

edited

Loading

github-actions bot commented Nov 8, 2023 •

edited

Loading

github-actions bot commented Nov 8, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading

CarlosCortizasCT commented Nov 14, 2023

FilPob commented Nov 14, 2023

YahiaElTai commented Nov 14, 2023

emmenko commented Nov 14, 2023

CarlosCortizasCT left a comment

YahiaElTai commented Nov 17, 2023

CarlosCortizasCT left a comment

emmenko left a comment

emmenko Nov 17, 2023

emmenko left a comment

chore: add drawer component #3294

chore: add drawer component #3294

Conversation

YahiaElTai commented Nov 8, 2023 • edited Loading

Summary

github-actions bot commented Nov 8, 2023 • edited Loading

github-actions bot commented Nov 8, 2023 • edited Loading

changeset-bot bot commented Nov 9, 2023 • edited Loading

🦋 Changeset detected

CarlosCortizasCT commented Nov 14, 2023

FilPob commented Nov 14, 2023

YahiaElTai commented Nov 14, 2023

emmenko commented Nov 14, 2023

CarlosCortizasCT left a comment

Choose a reason for hiding this comment

YahiaElTai commented Nov 17, 2023

CarlosCortizasCT left a comment

Choose a reason for hiding this comment

emmenko left a comment

Choose a reason for hiding this comment

emmenko Nov 17, 2023

Choose a reason for hiding this comment

emmenko left a comment

Choose a reason for hiding this comment

YahiaElTai commented Nov 8, 2023 •

edited

Loading

github-actions bot commented Nov 8, 2023 •

edited

Loading

github-actions bot commented Nov 8, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading