Comments (17)
the calcite-radio-group
definitely seems a lot simpler. Here are some comps of the Radio visual design (along with checkboxes #1 @paulcpederson is working on.):
from calcite-design-system.
@jcfranco it might be good to follow what @kumarGayu did for <calcite-switch>
for this. The big thing would be to wrap an existing form element for the reasons I gave in #24 (comment). We have to have some way for this to hook into default browser <form>
behaviors and for frameworks to work with the input in a standardized way. This would probally look like:
<calcite-radio-group>
<calcite-radio-group-item value="cord">
Cord <!-- Optional Label-->
<input slot="input" type="radio" name="foo"> <!-- Hidden element for <form> and frameworks to interact with. Can be hidden by the calcite component. -->
</calcite-radio-group-item>
<calcite-radio-group-item value="cord">
Duesenberg <!-- Optional Label-->
<input slot="input" type="radio" name="foo"> <!-- Hidden element for <form> and frameworks to interact with. Can be hidden by the calcite component. -->
</calcite-radio-group-item>
</calcite-radio-group>
from calcite-design-system.
Very belated update: Spoke w/ @julio8a and this will follow Calcite Web's radio group implementation.
from calcite-design-system.
Some styling updates to the radio-group:
from calcite-design-system.
@julio8a @patrickarlt I started looking into this and wanted to ask if you had additional comps or examples of how this component would be used? Ionic's radio-group
implementation depends on a user providing items where each item has a label and a radio component:
<ion-radio-group>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
Not sure if we wanted something similar or something a little more simple like:
<calcite-radio-group>
<calcite-radio-group-item value="cord">Cord</calcite-radio-group-item>
<calcite-radio-group-item value="duesenberg">Duesenberg</calcite-radio-group-item>
<calcite-radio-group-item value="hudson">Hudson</calcite-radio-group-item>
<calcite-radio-group-item value="packard">Packard</calcite-radio-group-item>
<calcite-radio-group-item value="studebaker">Studebaker</calcite-radio-group-item>
</calcite-radio-group>
from calcite-design-system.
@julio8a Per our discussion, I will hold off on this until I get a more detailed spec.
from calcite-design-system.
@julio8a Could you help provide focus states? Currently, Calcite Web radio group styling does not have any, so there is no indicator on which is one is active when you tab between groups.
from calcite-design-system.
@jcfranco, there's a conversation about that here: #20
For now, you can use the default browser default?
from calcite-design-system.
@julio8a 👌
from calcite-design-system.
@julio8a @jcfranco There seems to be quite a bit of difference between the designs in #5 (comment) and the designs in #5 (comment). Do we need to reconcile those? I do really like the "pillbox" style design from @jcfranco. We use similar stuff all over Vector Tile Style Editor:
from calcite-design-system.
@patrickarlt @julio8a I'll leave it up to you. 😉
@patrickarlt On a related note, how are you labeling your radio groups? Wrapping in <label>
s?
from calcite-design-system.
I think @julio8a was showing the designs from radio button, not radio group. The pills-type UI is what we need/use in Online as well: http://esri.github.io/calcite-web/documentation/components/#radio-group
from calcite-design-system.
Yes, I mean radio button, not radio group. 😊
from calcite-design-system.
📻
from calcite-design-system.
@julio8a Awesome! Can you share which colors variables/values are being used?
from calcite-design-system.
The active color is now: $blue
hover color is: $off-white
from calcite-design-system.
Closing for now, any further work can be opened as new issues. Nice work @jcfranco 👍
from calcite-design-system.
Related Issues (20)
- 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
- Update/remove tests using `HYDRATED_ATTR` in favor of `renders`
- [Input Date Picker] Multiple components with and without `range` can create buggy behavior HOT 3
- [List]: add mode prop for choosing between flat and nested lists
- [List]: update single-select icons HOT 1
- [List Item]: add icon-end/start props HOT 1
- Memory leak with adding/removing block components HOT 3
- [Carousel] Add `goTo()` and other convenience methods
- label: replace "default" value with a more meaningful value. HOT 3
- Tooling: Add a priority option to the test template HOT 2
- Standalone calendar
- Ensure all components inherit font-family HOT 2
- Create a selectable common test HOT 1
- [Carousel] Add support for swipe / flick touch interaction
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.