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.

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

feat: APPS-3045 refactor mobile drawer, datefilter mobile #654

Merged
merged 10 commits into from
Nov 26, 2024

Conversation

farosFreed
Copy link
Contributor

@farosFreed farosFreed commented Nov 14, 2024

Connected to APPS-3045

Component Created: MobileDrawer.vue

Stories: ~/stories/MobileDrawer.stories.js

Spec: ~/stories/MobileDrawer.spec.js

Notes:

Work done:

  • Move desired functionality into new component MobileDrawer.vue, which has slots for button content and drawer content
  • Refactor ButtonDropdown.vue to use MobileDrawer.vue (@tinuola reviewed this part of the work to ensure ButtonDropdown looked the same, thanks Tinu)
  • Refactor DateFilter.vue to use MobileDrawer.vue
  • Add new button styles (@tieserena will send)

Not done:
factor component into its own file
DateFilter.vue had to be duplicated in the template to get it to fit into our mobile designs (it shows in one spot if we are on mobile, a different spot if we aren't).

To prevent duplicating the code, I had wanted to refactor our implementation to put the code in its own component, thus making it easier/shorter to duplicate that component. However, I stopped because the MobileDrawer component needs to pass a removeOverlay method to a specific button on the VueDatePicker to allow it to close the drawer, and I could not figure out how to pass this slot meothd through that many layers without the VueDatePicker button and the MobileDrawer being in the same file.

I'm happy to go back to it if anyone has ideas.

Checklist:

  • I checked that it is working locally in the dev server
  • I checked that it is working locally in the storybook
  • I checked that it is working locally in the
    ftva-website-nuxt dev server
  • I added a screenshot of it working
  • UX has reviewed and approved this
  • I assigned this PR to someone on the dev team to review
  • I used a conventional commit message
  • I assigned myself to this PR

@farosFreed farosFreed added the feature feature label Nov 14, 2024
@farosFreed farosFreed self-assigned this Nov 14, 2024
Copy link
Contributor

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

  1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

Copy link
Contributor

github-actions bot commented Nov 14, 2024

@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 14, 2024 17:29 Inactive
@farosFreed farosFreed changed the title APPS-3045: refactor mobile drawer, datefilter mobile feat: APPS-3045 refactor mobile drawer, datefilter mobile Nov 14, 2024
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 14, 2024 23:59 Inactive
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 15, 2024 17:16 Inactive
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 19, 2024 18:37 Inactive
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 19, 2024 22:01 Inactive
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 19, 2024 22:29 Inactive
@farosFreed
Copy link
Contributor Author

Screenshot 2024-11-19 at 3 40 19 PM

Screenshot of the drawer. The Calendar button styles will be tweaked a bit to match UX specs

@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 21, 2024 18:11 Inactive
@github-actions github-actions bot temporarily deployed to storybook--pull_request-654 November 21, 2024 18:28 Inactive
@farosFreed farosFreed marked this pull request as ready for review November 21, 2024 18:33
Copy link
Contributor

@pghorpade pghorpade left a comment

Choose a reason for hiding this comment

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

Great work, there is always something new I learn when reviewing your PR's , this was a complex component. Thank you for always thinking about different ways to solve problems. Your work on scoped slot integration is awesome. 💯

@pghorpade pghorpade merged commit 3301d47 into main Nov 26, 2024
9 checks passed
@pghorpade pghorpade deleted the APPS-3045_mobile_datefilter branch November 26, 2024 18:47
pghorpade pushed a commit that referenced this pull request Nov 26, 2024
# [3.36.0](v3.35.1...v3.36.0) (2024-11-26)

### Features

* APPS-3045 refactor mobile drawer, datefilter mobile ([#654](#654)) ([3301d47](3301d47))
@pghorpade
Copy link
Contributor

🎉 This PR is included in version 3.36.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants