feat(Inputs): Added readOnly to InputWrapper and make label `bold…

…` in that case
leemonade · Sep 19, 2024 · e8bfbf4 · e8bfbf4
1 parent 0ea27c4
commit e8bfbf4
Show file tree

Hide file tree

Showing 15 changed files with 54 additions and 11 deletions.
diff --git a/packages/components/src/form/ColorInput/ColorInput.js b/packages/components/src/form/ColorInput/ColorInput.js
@@ -163,6 +163,7 @@ const ColorInput = forwardRef(
         contentStyle={contentStyle}
         headerClassName={headerClassName}
         contentClassName={contentClassName}
+        readOnly={readOnly}
         {...props}
       >
         {readOnly ? (

diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js
@@ -191,6 +191,7 @@ const DatePicker = forwardRef(
         headerStyle={headerStyle}
         contentStyle={contentStyle}
         style={style}
+        readOnly={readOnly}
       >
         {readOnly ? (
           <Paragraph clean>

diff --git a/packages/components/src/form/InputLabel/InputLabel.constants.js b/packages/components/src/form/InputLabel/InputLabel.constants.js
@@ -6,11 +6,13 @@ export const INPUT_LABEL_DEFAULT_PROPS = {
   withDescriptionIcon: false,
   required: false,
   showEmptyLabel: false,
+  readOnly: false,
 };
 export const INPUT_LABEL_PROP_TYPES = {
   label: PropTypes.string,
   description: PropTypes.string,
   withDescriptionIcon: PropTypes.bool,
   required: PropTypes.bool,
   showEmptyLabel: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
diff --git a/packages/components/src/form/InputLabel/InputLabel.js b/packages/components/src/form/InputLabel/InputLabel.js
@@ -12,9 +12,10 @@ const InputLabel = ({
   withDescriptionIcon,
   required,
   showEmptyLabel,
+  readOnly,
   ...props
 }) => {
-  const { classes } = InputLabelStyles({}, { name: 'InputLabel' });
+  const { classes } = InputLabelStyles({ readOnly }, { name: 'InputLabel' });
 
   return (
     <Box className={classes.container}>

diff --git a/packages/components/src/form/InputLabel/InputLabel.styles.js b/packages/components/src/form/InputLabel/InputLabel.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-const InputLabelStyles = createStyles((theme) => {
+const InputLabelStyles = createStyles((theme, { readOnly }) => {
   const labelTheme = theme.other.label;
 
   return {
@@ -12,6 +12,7 @@ const InputLabelStyles = createStyles((theme) => {
     label: {
       color: labelTheme.content.color.default,
       ...labelTheme.content.typo['02'],
+      fontWeight: readOnly ? 'bold' : 'normal',
     },
     required: {
       marginLeft: labelTheme.spacing.gap.sm,

diff --git a/packages/components/src/form/InputWrapper/InputWrapper.constants.js b/packages/components/src/form/InputWrapper/InputWrapper.constants.js
@@ -22,6 +22,7 @@ export const INPUT_WRAPPER_PROP_TYPES = {
   contentStyle: PropTypes.any,
   autoComplete: PropTypes.string,
   showEmptyLabel: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
 export const INPUT_WRAPPER_DEFAULT_PROPS = {
   label: '',
@@ -33,4 +34,5 @@ export const INPUT_WRAPPER_DEFAULT_PROPS = {
   required: false,
   autoComplete: 'off',
   disabled: false,
+  readOnly: false,
 };
diff --git a/packages/components/src/form/InputWrapper/InputWrapper.js b/packages/components/src/form/InputWrapper/InputWrapper.js
@@ -32,6 +32,7 @@ const InputWrapper = ({
   style,
   formValues,
   showEmptyLabel,
+  readOnly,
   ...props
 }) => {
   const size = INPUT_WRAPPER_SIZES.includes(sizeProp) ? sizeProp : 'md';
@@ -60,6 +61,7 @@ const InputWrapper = ({
             {...labelProps}
             description={description}
             withDescriptionIcon={withDescriptionIcon}
+            readOnly={readOnly}
           />
         </Stack>
       )}

diff --git a/packages/components/src/form/ListInput/ListInput.js b/packages/components/src/form/ListInput/ListInput.js
@@ -149,6 +149,7 @@ const ListInput = ({
       size={size}
       error={error}
       required={required}
+      readOnly={readonly}
     >
       <Box>
         <SortableList

diff --git a/packages/components/src/form/NumberInput/NumberInput.js b/packages/components/src/form/NumberInput/NumberInput.js
@@ -80,6 +80,7 @@ const NumberInput = forwardRef(
         contentStyle={contentStyle}
         headerClassName={headerClassName}
         contentClassName={contentClassName}
+        readOnly={readOnly}
       >
         {readOnly ? (
           <Paragraph clean>{props.value || props.defaultValue || ''}</Paragraph>

diff --git a/packages/components/src/form/Select/Select.constants.js b/packages/components/src/form/Select/Select.constants.js
@@ -40,4 +40,5 @@ export const SELECT_PROP_TYPES = {
   autoComplete: PropTypes.string,
   readOnly: PropTypes.bool,
   autoSelectOneOption: PropTypes.bool,
+  withinPortal: PropTypes.bool,
 };
diff --git a/packages/components/src/form/Select/Select.js b/packages/components/src/form/Select/Select.js
@@ -144,7 +144,7 @@ const Select = forwardRef(
         {...props}
       ></MultiSelect>
     ) : (
-      <InputWrapper {...props} uuid={uuid} size={size} error={error}>
+      <InputWrapper {...props} readOnly={readOnly} uuid={uuid} size={size} error={error}>
         {readOnly ? (
           <Paragraph clean>{dataValue}</Paragraph>
         ) : (

diff --git a/packages/components/src/form/TextInput/TextInput.js b/packages/components/src/form/TextInput/TextInput.js
@@ -93,7 +93,7 @@ const TextInput = forwardRef(
     }, [variant]);
 
     return (
-      <InputWrapper {...props} uuid={uuid} size={size} error={error}>
+      <InputWrapper {...props} readOnly={readOnly} uuid={uuid} size={size} error={error}>
         {readOnly ? (
           <Paragraph clean>{value || defaultValue || ''}</Paragraph>
         ) : (

diff --git a/packages/components/src/form/Textarea/Textarea.js b/packages/components/src/form/Textarea/Textarea.js
@@ -124,6 +124,7 @@ const Textarea = forwardRef(
     return (
       <InputWrapper
         {...props}
+        readOnly={readOnly}
         uuid={uuid}
         size={size}
         error={error}

diff --git a/packages/components/src/form/TimeInput/TimeInput.js b/packages/components/src/form/TimeInput/TimeInput.js
@@ -31,6 +31,7 @@ const TimeInput = forwardRef(
       contentStyle,
       autoComplete,
       style,
+      readOnly,
       ...props
     },
     ref,
@@ -52,6 +53,7 @@ const TimeInput = forwardRef(
         headerStyle={headerStyle}
         contentStyle={contentStyle}
         style={style}
+        readOnly={readOnly}
       >
         <MantineTimeInput
           {...props}

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1544,7 +1544,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1625,8 +1625,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -5286,12 +5295,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",