fix(codeeditor): Code editor fix (#3842)

* fix(codeeditor): support to copy button always enabled * test(codeeditor): tests updates * test(snapshot): snapshot update
carbon-design-system · Feb 20, 2024 · eb96903 · eb96903
1 parent 46a619d
commit eb96903
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 27 deletions.
diff --git a/packages/react/src/components/CodeEditor/CodeEditor.jsx b/packages/react/src/components/CodeEditor/CodeEditor.jsx
@@ -82,14 +82,6 @@ const CodeEditor = ({
 
   useEffect(() => {
     updateEditorAttribute(disabled, editorValue);
-
-    const button = document.getElementsByClassName('iot--code-editor-copy')[0];
-
-    if (disabled) {
-      button.setAttribute('disabled', '');
-    } else if (button?.hasAttribute('disabled')) {
-      button.removeAttribute('disabled');
-    }
   }, [disabled]);
 
   /**
@@ -181,7 +173,7 @@ const CodeEditor = ({
         <CopyButton
           className={classnames(`${iotPrefix}--code-editor-copy`, {
             [`${iotPrefix}--code-editor-copy--light`]: light,
-            [`${iotPrefix}--code-editor-copy--disabled`]: disabled,
+            [`${iotPrefix}--code-editor-copy--disabled-container`]: disabled,
           })}
           onClick={handleOnCopy}
           iconDescription={mergedI18n.copyBtnDescription}

diff --git a/packages/react/src/components/CodeEditor/CodeEditor.story.jsx b/packages/react/src/components/CodeEditor/CodeEditor.story.jsx
@@ -18,12 +18,12 @@ export const Default = () => (
   <CodeEditor
     language={select('Editor language', ['css', 'json', 'javascript'])}
     onCopy={action('onCopy')}
-    initialValue="/* write your code here */"
+    initialValue=".className{ background: purple;}"
     light={boolean('Light (light)', false)}
     hasUpload={boolean('Has upload button (hasUpload)', true)}
     accept={array('Accepted file types (accept)', ['.scss', '.css'], ',')}
     onCodeEditorChange={action('onCodeEditorChange')}
-    disabled={boolean('Disabled state (disabled)', false)}
+    disabled={boolean('Disabled state (disabled)', true)}
   />
 );
 

diff --git a/packages/react/src/components/CodeEditor/CodeEditor.test.jsx b/packages/react/src/components/CodeEditor/CodeEditor.test.jsx
@@ -223,7 +223,7 @@ describe('CardEditor', () => {
     expect(uploadInputDisabled).toHaveAttribute('disabled');
 
     const copyDisabled = container.querySelector(`.${iotPrefix}--code-editor-copy`);
-    expect(copyDisabled).toHaveAttribute('disabled');
+    expect(copyDisabled).not.toHaveAttribute('disabled');
 
     rerender(
       <CodeEditor

diff --git a/packages/react/src/components/CodeEditor/__snapshots__/CodeEditor.story.storyshot b/packages/react/src/components/CodeEditor/__snapshots__/CodeEditor.story.storyshot
@@ -10,9 +10,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
   >
     <button
       aria-describedby={null}
-      className="iot--code-editor-upload bx--btn bx--btn--md bx--btn--ghost bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--top bx--tooltip--align-center"
+      className="iot--code-editor-upload iot--code-editor-upload--disabled bx--btn bx--btn--md bx--btn--ghost bx--btn--disabled bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--top bx--tooltip--align-center"
       data-testid="code-editor-upload-button"
-      disabled={false}
+      disabled={true}
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -53,7 +53,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
         ]
       }
       className="bx--visually-hidden"
-      disabled={false}
+      disabled={true}
       id="upload"
       multiple={false}
       name="upload"
@@ -64,7 +64,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
     <button
       aria-label={null}
       aria-live="polite"
-      className="iot--code-editor-copy bx--copy-btn bx--copy"
+      className="iot--code-editor-copy iot--code-editor-copy--disabled-container bx--copy-btn bx--copy"
       data-testid="code-editor-copy-button"
       onAnimationEnd={[Function]}
       onClick={[Function]}
@@ -130,7 +130,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
         </div>
       </div>
       <div
-        className="iot--code-editor-container"
+        className="iot--code-editor-container iot--code-editor-container--disabled"
         style={
           Object {
             "display": "none",

diff --git a/packages/react/src/components/CodeEditor/_code-editor.scss b/packages/react/src/components/CodeEditor/_code-editor.scss
@@ -42,16 +42,8 @@
   &-copy--light {
     background-color: $ui-background;
   }
-
-  &-copy--disabled {
-    cursor: not-allowed;
-    background-color: $disabled-02;
-    &:hover {
-      background-color: $disabled-02;
-    }
-    > svg {
-      fill: $disabled-03;
-    }
+  &-copy--disabled-container {
+    background-color: $active-ui;
   }
 
   &-upload.bx--btn.bx--btn--icon-only {