Merge branch 'main' into tagSetPrep

carbon-design-system · Apr 30, 2021 · 2ff2451 · 2ff2451
2 parents 3916316 + 42a4f39
commit 2ff2451
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 49 deletions.
diff --git a/packages/cloud-cognitive/CHANGELOG.md b/packages/cloud-cognitive/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.36.6](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
+
+
+### Bug Fixes
+
+* small fixes to saving for release review ([#683](https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/683)) ([384db15](https://github.com/carbon-design-system/ibm-cloud-cognitive/commit/384db15a4057b7e91543be9cba05df303f239447))
+
+
+
+
+
 ## [0.36.5](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
 
 **Note:** Version bump only for package @carbon/ibm-cloud-cognitive

diff --git a/packages/cloud-cognitive/package.json b/packages/cloud-cognitive/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-cloud-cognitive",
   "description": "Carbon for Cloud & Cognitive UI components",
-  "version": "0.36.5",
+  "version": "0.36.6",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/cloud-cognitive/src/components/ImportModal/ImportModal.js b/packages/cloud-cognitive/src/components/ImportModal/ImportModal.js
@@ -134,6 +134,7 @@ export let ImportModal = ({
   const primaryButtonDisabled = !hasFiles || files.some((f) => f.invalid);
   const importButtonDisabled = !importUrl;
   const invalidValidLabel = `${numberOfInvalidFiles} / ${numberOfFiles}`;
+  const blockClass = `${pkg.prefix}--import-modal`;
 
   return (
     <Modal
@@ -144,20 +145,21 @@ export let ImportModal = ({
       primaryButtonDisabled={primaryButtonDisabled}
       onRequestSubmit={onSubmitHandler}
       onRequestClose={onRequestClose}
-      className={`${pkg.prefix}--import-modal`}
+      className={blockClass}
       size="sm">
-      <p className={`${pkg.prefix}--import-modal-body`}>{modalBody}</p>
-      <p className={`${pkg.prefix}--import-modal-label`}>{fileDropHeader}</p>
+      <p className={`${blockClass}__body`}>{modalBody}</p>
+      <p className={`${blockClass}__label`}>{fileDropHeader}</p>
       <FileUploaderDropContainer
         accept={validFileTypes}
         labelText={fileDropLabel}
         onAddFiles={onAddFile}
         disabled={!!files.length}
         multiple={multiple}
       />
-      <p className={`${pkg.prefix}--import-modal-label`}>{inputHeader}</p>
-      <div className={`${pkg.prefix}--input-group`}>
+      <p className={`${blockClass}__label`}>{inputHeader}</p>
+      <div className={`${blockClass}__input-group`}>
         <TextInput
+          labelText=""
           id={inputId}
           onChange={inputHandler}
           placeholder={inputPlaceholder}
@@ -166,15 +168,15 @@ export let ImportModal = ({
         />
         <Button
           onClick={fetchFile}
-          className={`${pkg.prefix}--import-button`}
+          className={`${blockClass}__import-button`}
           size="sm"
           disabled={importButtonDisabled}>
           {inputButtonText}
         </Button>
       </div>
       <div className="bx--file-container" style={{ width: '100%' }}>
         {hasFiles && (
-          <p className={`${pkg.prefix}--import-modal-helper-text`}>
+          <p className={`${blockClass}__helper-text`}>
             {`${invalidValidLabel} ${fileUploadLabel}`}
           </p>
         )}

diff --git a/packages/cloud-cognitive/src/components/ImportModal/ImportModal.test.js b/packages/cloud-cognitive/src/components/ImportModal/ImportModal.test.js
@@ -8,6 +8,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
+import { carbon } from '../../settings';
 import '../../utils/enable-all'; // must come before component is imported (directly or indirectly)
 import { ImportModal } from '.';
 
@@ -62,38 +63,61 @@ describe(name, () => {
       ...defaultProps,
       onRequestSubmit,
     };
-
     const { getByText, container } = render(<ImportModal {...props} />);
 
-    const submitBtn = getByText(props.primaryButtonText);
-    const addFileBtn = getByText(props.inputButtonText);
-    const textInput = container.querySelector('.bx--text-input');
-
-    expect(addFileBtn.classList.contains('bx--btn--disabled')).toBe(true);
-    click(submitBtn);
+    expect(
+      getByText(props.inputButtonText).classList.contains(
+        `${carbon.prefix}--btn--disabled`
+      )
+    ).toBe(true);
+    click(getByText(props.primaryButtonText));
     expect(onRequestSubmit).not.toBeCalled();
 
-    change(textInput, { target: { value: 'test.jpeg' } });
-    expect(addFileBtn.classList.contains('bx--btn--disabled')).not.toBe(true);
-    click(addFileBtn);
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.jpeg' },
+    });
+    expect(
+      getByText(props.inputButtonText).classList.contains(
+        `${carbon.prefix}--btn--disabled`
+      )
+    ).not.toBe(true);
+    click(getByText(props.inputButtonText));
     await waitFor(() => expect(global.fetch).toHaveBeenCalled());
-    click(submitBtn);
+    click(getByText(props.primaryButtonText));
     expect(onRequestSubmit).toBeCalled();
   });
 
   it('should display the network error message when the fetch is rejected', async () => {
     fetch.mockImplementationOnce(() => Promise.reject('fetch failed'));
     const { click, change } = fireEvent;
-
     const { getByText, container } = render(<ImportModal {...defaultProps} />);
 
-    const addFileBtn = getByText(defaultProps.inputButtonText);
-    const textInput = container.querySelector('.bx--text-input');
-
-    change(textInput, { target: { value: 'test.jpeg' } });
-    click(addFileBtn);
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.jpeg' },
+    });
+    click(getByText(defaultProps.inputButtonText));
     await waitFor(() => expect(global.fetch).toHaveBeenCalled());
     expect(getByText(defaultProps.fetchErrorBody)).toBeVisible();
+    expect(getByText(defaultProps.fetchErrorHeader)).toBeVisible();
+  });
+
+  it('should display the default error message when one isnt specified', async () => {
+    fetch.mockImplementationOnce(() => Promise.reject('fetch failed'));
+    const { click, change } = fireEvent;
+    const props = {
+      ...defaultProps,
+      fetchErrorBody: '',
+      fetchErrorHeader: '',
+    };
+    const { getByText, container } = render(<ImportModal {...props} />);
+
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.jpeg' },
+    });
+    click(getByText(defaultProps.inputButtonText));
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+    expect(getByText(props.defaultErrorBody)).toBeVisible();
+    expect(getByText(props.defaultErrorHeader)).toBeVisible();
   });
 
   it('should display the network error message when the fetch isnt a 200 response', async () => {
@@ -103,16 +127,15 @@ describe(name, () => {
       })
     );
     const { click, change } = fireEvent;
-
     const { getByText, container } = render(<ImportModal {...defaultProps} />);
 
-    const addFileBtn = getByText(defaultProps.inputButtonText);
-    const textInput = container.querySelector('.bx--text-input');
-
-    change(textInput, { target: { value: 'test.jpeg' } });
-    click(addFileBtn);
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.jpeg' },
+    });
+    click(getByText(defaultProps.inputButtonText));
     await waitFor(() => expect(global.fetch).toHaveBeenCalled());
     expect(getByText(defaultProps.fetchErrorBody)).toBeVisible();
+    expect(getByText(defaultProps.fetchErrorHeader)).toBeVisible();
   });
 
   it('should display the invalid file type error message when an incorrect file type is uploaded', async () => {
@@ -123,28 +146,56 @@ describe(name, () => {
         blob: () => Promise.resolve({ type: 'pdf' }),
       })
     );
-
     const { click, change } = fireEvent;
     const { getByText, container } = render(<ImportModal {...defaultProps} />);
 
-    const addFileBtn = getByText(defaultProps.inputButtonText);
-    const textInput = container.querySelector('.bx--text-input');
-
-    change(textInput, { target: { value: 'test.jpeg' } });
-    click(addFileBtn);
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.pdf' },
+    });
+    click(getByText(defaultProps.inputButtonText));
     await waitFor(() => expect(global.fetch).toHaveBeenCalled());
     expect(getByText(defaultProps.invalidFileTypeErrorBody)).toBeVisible();
