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

fix: drawer header is missing #4846

Merged
merged 1 commit into from
Nov 9, 2024
Merged

fix: drawer header is missing #4846

merged 1 commit into from
Nov 9, 2024

Conversation

anncwb
Copy link
Collaborator

@anncwb anncwb commented Nov 9, 2024

Description

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs:dev command.
  • Run the tests with pnpm test.
  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.
  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

Release Notes

  • New Features

    • The drawer component now displays a header by default when opened.
  • Improvements

    • Enhanced event handling for focus events outside the drawer.
    • Updated tab transition effects for a smoother visual experience.
    • Simplified CSS styles for better layout consistency across components.
  • Dependency Updates

    • Shifted dependency management for several packages to a catalog reference.
    • Introduced a new dependency, default-passive-events, to improve event handling.
  • Bug Fixes

    • Corrected a typo in the function name related to drawer focus handling.

Copy link

changeset-bot bot commented Nov 9, 2024

⚠️ No Changeset found

Latest commit: 47e75e9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Copy link
Contributor

coderabbitai bot commented Nov 9, 2024

Walkthrough

The changes in this pull request involve updates to multiple components and configuration files within the project. Key modifications include version updates and restructuring of the package.json files for various packages, particularly focusing on the exports and dependency management. The DrawerApi class has been enhanced with a new default property, while the drawer.vue component has undergone simplifications in its rendering logic and event handling. Additionally, CSS adjustments have been made to improve layout consistency across various UI components.

Changes

File Change Summary
packages/@core/base/shared/package.json Updated version to 5.4.4, added exports and publishConfig for several modules, changed dayjs dependency to "catalog:".
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts Added header: true to defaultState in DrawerApi class constructor.
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue Removed conditional rendering for VisuallyHidden, updated handleFocusOutside, fixed typo in handlerOpenAutoFocus.
packages/@core/ui-kit/tabs-ui/src/components/tabs.vue Changed class from overflow-y-hidden to overflow-hidden, updated transition name from slide-down to slide-left.
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue Updated transition name from slide-down to slide-left.
packages/effects/layouts/package.json Updated dependencies for default-passive-events, vue, and vue-router to "catalog:".
packages/effects/layouts/src/basic/layout.vue Added import for default-passive-events.
packages/effects/layouts/src/index.ts Removed import for default-passive-events.
packages/effects/plugins/src/vxe-table/theme.css Modified CSS properties for .vxe-toolbar, added styles for wrappers, and adjusted margins.
packages/utils/package.json Removed main and module fields, added exports field pointing to ./src/index.ts.
pnpm-workspace.yaml Added new dependency default-passive-events, updated versions for rollup, vxe-pc-ui, and vxe-table.

Possibly related PRs

Suggested labels

bug

Suggested reviewers

  • vince292007

Poem

🐇 In the meadow where the changes play,
A drawer opens, brightening the day.
With headers high and transitions smooth,
Our code hops forward, finding its groove.
So let’s celebrate with a joyful cheer,
For every tweak brings us closer, my dear! 🌼


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 26bec42 and 47e75e9.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (11)
  • packages/@core/base/shared/package.json (1 hunks)
  • packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1 hunks)
  • packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (0 hunks)
  • packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue (1 hunks)
  • packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue (1 hunks)
  • packages/effects/layouts/package.json (1 hunks)
  • packages/effects/layouts/src/basic/layout.vue (1 hunks)
  • packages/effects/layouts/src/index.ts (0 hunks)
  • packages/effects/plugins/src/vxe-table/theme.css (1 hunks)
  • packages/utils/package.json (0 hunks)
  • pnpm-workspace.yaml (3 hunks)
💤 Files with no reviewable changes (3)
  • packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
  • packages/effects/layouts/src/index.ts
  • packages/utils/package.json
✅ Files skipped from review due to trivial changes (2)
  • packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
  • packages/effects/layouts/src/basic/layout.vue
🔇 Additional comments (14)
packages/effects/layouts/package.json (2)

40-42: Clarify relationship to drawer header fix.

While these dependency updates follow good practices, it's unclear how they relate to fixing the missing drawer header issue mentioned in the PR objectives. Please clarify if these changes are necessary for the drawer fix or if they're part of a separate improvement effort.


40-42: LGTM! Verify catalog versions match previous constraints.

