feat(InlineEditor): align default background with DS 5.7 (#3757)

lumada-design · Oct 20, 2023 · 4cc2796 · 4cc2796
1 parent a9944a8
commit 4cc2796
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/core/src/components/InlineEditor/InlineEditor.stories.tsx b/packages/core/src/components/InlineEditor/InlineEditor.stories.tsx
@@ -31,6 +31,16 @@ export const Main: StoryObj<HvInlineEditorProps> = {
   },
 };
 
+export const Disabled: StoryObj<HvInlineEditorProps> = {
+  render: () => {
+    return (
+      <div style={{ width: 300 }}>
+        <HvInlineEditor disabled />
+      </div>
+    );
+  },
+};
+
 export const LargeVariants = () => {
   const [value, setValue] = useState(
     "Very very very long text that is likely to be truncated"

diff --git a/packages/core/src/components/InlineEditor/InlineEditor.styles.tsx b/packages/core/src/components/InlineEditor/InlineEditor.styles.tsx
@@ -39,12 +39,12 @@ export const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
     justifyContent: "flex-start",
     alignItems: "center",
 
-    backgroundColor: "transparent",
+    backgroundColor: theme.colors.atmo1,
     border: `1px solid transparent`,
 
     "&:hover, &:focus": {
       border: `1px solid ${theme.colors.primary}`,
-      backgroundColor: "transparent",
+      backgroundColor: theme.colors.atmo1,
 
       "& $icon": {
         visibility: "visible",

diff --git a/packages/core/src/components/InlineEditor/InlineEditor.tsx b/packages/core/src/components/InlineEditor/InlineEditor.tsx
@@ -43,6 +43,8 @@ export interface HvInlineEditorProps
   buttonProps?: HvButtonProps;
   /** Props passed to the HvTypography text component */
   typographyProps?: HvTypographyProps;
+  /** Whether the editor is disabled or not. */
+  disabled?: boolean;
   /** A Jss Object used to override or extend the styles applied to the empty state component. */
   classes?: HvInlineEditorClasses;
 }
@@ -66,6 +68,7 @@ export const HvInlineEditor = (props: HvInlineEditorProps) => {
     onKeyDown,
     buttonProps,
     typographyProps,
+    disabled,
     ...others
   } = useDefaultProps("HvInlineEditor", props);
 
@@ -115,7 +118,7 @@ export const HvInlineEditor = (props: HvInlineEditorProps) => {
 
   return (
     <div className={cx(classes.root, className)}>
-      {editMode ? (
+      {editMode && !disabled ? (
         <InputComponent
           inputRef={inputRef}
           classes={{
@@ -143,13 +146,16 @@ export const HvInlineEditor = (props: HvInlineEditorProps) => {
             <Edit
               color="secondary_60"
               role="none"
-              className={cx(classes.icon, { [classes.iconVisible]: showIcon })}
+              className={cx(classes.icon, {
+                [classes.iconVisible]: showIcon,
+              })}
             />
           }
           className={cx(classes.button, {
             [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,
           })}
           onClick={handleClick}
+          disabled={disabled}
           {...buttonProps}
         >
           <HvTypography

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -934,8 +934,10 @@ const ds3 = makeTheme((theme) => ({
       classes: {
         button: {
           border: "none",
+          backgroundColor: "transparent",
           "&:hover": {
             border: "none",
+            backgroundColor: "transparent",
           },
           "&:focus": {
             border: "none",