m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add Checkbox id prop (#8553)

Browse Source 
This prop allows associating the checkbox with a label.
This commit is contained in:
Mark Stacey 2020-05-07 23:25:06 -03:00 committed by GitHub
parent 4a065cc8c8
commit 5e5215f907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/components/ui/check-box/check-box.component.js
View File

@ -10,7 +10,7 @@ const CHECKBOX_STATE = {
export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE
const CheckBox = ({ className, disabled, onClick, checked }) => {
const CheckBox = ({ className, disabled, id, onClick, checked }) => {
if (typeof checked === 'boolean') {
checked = checked
? CHECKBOX_STATE.CHECKED
@ -30,6 +30,7 @@ const CheckBox = ({ className, disabled, onClick, checked }) => {
'fa fa-minus-square': checked === CHECKBOX_STATE.INDETERMINATE,
})}
disabled={disabled}
id={id}
onClick={
onClick
? (event) => {
@ -48,6 +49,7 @@ const CheckBox = ({ className, disabled, onClick, checked }) => {
CheckBox.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
id: PropTypes.string,
onClick: PropTypes.func,
checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false]).isRequired,
}
@ -55,6 +57,7 @@ CheckBox.propTypes = {
CheckBox.defaultProps = {
className: undefined,
disabled: false,
id: undefined,
}
export default CheckBox

3
ui/app/components/ui/check-box/check-box.stories.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import { action } from '@storybook/addon-actions'
import CheckBox, { CHECKED, INDETERMINATE, UNCHECKED } from './check-box.component'
import { boolean, select } from '@storybook/addon-knobs/react'
import { boolean, select, text } from '@storybook/addon-knobs/react'
export default {
title: 'Check Box',
@ -19,6 +19,7 @@ export const primaryType = () => (
<CheckBox
checked={select('checked state', checkboxOptions, UNCHECKED)}
disabled={boolean('Disabled', false)}
id={text('ID', 'checkboxId')}
onClick={action('checkbox clicked')}
/>
)