feat(fields): add isReadOnly prop on multiRadio component and add cus…

…tom style for plaintext
MTES-MCT · Sep 25, 2023 · 7b903cc · 7b903cc
1 parent a22f2b4
commit 7b903cc
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 3 deletions.
diff --git 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
@@ -21,6 +21,7 @@ export type MultiRadioProps<OptionValue extends OptionValueType = string> = {
   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<OptionValue extends OptionValueType = string>({
   isInline = false,
   isLabelHidden = false,
   isLight = false,
+  isReadOnly = false,
   isUndefinedWhenDisabled = false,
   label,
   name,
@@ -75,14 +77,15 @@ export function MultiRadio<OptionValue extends OptionValueType = string>({
       legend={label}
       style={style}
     >
-      <Box key={key} $hasError={hasError} $isInline={isInline}>
+      <Box key={key} $hasError={hasError} $isInline={isInline} $isReadOnly={isReadOnly}>
         {options.map(option => (
           <Radio
             key={JSON.stringify(option.value)}
             checked={equals(option.value, value)}
             disabled={disabled}
             name={name}
             onChange={(_: any, isChecked: boolean) => handleChange(option.value, isChecked)}
+            readOnly={isReadOnly}
           >
             {option.label}
           </Radio>
@@ -97,6 +100,7 @@ export function MultiRadio<OptionValue extends OptionValueType = string>({
 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
@@ -51,9 +51,18 @@ export function _MultiRadio(props: MultiRadioProps) {
 
   return (
     <>
-      <MultiRadio {...props} onChange={controlledOnChange} value={controlledValue} />
+      <div style={{ marginBottom: '32px' }}>
+        <MultiRadio {...props} onChange={controlledOnChange} value={controlledValue} />
 
-      {outputValue !== '∅' && <Output value={outputValue} />}
+        {outputValue !== '∅' && <Output value={outputValue} />}
+      </div>
+      <MultiRadio
+        {...props}
+        isReadOnly
+        label="Multiradio in readOnly mode"
+        onChange={controlledOnChange}
+        value="FIRST_OPTION"
+      />
     </>
   )
 }
diff --git 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}
         />
+
+        <div style={{ marginTop: '32px' }}>
+          <TextInput
+            label="A text input with plaintext prop"
+            name="myTextInputWithPlaintextProp"
+            placeholder="A text input placeholder"
+            plaintext
+            size={Size.LARGE}
+            value="Plain text value"
+          />
+        </div>
       </Showcase>
     </>
   )