jason-capsule42 commented 1 month ago

Alaska Airlines Pull Request

Review Considerations

This PR includes changes that alter the current:

[ ] UI/UX
[ ] Accessibility (a11y) support

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

Integrate Floating UI with a new dropdown component as a proof of concept, introducing 'auro-dropdown' and 'MySelect' components, along with supporting styles and documentation.

New Features:

Introduce a new custom element 'auro-dropdown' that provides a trigger and dropdown element combination for interactive dropdown content.
Add 'MySelect' component that utilizes 'auro-dropdown' for creating a dropdown with a select input.
Implement 'AuroFloatingUI' class to manage the positioning and visibility of dropdown elements using Floating UI.

Enhancements:

Integrate design tokens and styles for the new dropdown components to ensure consistent theming and styling.

Documentation:

Add a README.md file with detailed documentation on the new dropdown component, including installation instructions, usage examples, and development guidelines.

sourcery-ai[bot] commented 1 month ago

Reviewer's Guide by Sourcery

This pull request introduces a new auro-dropdown component, which is a customizable dropdown element for interactive content. The implementation includes the main dropdown component, a bib (popover) component, and integration with FloatingUI for positioning. The PR also adds necessary styles, documentation, and example usage.

Class diagram for the new auro-dropdown component

classDiagram
    class AuroDropdown {
        +Boolean bordered
        +Boolean chevron
        +Boolean disabled
        +Boolean error
        +Boolean inset
        +Boolean matchWidth
        +Boolean rounded
        +Boolean hoverToggle
        +Boolean noToggle
        +Boolean focusShow
        +Boolean noHideOnThisFocusLoss
        +Boolean isPopoverVisible
        +Number dropdownWidth
        +String placement
        +Number tabIndex
        +Function onSlotChange
        +AuroLibraryRuntimeUtils runtimeUtils
        +AuroFloatingUI floater
        +Object floaterConfig
        +String iconTag
        +void privateDefaults()
        +void connectedCallback()
        +void disconnectedCallback()
        +void updated(changedProperties)
        +void firstUpdated()
        +void handleDefaultSlot()
        +html render()
    }

    class AuroFloatingUI {
        +void position()
        +void updateState()
        +void setupHideHandlers()
        +void handleUpdate(changedProperties)
        +void updateCurrentExpandedDropdown()
        +void showBib()
        +void hideBib()
        +void handleClick()
        +void handleEvent(event)
        +void handleTriggerTabIndex()
        +void configure(elem)
    }

    AuroDropdown --> AuroFloatingUI
    AuroDropdown --> AuroDropdownBib
    AuroDropdown --> AuroLibraryRuntimeUtils
    AuroDropdown --> AuroDependencyVersioning
    AuroDropdown --> AuroIcon
    AuroDropdown --> AuroDropdownBib
    AuroDropdown --> AuroFloatingUI
    AuroDropdown --> AuroLibraryRuntimeUtils
    AuroDropdown --> AuroDependencyVersioning
    AuroDropdown --> AuroIcon

    class AuroDropdownBib {
        +html render()
    }

    class MySelect {
        +String value
        +void configureBibContent()
        +void firstUpdated()
        +void updated(changedProperties)
        +html render()
    }

    MySelect --> AuroDropdown
    AuroDropdown --> AuroDropdownBib
    AuroDropdown --> AuroFloatingUI
    AuroDropdown --> AuroLibraryRuntimeUtils
    AuroDropdown --> AuroDependencyVersioning
    AuroDropdown --> AuroIcon

    class AuroLibraryRuntimeUtils {
    }

    class AuroDependencyVersioning {
        +String generateTag(componentName, version, component)
    }

    class AuroIcon {
    }

File-Level Changes

Change	Details	Files
Implement auro-dropdown custom element	Create main AuroDropdown class with properties and methods Implement render function for dropdown structure Add event listeners for various interactions (click, hover, focus) Integrate with FloatingUI for positioning	`src/dropdown/auro-dropdown.js`
Create AuroDropdownBib component for popover content	Implement AuroDropdownBib class Add render function for bib content	`src/dropdown/auro-dropdownBib.js`
Implement FloatingUI integration	Create AuroFloatingUI class with positioning and state management methods Implement show/hide functionality for the dropdown	`src/dropdown/floatingUI.mjs`
Add styles for dropdown and bib components	Create SCSS files for layout, color, and token styles Implement responsive design and accessibility features	`src/dropdown/style.scss` `src/dropdown/color.scss` `src/dropdown/tokens.scss` `src/dropdown/bibStyles.scss`
Add documentation and demo	Create README with component description, installation instructions, and API examples Add demo page with basic usage examples	`README.md` `demo/index.md`
Implement example select component using auro-dropdown	Create MySelect class extending auro-dropdown functionality Add value property and event listener for input changes	`src/dropdown/select.js`

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. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) 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](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

github-advanced-security[bot] commented 1 month ago

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

AlaskaAirlines / auro-form

feat: initial integration of floatingUI and dropdown POC #3