fix: remove prop type warning and use only CSS for threshold dot in P…

…rogressBar (#1380)
openedx · Jun 14, 2022 · 81cae2e · 81cae2e
1 parent 208e783
commit 81cae2e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/src/Popover/Popover.test.jsx b/src/Popover/Popover.test.jsx
@@ -6,17 +6,17 @@ import Popover from './index';
 describe('<Popover />', () => {
   describe('correct rendering', () => {
     it('renders with correct class for variant success', () => {
-      const wrapper = mount(<Popover variant="success" />);
+      const wrapper = mount(<Popover id="popover-id" variant="success" />);
       const popover = wrapper.find('.popover');
       expect(popover.hasClass('popover-success')).toEqual(true);
     });
     it('renders with correct class for variant warning', () => {
-      const wrapper = mount(<Popover variant="warning" />);
+      const wrapper = mount(<Popover id="popover-id" variant="warning" />);
       const popover = wrapper.find('.popover');
       expect(popover.hasClass('popover-warning')).toEqual(true);
     });
     it('renders with correct class for variant danger', () => {
-      const wrapper = mount(<Popover variant="danger" />);
+      const wrapper = mount(<Popover id="popover-id" variant="danger" />);
       const popover = wrapper.find('.popover');
       expect(popover.hasClass('popover-danger')).toEqual(true);
     });

diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss
@@ -46,17 +46,19 @@
     @each $name, $color in $progress-colors {
       .pgn__progress-bar--#{$name} {
         background-color: $color;
-      }
 
-      .pgn__progress-threshold-dot--#{$name} {
-        background: $color;
-        position: absolute;
-        margin-top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
-        margin-left: -(calc($progress-threshold-circle / 2));
-        width: $progress-threshold-circle;
-        height: $progress-threshold-circle;
-        border-radius: calc($progress-threshold-circle / 2);
-        z-index: 1;
+        &::after {
+          content: "";
+          display: block;
+          background: $color;
+          position: absolute;
+          top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
+          right: -(calc($progress-threshold-circle / 2));
+          width: $progress-threshold-circle;
+          height: $progress-threshold-circle;
+          border-radius: calc($progress-threshold-circle / 2);
+          z-index: 1;
+        }
       }
     }
   }

diff --git a/src/ProgressBar/index.jsx b/src/ProgressBar/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import ProgressBarBase from 'react-bootstrap/ProgressBar';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -37,11 +37,21 @@ const ProgressBarAnnotated = ({
   const progressColor = VARIANTS.includes(variant) ? variant : PROGRESS_DEFAULT_VARIANT;
   const thresholdColor = VARIANTS.includes(thresholdVariant) ? thresholdVariant : THRESHOLD_DEFAULT_VARIANT;
 
-  useEffect(() => {
+  const positionAnnotations = useCallback(() => {
     placeInfoAtZero(progressInfoRef, isProgressHintAfter, ANNOTATION_CLASS);
     placeInfoAtZero(thresholdInfoRef, isThresholdHintAfter, ANNOTATION_CLASS);
   }, [isProgressHintAfter, isThresholdHintAfter]);
 
+  useEffect(() => {
+    positionAnnotations();
+    const observer = new ResizeObserver(() => {
+      positionAnnotations();
+    });
+    const progressInfoEl = progressInfoRef.current;
+    observer.observe(progressInfoEl);
+    return () => progressInfoEl && observer.unobserve(progressInfoEl);
+  }, [positionAnnotations]);
+
   const getHint = (text) => (
     <span className="pgn__progress-hint">
       {text}
@@ -80,12 +90,6 @@ const ProgressBarAnnotated = ({
             srOnly
           />
         )}
-        {!!threshold && (
-          <div
-            className={`pgn__progress-threshold-dot--${thresholdColor}`}
-            style={{ left: `${threshold}%` }}
-          />
-        )}
       </ProgressBarBase>
       {(!!threshold && !!thresholdLabel) && (
         <div
@@ -116,8 +120,6 @@ ProgressBarAnnotated.propTypes = {
   variant: PropTypes.oneOf(VARIANTS),
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,
-  /** Hide's the label visually. */
-  visuallyHidden: PropTypes.bool,
   /** Threshold current value. */
   threshold: PropTypes.number,
   /** Specifies label for `threshold`. */
@@ -135,7 +137,6 @@ ProgressBarAnnotated.defaultProps = {
   label: undefined,
   variant: PROGRESS_DEFAULT_VARIANT,
   className: undefined,
-  visuallyHidden: false,
   threshold: undefined,
   thresholdLabel: undefined,
   thresholdVariant: THRESHOLD_DEFAULT_VARIANT,

diff --git a/src/ProgressBar/tests/__snapshots__/ProgressBar.test.jsx.snap b/src/ProgressBar/tests/__snapshots__/ProgressBar.test.jsx.snap
@@ -17,7 +17,6 @@ exports[`<ProgressBar.Annotated /> correct rendering renders without props 1`] =
           "width": "NaN%",
         }
       }
-      visuallyHidden={false}
     >
       <span
         className="sr-only"

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -3,4 +3,20 @@ import 'regenerator-runtime/runtime';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
+class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+
+  unobserve() {
+    // do nothing
+  }
+
+  disconnect() {
+    // do nothing
+  }
+}
+
+window.ResizeObserver = ResizeObserver;
+
 Enzyme.configure({ adapter: new Adapter() });