diff --git a/src/assets/stylesheets/rsuite-override.css b/src/assets/stylesheets/rsuite-override.css index f6e1ea5d3..85ac2b150 100644 --- a/src/assets/stylesheets/rsuite-override.css +++ b/src/assets/stylesheets/rsuite-override.css @@ -350,6 +350,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before { line-height: 17px; } +.rs-radio:hover .rs-radio-inner:before { + border-color: var(--charcoal); +} + /* form */ .rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) { margin-bottom: 32px; @@ -700,3 +704,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before { height: 100px !important; background: white !important; } + +.rs-plaintext { + font-size: 13px !important; +} diff --git a/src/fields/MultiRadio.tsx b/src/fields/MultiRadio.tsx index a1e31c70f..897f241d5 100644 --- a/src/fields/MultiRadio.tsx +++ b/src/fields/MultiRadio.tsx @@ -21,6 +21,7 @@ export type MultiRadioProps = { isInline?: boolean | undefined isLabelHidden?: boolean | undefined isLight?: boolean | undefined + isReadOnly?: boolean isUndefinedWhenDisabled?: boolean | undefined label: string name: string @@ -37,6 +38,7 @@ export function MultiRadio({ isInline = false, isLabelHidden = false, isLight = false, + isReadOnly = false, isUndefinedWhenDisabled = false, label, name, @@ -75,7 +77,7 @@ export function MultiRadio({ legend={label} style={style} > - + {options.map(option => ( ({ disabled={disabled} name={name} onChange={(_: any, isChecked: boolean) => handleChange(option.value, isChecked)} + readOnly={isReadOnly} > {option.label} @@ -97,6 +100,7 @@ export function MultiRadio({ const Box = styled.div<{ $hasError: boolean $isInline: boolean + $isReadOnly: boolean }>` color: ${p => p.theme.color.gunMetal}; display: flex; @@ -136,4 +140,32 @@ const Box = styled.div<{ margin-left: 12px; } `} + + ${p => + p.$isReadOnly && + css` + .rs-radio { + .rs-radio-checker { + label { + cursor: not-allowed; + .rs-radio-wrapper [type='radio'] { + cursor: not-allowed; + } + } + } + } + .rs-radio:not(.rs-radio-checked):hover .rs-radio-inner:before { + border-color: ${p.theme.color.lightGray}; + } + .rs-radio:not(.rs-radio-checked) .rs-radio-inner:before { + background-color: ${p.theme.color.white}; + } + .rs-radio:not(.rs-radio-checked) { + .rs-radio-checker { + label { + color: ${p.theme.color.slateGray}; + } + } + } + `} ` diff --git a/stories/fields/MultiRadio.stories.tsx b/stories/fields/MultiRadio.stories.tsx index 9937c0a54..04ae5c70f 100644 --- a/stories/fields/MultiRadio.stories.tsx +++ b/stories/fields/MultiRadio.stories.tsx @@ -51,9 +51,18 @@ export function _MultiRadio(props: MultiRadioProps) { return ( <> - +
+ - {outputValue !== '∅' && } + {outputValue !== '∅' && } +
+ ) } diff --git a/stories/fields/TextInput.stories.tsx b/stories/fields/TextInput.stories.tsx index df4b2a517..da75b1183 100644 --- a/stories/fields/TextInput.stories.tsx +++ b/stories/fields/TextInput.stories.tsx @@ -61,6 +61,17 @@ export function _TextInput(props: TextInputProps) { placeholder="A text input placeholder" size={Size.LARGE} /> + +
+ +
)