+    expect(getByText(defaultProps.invalidFileTypeErrorHeader)).toBeVisible();
+  });
+
+  it('should display the invalid file type error message when an incorrect file type is uploaded', async () => {
+    fetch.mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: true,
+        status: 200,
+        blob: () => Promise.resolve({ type: 'pdf' }),
+      })
+    );
+    const { click, change } = fireEvent;
+    const props = {
+      ...defaultProps,
+      invalidFileTypeErrorBody: '',
+      invalidFileTypeErrorHeader: '',
+    };
+    const { getByText, container } = render(<ImportModal {...props} />);
+
+    change(container.querySelector(`.${carbon.prefix}--text-input`), {
+      target: { value: 'test.pdf' },
+    });
+    click(getByText(defaultProps.inputButtonText));
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+    expect(getByText(props.defaultErrorBody)).toBeVisible();
+    expect(getByText(props.defaultErrorHeader)).toBeVisible();
   });
 
   it('should successfully use the drag and drop component to upload a file and then remove the file', () => {
     const { change, click } = fireEvent;
     const { getByText, container } = render(<ImportModal {...defaultProps} />);
     const files = [new File(['foo'], 'foo.jpeg', { type: 'image/jpeg' })];
 
-    change(container.querySelector('.bx--file-input'), { target: { files } });
+    change(container.querySelector(`.${carbon.prefix}--file-input`), {
+      target: { files },
+    });
     expect(getByText('foo.jpeg')).toBeVisible();
 
-    click(container.querySelector('.bx--file-close'));
-    expect(container.querySelector('.bx--file-filename')).toBeNull();
+    click(container.querySelector(`.${carbon.prefix}--file-close`));
+    expect(
+      container.querySelector(`.${carbon.prefix}--file-filename`)
+    ).toBeNull();
   });
 });
