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

Dropdown: render proper border when dropdown gets clicked #130

Open
wants to merge 1 commit into
base: beta
Choose a base branch
from

Conversation

sun-mota
Copy link
Contributor

@sun-mota sun-mota commented Dec 18, 2024

Alaska Airlines Pull Request

Before Submitting this pull request:

  • Link all tickets in this repository related to this PR in the Development section
    note: all pull requests require at least one linked ticket
  • If this PR is Ready For Review, all ticket's linked under Development must have their status changed to Ready For Review as well

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Update dropdown styles to render a proper border when the dropdown is clicked or active, and ensure the dropdown retains focus when clicked.

Bug Fixes:

  • Fix border rendering issue when dropdown is clicked

Enhancements:

  • Improve focus handling when clicking the dropdown

@sun-mota sun-mota changed the base branch from main to beta December 18, 2024 22:16
@CLAassistant
Copy link

CLAassistant commented Dec 18, 2024

CLA assistant check
All committers have signed the CLA.

@sun-mota sun-mota linked an issue Dec 18, 2024 that may be closed by this pull request
@AlaskaAirlines AlaskaAirlines deleted a comment from sourcery-ai bot Dec 18, 2024
Copy link

sourcery-ai bot commented Dec 18, 2024

Reviewer's Guide by Sourcery

This PR introduces a fix to the dropdown border rendering issue and enhances the dropdown component with a new "fluid" attribute. It also updates the documentation to reflect these changes.

Class diagram for dropdown component changes

classDiagram
    class AuroDropdown {
        +Boolean fluid
        +display: inline-block
        +handleClick()
        +handleFocusLoss()
    }

    class AuroFloatingUI {
        +handleClick()
        +handleFocusLoss()
        +handleEvent(event)
    }

    AuroDropdown --|> AuroFloatingUI

    note for AuroDropdown "New fluid attribute added
Default display set to inline-block"
Loading

File-Level Changes

Change Details Files
Fix dropdown border rendering
  • Modify the styling to render a proper border when the dropdown is clicked or active.
  • Remove the box-shadow when the dropdown is active or focused within.
components/dropdown/src/styles/color.scss
Introduce "fluid" attribute for dropdown
  • Add a "fluid" attribute to the dropdown component to allow it to be full width of its parent container.
  • Update demo files to showcase the usage of the "fluid" attribute.
  • Update relevant component demos to incorporate the changes in dropdown behavior.
components/dropdown/src/floatingUI.mjs
components/dropdown/demo/api.min.js
components/dropdown/demo/index.min.js
components/combobox/demo/api.min.js
components/combobox/demo/index.min.js
components/datepicker/demo/api.min.js
components/datepicker/demo/index.min.js
components/select/demo/api.min.js
components/select/demo/index.min.js
Update documentation
  • Update documentation to include new examples and descriptions for the "fluid" attribute.
  • Document the fix for the dropdown border rendering issue.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time. You can also use
    this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sun-mota sun-mota force-pushed the sunMota/dropdown-focus-border branch from 2ff889f to 9b3b7ae Compare December 19, 2024 18:05
@sun-mota sun-mota marked this pull request as ready for review December 19, 2024 18:07
@sun-mota sun-mota requested a review from a team as a code owner December 19, 2024 18:07
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @sun-mota - I've reviewed your changes - here's some feedback:

Overall Comments:

  • The PR description mentions a new 'fluid' attribute but there are no related code changes in the diff. Please either update the PR description to match the actual changes or add the missing implementation for the 'fluid' attribute.
Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@sun-mota sun-mota force-pushed the sunMota/dropdown-focus-border branch 2 times, most recently from f8017c5 to 31b7a76 Compare December 19, 2024 18:45
@sun-mota sun-mota force-pushed the sunMota/dropdown-focus-border branch 2 times, most recently from 6d2c44c to de5727c Compare December 23, 2024 17:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DROPDOWN - Issues around focus border
2 participants