The shift to centralized dependency management using "catalog:" is a good practice for maintaining consistency across packages. However, please ensure that the catalog versions align with the previous version constraints, particularly for default-passive-events which previously used ^2.0.0.

✅ Verification successful

Dependency versions are properly managed through catalog configuration

The catalog configuration in pnpm-workspace.yaml shows that:

  • vue is set to version ^3.5.12
  • vue-router is set to version ^4.4.5
  • default-passive-events is set to version ^2.0.0

These versions are compatible with the previous constraints, and the centralized dependency management through "catalog:" is properly configured. The change is safe and maintains version consistency across the workspace.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the catalog versions of the updated dependencies
# Expected: Versions should be compatible with previous constraints

# Check the resolved versions in the workspace
echo "Checking resolved dependency versions..."
cat pnpm-lock.yaml | rg -A 2 'default-passive-events|vue(?!use)|vue-router'

Length of output: 442


Script:

#!/bin/bash
# Let's try a different approach to check the dependencies
# First, let's check if there's a root package.json that might define the catalog versions
echo "Checking root package.json for dependency definitions..."
cat package.json | jq '.dependencies, .devDependencies'

# Also check for any workspace configuration files that might define the catalog
echo -e "\nChecking for workspace configuration..."
fd -t f "pnpm-workspace.yaml"
fd -t f ".npmrc"

# Let's also check if there are any other package.json files that might reference these dependencies
echo -e "\nChecking other package.json files for these dependencies..."
fd package.json -x grep -l "default-passive-events\|vue\|vue-router" {}

Length of output: 3119


Script:

#!/bin/bash
# Let's check the content of pnpm-workspace.yaml for catalog configuration
echo "Checking pnpm-workspace.yaml content..."
cat pnpm-workspace.yaml

# Let's check .npmrc for any catalog or dependency resolution settings
echo -e "\nChecking .npmrc content..."
if [ -f ".npmrc" ]; then
    cat .npmrc
fi

# Let's check the root package.json for any resolutions or overrides
echo -e "\nChecking package.json for resolutions..."
cat package.json | jq '.pnpm, .resolutions, .overrides'

# Let's also check the specific versions in one of the app's package.json
echo -e "\nChecking apps/web-naive/package.json for dependency versions..."
cat apps/web-naive/package.json | jq '.dependencies["vue"], .dependencies["vue-router"], .dependencies["default-passive-events"]'

Length of output: 6188

packages/@core/base/shared/package.json (2)

87-87: LGTM: Standardizing dependency management

The change to use catalog reference for dayjs aligns with the project's dependency management strategy, matching how other dependencies are referenced.

Let's verify if dayjs is used in the drawer component that's being fixed:


Line range hint 19-86: Verify exports configuration impact

The exports configuration is well-structured with proper type definitions. However, since this is a core shared package, we should verify that all exported paths are being correctly resolved by dependent packages.

✅ Verification successful

All exported paths are being used correctly across the codebase

The verification of exports configuration shows that:

  1. All subpaths defined in the exports configuration (constants, utils, color, cache, store, global-state) are being actively used across the codebase
  2. The imports consistently match the export paths defined in package.json
  3. The package is correctly imported by multiple dependent packages as shown in their package.json files
  4. No import errors or unresolved paths were found in the codebase

The exports configuration is working as intended and properly supports all dependent packages.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that the exported paths are being used correctly
# This helps ensure the package restructuring hasn't broken any imports

# Search for imports from @vben-core/shared
rg "from ['\"]\@vben-core\/shared\/" -A 1

# Check specifically for drawer-related files importing from this package
rg "from ['\"]\@vben-core\/shared\/" | rg -i "drawer" -C 3

Length of output: 318


Script:

#!/bin/bash
# Search for imports from the shared package with proper escaping
rg "from ['\"]@vben-core/shared/" -A 1

# Search for specific subpath imports to verify exports configuration
rg "from ['\"]@vben-core/shared/(constants|utils|color|cache|store|global-state)" -A 1

# Look for any potential import errors or warnings in package.json files
fd package.json --exec grep -l "@vben-core/shared"

Length of output: 53834

packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (3)

39-39: LGTM! This change correctly addresses the missing header issue.

The addition of header: true to the defaultState ensures the drawer header is visible by default, which aligns with the PR objective to fix the missing drawer header.


39-39: Verify state update behavior for header property.

The header state is managed through the Store class with an onUpdate callback. Ensure that changes to the header property trigger appropriate UI updates.

Let's check the drawer component's usage of this property:

