fix: add `fluid` attribute to dropdown and make its default display `inline-block` #117

sun-mota · 2024-12-16T20:29:30Z

Alaska Airlines Pull Request

Background

Dropdown's borderless style should be inline-block

Issue to Solve

With the existing implementation, to follow borderless style, we had to add inset attribute with custom css style.

Solution

To easier setting and to follow existing pattern in button, now dropdown has fluid attribute which will turn dropdown to have full width by display: block and the default display is inline-block
To apply borderless style, use inset attribute

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

Add a 'fluid' attribute to the dropdown component to allow it to expand to full width, and change its default display style to 'inline-block' for better alignment with borderless style. Update documentation to reflect these changes.

Bug Fixes:

Fix the dropdown's default display style to be 'inline-block' for borderless style.

Enhancements:

Add a 'fluid' attribute to the dropdown component to allow it to expand to full width when needed.

Documentation:

Update documentation to reflect the new 'fluid' attribute and default display style changes for the dropdown component.

sourcery-ai · 2024-12-16T20:29:34Z

Reviewer's Guide by Sourcery

This PR adds a new fluid attribute to the dropdown component and changes its default display to inline-block. The fluid attribute makes the dropdown take full width of its parent container, while the default inline-block display allows the dropdown to match its trigger's width.

Class diagram for the updated dropdown component

classDiagram
    class AuroDropdown {
        +Boolean fluid
        +Boolean disabled
        +Boolean disableEventShow
        +Boolean error
        +Boolean matchWidth
        +Boolean inset
        +Boolean rounded
    }
    note for AuroDropdown "The 'fluid' attribute is newly added to make the dropdown full width of its parent container."

File-Level Changes

Change	Details	Files
Added new `fluid` attribute to control dropdown width behavior	Added `fluid` boolean attribute to make dropdown full width Set default display to inline-block Added fluid attribute to internal component usages (combobox, datepicker, select)	`components/dropdown/src/auro-dropdown.js` `components/dropdown/src/styles/style.scss` `components/combobox/src/auro-combobox.js` `components/datepicker/src/auro-datepicker.js` `components/select/src/auro-select.js`
Updated documentation and examples to demonstrate new width behaviors	Added new example showing inline-block display usage Updated existing examples to use fluid attribute where appropriate Added fluid attribute documentation	`components/dropdown/demo/index.md` `components/dropdown/docs/api.md` `components/dropdown/apiExamples/inline.html` `components/dropdown/apiExamples/commonMatchWidth.html` `components/dropdown/apiExamples/programmaticallyHide.html` `components/dropdown/apiExamples/programmaticallyShow.html`

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

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai

Hey @sun-mota - I've reviewed your changes and they look great!

Here's what I looked at during the review

🟡 General issues: 3 issues found
🟢 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.}

components/dropdown/src/styles/style.scss

components/dropdown/apiExamples/inline.html

README.md

…inline-block` #107 #117

jordanjones243

Focus border is not being applied on basic dropdowns when clicked.
Should consider making the examples that use borderless inputs into fluid examples, as it creates a bad UI experience by cutting off input content.

…inline-block` #107 #117

sun-mota · 2024-12-18T21:16:45Z

Focus border is not being applied on basic dropdowns when clicked.

Should consider making the examples that use borderless inputs into fluid examples, as it creates a bad UI experience by cutting off input content.

focus issue will be addressed in #129
fluid example is added.

…inline-block` #107 #117

# [1.6.0-beta.6](v1.6.0-beta.5...v1.6.0-beta.6) (2024-12-18) ### Bug Fixes * add `fluid` attribute to dropdown and make its default display `inline-block` [#107](#107) [#117](#117) ([57c65df](57c65df))

jason-capsule42 · 2024-12-18T21:44:27Z

🎉 This PR is included in version 1.6.0-beta.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

sun-mota linked an issue Dec 16, 2024 that may be closed by this pull request

DROPDOWN: Create inline-block trigger examples to match blueprint #57

Open

sun-mota self-assigned this Dec 16, 2024

sun-mota marked this pull request as ready for review December 16, 2024 20:33

sun-mota requested a review from a team as a code owner December 16, 2024 20:33

sourcery-ai bot reviewed Dec 16, 2024

View reviewed changes

components/dropdown/src/styles/style.scss Outdated Show resolved Hide resolved

components/dropdown/apiExamples/inline.html Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

sun-mota force-pushed the sunMota/inline-example/57 branch 3 times, most recently from bf86514 to 9cf02f1 Compare December 17, 2024 19:14

sun-mota added a commit that referenced this pull request Dec 17, 2024

fix: add fluid attribute to dropdown and make its default display `…

fc88ba5

…inline-block` #107 #117

sun-mota force-pushed the sunMota/inline-example/57 branch from 9cf02f1 to fc88ba5 Compare December 17, 2024 22:48

sun-mota linked an issue Dec 17, 2024 that may be closed by this pull request

DROPDOWN - Extra padding between trigger and bib when the bib opens at the top #107

Open

jordanjones243 requested changes Dec 18, 2024

View reviewed changes

This comment was marked as off-topic.

Sign in to view

sun-mota added 2 commits December 18, 2024 15:01

fix: add fluid attribute to dropdown and make its default display `…

c521935

…inline-block` #107 #117

docs: add fluid example

9b510a0

sun-mota force-pushed the sunMota/inline-example/57 branch from fc88ba5 to 9b510a0 Compare December 18, 2024 20:40

sun-mota requested a review from jordanjones243 December 18, 2024 21:16

jordanjones243 approved these changes Dec 18, 2024

View reviewed changes

sun-mota merged commit b36e926 into beta Dec 18, 2024
4 checks passed

sun-mota added a commit that referenced this pull request Dec 18, 2024

fix: add fluid attribute to dropdown and make its default display `…

57c65df

…inline-block` #107 #117

sun-mota deleted the sunMota/inline-example/57 branch December 18, 2024 21:40

jason-capsule42 added the released on @beta label Dec 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: add `fluid` attribute to dropdown and make its default display `inline-block` #117

fix: add `fluid` attribute to dropdown and make its default display `inline-block` #117

sun-mota commented Dec 16, 2024 •

edited

Loading

sourcery-ai bot commented Dec 16, 2024 •

edited

Loading

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

jordanjones243 left a comment •

edited

Loading

This comment was marked as off-topic.

sun-mota commented Dec 18, 2024

jason-capsule42 commented Dec 18, 2024

fix: add fluid attribute to dropdown and make its default display inline-block #117

fix: add fluid attribute to dropdown and make its default display inline-block #117

Conversation

sun-mota commented Dec 16, 2024 • edited Loading

Alaska Airlines Pull Request

Background

Issue to Solve

Solution

Before Submitting this pull request:

Summary by Sourcery

sourcery-ai bot commented Dec 16, 2024 • edited Loading

Reviewer's Guide by Sourcery

Class diagram for the updated dropdown component

File-Level Changes

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

Choose a reason for hiding this comment

jordanjones243 left a comment • edited Loading

Choose a reason for hiding this comment

This comment was marked as off-topic.

sun-mota commented Dec 18, 2024

jason-capsule42 commented Dec 18, 2024

fix: add `fluid` attribute to dropdown and make its default display `inline-block` #117

fix: add `fluid` attribute to dropdown and make its default display `inline-block` #117

sun-mota commented Dec 16, 2024 •

edited

Loading

sourcery-ai bot commented Dec 16, 2024 •

edited

Loading

jordanjones243 left a comment •

edited

Loading