fixing radio buttons #580
Description
fixing radio buttons:
we need a real radio button component, that works with our stylings. right now creating a radio button component is really complicated.
the first problem is that clicking on the label associated with a toggle (or a radio button) doesn't click the button
this is because our toggle button has an onclick on it that overrides the native implemetation.
and the 'label' in the Toggle is the rendering of the 'button'. (the native input doesn't show)
and so the 'children' of the toggle (the actual label) isn't clickable.
here's the code for toggle buttons:
let indicator = <span className="cf-toggle--indicator cf-toggle--dot" />
if (icon) {
indicator = (
<Icon glyph={icon} className="cf-toggle--indicator cf-toggle--icon" />
)
}
const title = disabled ? disabledTitleText : titleText
return (
<div className={toggleClass} style={style} ref={containerRef}>
<input
id={id}
ref={ref}
type={type}
name={name}
title={title}
value={value}
tabIndex={-1}
disabled={disabled}
readOnly={true}
onKeyDown={onKeyDown}
autoFocus={autoFocus}
className="cf-toggle--input"
onKeyPress={onKeyPress}
data-testid={`${testID}--input`}
checked={checked}
/>
<label
title={title}
onBlur={handleInputBlur}
htmlFor={id}
onFocus={handleInputFocus}
onClick={handleClick}
onKeyUp={handleKeyUp}
tabIndex={tabIndex}
className="cf-toggle--visual-input"
data-testid={testID}
>
{indicator}
</label>
{children}
</div>so; if this just got fixed so that the children were clickable/turned the button on and off that would be ideal,
but putting the onclick handler in the containing div causes problems (other checkboxes/buttons didn't work properly).
so the solution is to make a new component that takes:
an array of string values, (all the different values for each button),
the 'name' for all the buttons (all radio buttons in a set must have the same 'name')
orientation ('row' or 'column') (the button and label will be in a row; but should each 'button/label' component be in a row or a column)
onClick function. it gets called with the value of the button when (one of the values in the string array), when a button is clicked.
and have it just work.
since it'll be a new component, it won't affect the other places that use ToggleButton.
and eventually fix togglebutton so the label is clickable.
don't worry about disabling for now, because we don't need that. anything else that is needed can be added later as we need it.
for example, to use toggles, the code is pretty complex:; this is one radio button.
<Toggle
tabIndex={2}
value="vertical"
id="vertical-legend-orientation"
name="vertical"
checked={legendOrientation === LEGEND_ORIENTATION_THRESHOLD_VERTICAL}
onChange={() =>
handleSetOrientation(LEGEND_ORIENTATION_THRESHOLD_VERTICAL)
}
type={InputToggleType.Radio}
size={ComponentSize.ExtraSmall}
color={ComponentColor.Primary}
appearance={Appearance.Outline}
>
<InputLabel
active={legendOrientation === LEGEND_ORIENTATION_THRESHOLD_VERTICAL}
htmlFor="vertical-legend-orientation"
>
Vertical
</InputLabel>
</Toggle>