search

trimble-oss / modus-web-components

This library provides Modus components as web components - reusable, encapsulated UI elements that are framework agnostic (can be implemented in any site).
https://modus-web-components.trimble.com/
MIT License
32 stars 66 forks source link

Dropdown Component Encapsulation #2226

Open kuhnboy opened 5 months ago

kuhnboy commented 5 months ago

Prerequisites

Proposal

I believe that the purpose of componentization is to encapsulate behavior of a group of elements together to perform a specific function. For example, the Table can combine an HTML table along with other modus components (such as pagination) to create a unified experience.

Dropdown I don't feel is this way as it relies on an extra button, passing the id between the dropdown and the button. I think the Dropdown component should already have a button embedded into it and expose the button label. Also using id's can lead to fragile component.

In addition, if The dropdownList slot was built to work with the <modus-list> and <modus-list-item> elements., why not just make dropdown list items a formal component element as opposed to imposing requirements such as The item size property should be set to 'condensed'.?

Before:

<modus-dropdown toggle-element-id="toggleElement">
  <modus-button id="toggleElement" slot="dropdownToggle" show-caret="true">Dropdown</modus-button>
  <modus-list slot="dropdownList">
    <modus-list-item size="condensed" borderless>Item 1</modus-list-item>
    <modus-list-item size="condensed" borderless>Item 2</modus-list-item>
    <modus-list-item size="condensed" borderless>Item 3</modus-list-item>
  </modus-list>
</modus-dropdown>

After:

<modus-dropdown label="Dropdown">
  <modus-dropdown-item size="condensed" borderless>Item 1</modus-dropdown-item>
  <modus-dropdown-item size="condensed" borderless>Item 2</modus-dropdown-item>
  <modus-dropdown-item size="condensed" borderless>Item 3</modus-dropdown-item>
</modus-dropdown>

Motivation and context

No response

What is the issue regarding ?

@trimble-oss/modus-web-components

Priority

Medium

What product/project are you using Modus Components for ?

ModusBlazor

What is your team/division name ?

AECO

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

No response

github-actions[bot] commented 5 months ago

Hello @kuhnboy! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.