#!/bin/bash
# Search for header property usage in drawer components
rg -A 5 "header['\"]?\s*[:=]" --type vue

Also applies to: 51-66


39-39: Consider adding TypeScript interface updates for better type safety.

While the implementation is correct, consider updating the DrawerState interface (imported from './drawer') to explicitly document this property.

Let's verify if the DrawerState interface includes this property:

packages/effects/plugins/src/vxe-table/theme.css (3)

92-93: Verify the visual impact of removing toolbar padding.

Setting padding to 0 might affect the visual spacing and hierarchy of the toolbar contents. Consider maintaining some minimal padding to ensure content doesn't touch the edges.

Consider using a small padding value instead:

-  padding: 0;
+  padding: 0.25em;

95-97: Well-structured padding rules!

Good use of the :not(:empty) selector to conditionally apply padding only when content exists. The padding value provides appropriate vertical spacing while maintaining font-size relativity with em units.


92-97: Verify impact on drawer header.

Given that the PR's main objective is to fix a missing drawer header issue, please verify that these toolbar and wrapper padding adjustments don't inadvertently affect the drawer header's visibility or layout.

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue (2)

70-70: Verify overflow behavior and consider removing the important flag.

The class changes have two potential concerns:

  1. Switching from overflow-y-hidden to overflow-hidden might affect horizontal scrolling behavior of tabs.
  2. Using !flex with an important flag could make the styles harder to override and maintain.

Consider:

  • Testing the component with many tabs to ensure horizontal scrolling still works as expected
  • Removing the important flag if possible and handling the flex display through proper CSS specificity

72-72: LGTM! Improved transition direction.

Changing from slide-down to slide-left is a logical improvement as it:

  • Better matches the horizontal nature of tabs
  • Maintains consistency with similar components in the codebase
  • Provides a more intuitive animation direction for tab transitions
pnpm-workspace.yaml (2)

141-141: LGTM: Version updates look appropriate.

The version updates for rollup, vxe-pc-ui, and vxe-table are minor version bumps that maintain backward compatibility:

  • rollup: ^4.24.4 → ^4.25.0
  • vxe-pc-ui: ^4.2.46 → ^4.2.49
  • vxe-table: ^4.8.8 → ^4.8.9

These updates are good practice for incorporating bug fixes and security patches.

Also applies to: 178-179


82-82: Verify the necessity of default-passive-events.

The addition of default-passive-events suggests addressing browser warnings about passive event listeners. While this is good for performance, we should verify if this is the most appropriate solution for the drawer header issue.

✅ Verification successful

Let me search for more context about event listeners and potential scroll-related components that might benefit from passive events.


The addition of default-passive-events is justified and properly integrated

The package is already being used in packages/effects/layouts/src/basic/layout.vue and is properly declared in its package.json. The codebase contains scroll-related components and event handlers, particularly in the ScrollArea component and tabs-view, which would benefit from passive event listeners. The implementation is consistent with best practices for improving scroll performance.

  • ✓ Used in layouts: packages/effects/layouts/src/basic/layout.vue
  • ✓ Properly declared: packages/effects/layouts/package.json
  • ✓ Benefits scroll components: packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if there are any event listener warnings in the browser console
# and verify the usage of passive event listeners in the codebase

# Search for event listener related code
echo "Searching for touch/wheel event listeners that might need passive flag..."
rg -A 2 "addEventListener\((('wheel')|('touchstart')|('touchmove')|('mousewheel'))"

# Search for existing passive event configurations
echo "Checking for existing passive event configurations..."
rg "passive:\s*(true|false)"

Length of output: 564


Script:

#!/bin/bash
# Search for scroll-related components and event handlers
echo "Searching for scroll-related code..."
rg -A 2 "(onScroll|scroll-behavior|@scroll)"

# Search for drawer components that might be related to the issue
echo "Searching for drawer-related code..."
rg -A 2 "(drawer|Drawer)" --type vue

# Check if default-passive-events is already imported anywhere
echo "Checking for existing default-passive-events usage..."
rg "default-passive-events"

Length of output: 3010


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@anncwb anncwb merged commit 5e44aa9 into main Nov 9, 2024
14 checks passed
@anncwb anncwb deleted the bugfix/drawer branch November 9, 2024 12:00
@anncwb anncwb added the bug Something isn't working label Nov 9, 2024
@coderabbitai coderabbitai bot mentioned this pull request Nov 27, 2024
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant