-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: [IGL-112] Fixed box-sizing & positioning (#629)
* Fix: [IGL-112] Fixed box-sizing & positioning
- Loading branch information
1 parent
37260f9
commit 736a1b5
Showing
6 changed files
with
131 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@igloo-ui/checkbox": patch | ||
| "@igloo-ui/radio": patch | ||
| --- | ||
|
|
||
| Fixed checkbox and radio by ensuring the box-sizing is set on the container and all its children. Also fixed line-height and positioning. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,77 @@ | ||
| import * as React from 'react'; | ||
| import cx from 'classnames'; | ||
| import * as React from "react"; | ||
| import cx from "classnames"; | ||
|
|
||
| import './radio.scss'; | ||
| import "./radio.scss"; | ||
|
|
||
| export interface RadioProps extends React.ComponentPropsWithRef<'input'> { | ||
| /** The content to display inside the label */ | ||
| children?: React.ReactNode; | ||
| /** Add a specific class to the checkbox */ | ||
| className?: string; | ||
| /** Add a data-test tag for automated tests */ | ||
| dataTest?: string; | ||
| /** Indicates the ID of the element that is controlled by the checkbox */ | ||
| htmlFor: string; | ||
| /** Changes the size of label */ | ||
| small?: boolean; | ||
| /** Modifies true/false value of the native checkbox */ | ||
| checked?: boolean; | ||
| /** Modifies the native disabled state of the native checkbox */ | ||
| disabled?: boolean; | ||
| /** The content to display to help users */ | ||
| helperText?: string; | ||
| /** Function called when the value changes */ | ||
| onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; | ||
| export interface RadioProps extends React.ComponentPropsWithRef<"input"> { | ||
| /** The content to display inside the label */ | ||
| children?: React.ReactNode; | ||
| /** Add a specific class to the checkbox */ | ||
| className?: string; | ||
| /** Add a data-test tag for automated tests */ | ||
| dataTest?: string; | ||
| /** Indicates the ID of the element that is controlled by the checkbox */ | ||
| htmlFor: string; | ||
| /** Changes the size of label */ | ||
| small?: boolean; | ||
| /** Modifies true/false value of the native checkbox */ | ||
| checked?: boolean; | ||
| /** Modifies the native disabled state of the native checkbox */ | ||
| disabled?: boolean; | ||
| /** The content to display to help users */ | ||
| helperText?: string; | ||
| /** Function called when the value changes */ | ||
| onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; | ||
| } | ||
|
|
||
| const Radio: React.FunctionComponent<RadioProps> = React.forwardRef( | ||
| ( | ||
| { | ||
| children, | ||
| className, | ||
| dataTest, | ||
| htmlFor, | ||
| onChange, | ||
| helperText, | ||
| small, | ||
| checked, | ||
| disabled, | ||
| ...rest | ||
| }: RadioProps, | ||
| ref: React.Ref<HTMLInputElement>, | ||
| ) => { | ||
| const classes = cx('ids-radio', className, { | ||
| 'ids-radio--small': small, | ||
| }); | ||
| ( | ||
| { | ||
| children, | ||
| className, | ||
| dataTest, | ||
| htmlFor, | ||
| onChange, | ||
| helperText, | ||
| small, | ||
| checked, | ||
| disabled, | ||
| ...rest | ||
| }: RadioProps, | ||
| ref: React.Ref<HTMLInputElement> | ||
| ) => { | ||
| const classes = cx("ids-radio", className, { | ||
| "ids-radio--small": small | ||
| }); | ||
|
|
||
| return ( | ||
| <span | ||
| className={cx('ids-form-control', { | ||
| 'has-description': helperText, | ||
| })} | ||
| > | ||
| <input | ||
| ref={ref} | ||
| id={htmlFor} | ||
| className={classes} | ||
| data-test={dataTest} | ||
| checked={checked} | ||
| disabled={disabled} | ||
| type="radio" | ||
| onChange={onChange} | ||
| {...rest} | ||
| /> | ||
| {children && ( | ||
| <label className="ids-radio__label" htmlFor={htmlFor}> | ||
| {children} | ||
| {helperText && ( | ||
| <span className="ids-radio__description">{helperText}</span> | ||
| )} | ||
| </label> | ||
| )} | ||
| </span> | ||
| ); | ||
| }, | ||
| return ( | ||
| <span | ||
| className={cx("ids-form-control", "ids-form-control-radio", { | ||
| "has-description": helperText | ||
| })} | ||
| > | ||
| <input | ||
| ref={ref} | ||
| id={htmlFor} | ||
| className={classes} | ||
| data-test={dataTest} | ||
| checked={checked} | ||
| disabled={disabled} | ||
| type="radio" | ||
| onChange={onChange} | ||
| {...rest} | ||
| /> | ||
| {children && ( | ||
| <label className="ids-radio__label" htmlFor={htmlFor}> | ||
| {children} | ||
| {helperText && ( | ||
| <span className="ids-radio__description">{helperText}</span> | ||
| )} | ||
| </label> | ||
| )} | ||
| </span> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default Radio; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters