fixing radio buttons #580

jrenee42 · 2021-03-01T23:29:25Z

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>

jrenee42 self-assigned this Mar 4, 2021

daviddkkim mentioned this issue Mar 5, 2021

introducing a radio button component and a radio button group component #583

Open

5 tasks

daviddkkim closed this as completed May 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fixing radio buttons #580

fixing radio buttons #580

jrenee42 commented Mar 1, 2021 •

edited

Loading

fixing radio buttons #580

fixing radio buttons #580

Comments

jrenee42 commented Mar 1, 2021 • edited Loading

jrenee42 commented Mar 1, 2021 •

edited

Loading