Comments (6)
Proposed component structure, looking for feedback, some q's.
<calcite-dropdown>
<calcite-dropdown-group>
<span slot="dropdown-header">Group 1</span>
<calcite-dropdown-item>Foo</calcite-dropdown-item>
<calcite-dropdown-item active>Baz</calcite-dropdown-item>
<calcite-dropdown-item>Bar</calcite-dropdown-item>
</calcite-dropdown-group>
<calcite-dropdown-group>
<span slot="dropdown-header">Group 2</span>
<calcite-dropdown-item>Zip</calcite-dropdown-item>
<calcite-dropdown-item active>Zap</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
<calcite-dropdown>
- Assign a GUID
- props: theme=(dark/light)
- methods: openCalciteDropdown, closeCalciteDropdown
- events: calciteDropdownOpen, calciteDropdownClose (emit dropdown ID)
<calcite-dropdown-group>
- Assign a GUID
<calcite-dropdown-item>
- Assign a GUID
- attributes: active (should we support multiple active within a single group? Is there a use case for that?)
- events: calciteDropdownItemSelected / deselected (emit dropdown ID, group ID, item ID (or value??))
from calcite-design-system.
@macandcheese this looks good to me. I'm assuming this would follow these designs:
I do have 2 questions:
-
Should this support things not in a group? for example:
<calcite-dropdown> <calcite-dropdown-item>Foo</calcite-dropdown-item> <calcite-dropdown-item active>Baz</calcite-dropdown-item> <calcite-dropdown-item>Bar</calcite-dropdown-item> </calcite-dropdown>
Here is how we would use this in VTSE:
-
Maybe
<calcite-dropdown-group>
could just have alabel
property rather then a slot? Since we probably just want to allow text there rather then tab headers which could be icon + text.<calcite-dropdown> <calcite-dropdown-group label="Group 1"> <calcite-dropdown-item>Foo</calcite-dropdown-item> <calcite-dropdown-item active>Baz</calcite-dropdown-item> <calcite-dropdown-item>Bar</calcite-dropdown-item> </calcite-dropdown-group> <calcite-dropdown-group label="Group 1"> <calcite-dropdown-item>Zip</calcite-dropdown-item> <calcite-dropdown-item active>Zap</calcite-dropdown-item> </calcite-dropdown-group> </calcite-dropdown>
-
Maybe a
size
prop with a possible `compact value?
I can't really see anyone needing multiple active items in a single group but if there is a valid use case I don't see why not.
One last thing (I keep thinking of stuff) it would be useful to customize the appearance of the button via a <slot>
:
<calcite-dropdown>
<button slot="button" class="btn btn-small btn-white">Dropdown Menu</button>
<calcite-dropdown-group label="Group 1">
<calcite-dropdown-item>Foo</calcite-dropdown-item>
<calcite-dropdown-item active>Baz</calcite-dropdown-item>
<calcite-dropdown-item>Bar</calcite-dropdown-item>
</calcite-dropdown-group>
<calcite-dropdown-group label="Group 1">
<calcite-dropdown-item>Zip</calcite-dropdown-item>
<calcite-dropdown-item active>Zap</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
from calcite-design-system.
I'm assuming this would follow these designs:
Yep! It was actually already added in CW2.0 branch, https://github.com/Esri/calcite-web/blob/2.0/lib/sass/calcite-web/components/_dropdown.scss, just going to port over and add the dark theme variant.
- Should this support things not in a group? for example:
Yeah, totally. I had just imagined that being a wrapper in the case where there ARE more than one group - mostly for emitting a containing group ID. I'll make it work without as well.
- Maybe
<calcite-dropdown-group>
could just have alabel
property rather then a slot? Since we probably just want to allow text there rather then tab headers which could be icon + text.
Makes sense, I'm always in favor of "locking down" as much as possible to prevent folks from putting not... good looking stuff in, ha.
- Maybe a
size
prop with a possible `compact value?
Yeah I think thats useful here, as well in other components potentially. Could be something set globally (and still explicitly override-able) alongside theme - for VTSE or other 'dense' apps. Maybe some adjustments to font-size and the $baseline padding variable could work.
I can't really see anyone needing multiple active items in a single group but if there is a valid use case I don't see why not.
Hm, that would make a better case for using "super multi select" vs. here, where a click would "deselect" all other items in the group. Open to discussion on that.
One last thing (I keep thinking of stuff) it would be useful to customize the appearance of the button via a
<slot>
:
I think the invoking element is actually outside the scope of dropdown component itself? ie...
<button class="btn" onclick="document.querySelector('#dropdown-one').toggleCalciteDropdown()">
Dropdown Menu
</button>
<calcite-dropdown id='#dropdown-one'>
...
</calcite-dropdown>
from calcite-design-system.
<button class="btn" onclick="document.querySelector('#dropdown-one').toggleCalciteDropdown()">
Dropdown Menu
</button>
<calcite-dropdown id='#dropdown-one'>
...
</calcite-dropdown>
I have 2 problems with this code snippet:
- To which element do we "attach" the dropdown? It isn't 100% clear that we want to attach our dropdown to the
<button>
element. - This would require an imperative API which I would really like to avoid for components. Creating an imperative API makes integration harder since users have to get a ref to the component and call a method on it. Definitely possible and in most cases easy but it leave more room for error.
from calcite-design-system.
That's fair - I'll update to use a slot for the invoking element.
from calcite-design-system.
PR in - #96
from calcite-design-system.
Related Issues (20)
- Use deep piercing selectors instead of separate selector + shadow selectors in common test helpers HOT 1
- Derive a `hasScrollbar(el)` utility for determining whether `offsetWidth` is less than the `scrollWidth`
- incorrect focus outline color HOT 1
- Deprecate the escapeDisabled property on modal and sheet in favor of prevented events
- [Carousel] Add support for displaying multiple Carousel Items at once
- remove public guid properties on checkbox and radio-button
- Add more details about commit message format to the contributing doc HOT 2
- Add CSS class map pattern entry to conventions doc
- [Carousel] Improve support for high item counts
- Replace `autoClosableRetainsCloseButton` alert screenshot test with e2e
- Split Button: No way to set href for links on the primary button
- removing a tab triggers exception HOT 2
- Tooling: Update user impact dropdown and labels HOT 2
- Action: No way to set href for links HOT 8
- Allow Navigation Logo component to be configured as non-actionable HOT 2
- Stepper Item: Status not provided to assistive technologies
- Input + Text Area: Add native `spellcheck` prop HOT 1
- Dropdown button trigger is not truncating HOT 2
- [calcite-input-number]: calcite-input-number allowing character "e" HOT 1
- Use calcite-ui-icons >= 3.27.8 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from calcite-design-system.