Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mimir 1550 radiobutton id #666

Merged
merged 5 commits into from
Mar 21, 2023
Merged

Mimir 1550 radiobutton id #666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
84cc218
Adds optional id to RadioButton and RadioGroup
johnnadeluy Mar 20, 2023
fe56040
Updates RadioGroup documentation; items
johnnadeluy Mar 20, 2023
e102e02
Updates htmlFor attribute for id for RadioButton
johnnadeluy Mar 20, 2023
d81e2de
Updates documentation for RadioButton and RadioGroup; optional prop id
johnnadeluy Mar 20, 2023
0772a31
Removes test code for RadioGroup story
johnnadeluy Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions src/components/RadioButton/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ RadioButton

```html
<div class="ssb-radio">
<input tabindex="0" id="item" type="radio" value="item">
<label class="radio-label" for="item">Item</label>
<input tabindex="0" id="id-item" type="radio" value="item">
<label class="radio-label" for="id-item">Item</label>
</div>
```

Expand All @@ -23,6 +23,7 @@ RadioButton
tabIndex="0"
selected={false}
value="option1"
id="id-item"
>Item
</RadioButton>
```
Expand All @@ -38,3 +39,4 @@ Available props:
| selected | bool | Selected state of checkbox |
| tabIndex | number | Tab index for focus |
| value | Required number or string | Input field value |
| id | string | Optional id |
7 changes: 4 additions & 3 deletions src/components/RadioButton/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@ import React from 'react';
import PropTypes from 'prop-types';

const RadioButton = ({
callback, children, className, disabled, name, selected, tabIndex, value,
callback, children, className, disabled, name, selected, tabIndex, value, id,
}) => (
<div className={`ssb-radio${className ? ` ${className}` : ''}`}>
<input
tabIndex={tabIndex}
checked={selected}
id={value}
id={id ?? value}
name={name}
disabled={disabled}
onChange={() => callback(value)}
type="radio"
value={value}
/>
<label className="radio-label" htmlFor={value}>{children}</label>
<label className="radio-label" htmlFor={id ?? value}>{children}</label>
</div>
);

Expand All @@ -37,6 +37,7 @@ RadioButton.propTypes = {
PropTypes.string,
PropTypes.number,
]).isRequired,
id: PropTypes.string,
};

export default RadioButton;
17 changes: 10 additions & 7 deletions src/components/RadioGroup/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ RadioGroup
<!-- Use flex-row If horizontal layout -->
<div class="boxes flex-column">
<div class="ssb-radio">
<input tabindex="0" id="item1" type="radio" value="item1">
<label class="radio-label" for="item1">Item 1</label>
<input tabindex="0" id="id-item1" type="radio" value="item1">
<label class="radio-label" for="id-item1">Item 1</label>
</div>
<div class="ssb-radio">
<input tabindex="0" id="item2" type="radio" value="item2">
<label class="radio-label" for="item2">Item 2</label>
<input tabindex="0" id="id-item2" type="radio" value="item2">
<label class="radio-label" for="id-item2">Item 2</label>
</div>
<div class="ssb-radio">
<input tabindex="0" id="item3" disabled="" type="radio" value="item3">
<label class="radio-label" for="item3">Item 3</label>
<input tabindex="0" id="id-item3" disabled="" type="radio" value="item3">
<label class="radio-label" for="id-item3">Item 3</label>
</div>
</div>
</div>
Expand All @@ -33,12 +33,15 @@ RadioGroup
```jsx harmony
const radioItems = [
{
id: 'id-item1',
label: 'Item 1',
value: 'item1',
}, {
id: 'id-item2',
label: 'Item 2',
value: 'item2',
}, {
id: 'id-item3',
label: 'Item 3',
value: 'item3',
disabled: 'true',
Expand All @@ -57,7 +60,7 @@ Available props:
| ---------- | ------------- | ----- |
| className | string | Optional container class|
| header | string | Renders a h5 title |
| items | arrayOf(label, value) | Required items for rendering radio buttons |
| items | arrayOf(id, label, value) | Required items for rendering radio buttons |
| onChange | func | Callback function when a value is changed |
| orientation | 'column' or 'row' , default column| Vertical og horizontal layout|
| selectedValue | string | Pre selected value |
Expand Down
2 changes: 2 additions & 0 deletions src/components/RadioGroup/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const RadioGroup = ({ className, groupName, header, items, onChange, orientation
<div className={`boxes flex-${orientation}`}>
{items.map((it, index) => (
<RadioButton
id={it.id}
key={it.value}
index={index}
selected={it.value === selected}
Expand All @@ -40,6 +41,7 @@ RadioGroup.propTypes = {
groupName: PropTypes.string,
header: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
})).isRequired,
Expand Down