diff --git a/packages/cloud-cognitive/src/components/ImportModal/_import-modal.scss b/packages/cloud-cognitive/src/components/ImportModal/_import-modal.scss
@@ -20,26 +20,26 @@
     margin-top: 0;
   }
 
-  .#{$pkg-prefix}--input-group {
+  .#{$block-class}__input-group {
     display: flex;
   }
 
-  .#{$pkg-prefix}--import-button {
+  .#{$block-class}__import-button {
     margin-left: $spacing-05;
   }
 
-  .#{$block-class}-label {
+  .#{$block-class}__label {
     margin-bottom: $spacing-03;
     @include carbon--type-style('productive-heading-01');
   }
 
-  .#{$block-class}-helper-text {
+  .#{$block-class}__helper-text {
     margin-top: $spacing-06;
     margin-bottom: $spacing-03;
     @include carbon--type-style('helper-text-01');
   }
 
-  .#{$block-class}-body {
+  .#{$block-class}__body {
     margin-bottom: $spacing-06;
     padding-right: 20%;
   }

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.132](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
+
+**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core
+
+
+
+
+
 ## [0.8.131](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
 
 **Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-cloud-cognitive-core",
   "private": true,
-  "version": "0.8.131",
+  "version": "0.8.132",
   "license": "Apache-2.0",
   "main": "scripts/build.js",
   "repository": {
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@carbon/grid": "10.24.0",
-    "@carbon/ibm-cloud-cognitive": "^0.36.5",
+    "@carbon/ibm-cloud-cognitive": "^0.36.6",
     "@carbon/ibm-cloud-cognitive-security": "^0.4.15",
     "@carbon/icons-react": "10.29.0",
     "@carbon/import-once": "10.5.0",

diff --git a/packages/experimental/CHANGELOG.md b/packages/experimental/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.34.13](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
+
+**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-experimental
+
+
+
+
+
 ## [0.34.12](https://github.com/carbon-design-system/ibm-cloud-cognitive/compare/@carbon/[email protected]...@carbon/[email protected]) (2021-04-30)
 
 **Note:** Version bump only for package @carbon/ibm-cloud-cognitive-experimental

diff --git a/packages/experimental/package.json b/packages/experimental/package.json
@@ -3,7 +3,7 @@
   "private-note": "no longer published, package deprecated in favor of @carbon/ibm-cloud-cognitive with feature flags",
   "private": true,
   "description": "Carbon for Cloud & Cognitive UI components",
-  "version": "0.34.12",
+  "version": "0.34.13",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@carbon/ibm-cloud-cognitive": "^0.36.5",
+    "@carbon/ibm-cloud-cognitive": "^0.36.6",
     "@carbon/ibm-cloud-cognitive-security": "^0.4.15",
     "@carbon/telemetry": "^0.0.0-alpha.6",
     "react-resize-detector": "^6.0.0"