From 7b903ccb91ba9c227534f25c35edcac12f54fd47 Mon Sep 17 00:00:00 2001
From: Claire Dagan <clairedagan@gmail.com>
Date: Tue, 19 Sep 2023 09:09:20 +0200
Subject: [PATCH] feat(fields): add isReadOnly prop on multiRadio component and
 add custom style for plaintext

---
 src/assets/stylesheets/rsuite-override.css |  8 +++++
 src/fields/MultiRadio.tsx                  | 34 +++++++++++++++++++++-
 stories/fields/MultiRadio.stories.tsx      | 13 +++++++--
 stories/fields/TextInput.stories.tsx       | 11 +++++++
 4 files changed, 63 insertions(+), 3 deletions(-)

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<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,7 +77,7 @@ 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)}
@@ -83,6 +85,7 @@ export function MultiRadio<OptionValue extends OptionValueType = string>({
             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
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 (
     <>
-      <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
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}
         />
+
+        <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>
     </>
   )