diff --git a/src/Popover/Popover.test.jsx b/src/Popover/Popover.test.jsx
index 05a451d65f..627df18a55 100644
--- a/src/Popover/Popover.test.jsx
+++ b/src/Popover/Popover.test.jsx
@@ -6,17 +6,17 @@ import Popover from './index';
describe('', () => {
describe('correct rendering', () => {
it('renders with correct class for variant success', () => {
- const wrapper = mount();
+ const wrapper = mount();
const popover = wrapper.find('.popover');
expect(popover.hasClass('popover-success')).toEqual(true);
});
it('renders with correct class for variant warning', () => {
- const wrapper = mount();
+ const wrapper = mount();
const popover = wrapper.find('.popover');
expect(popover.hasClass('popover-warning')).toEqual(true);
});
it('renders with correct class for variant danger', () => {
- const wrapper = mount();
+ const wrapper = mount();
const popover = wrapper.find('.popover');
expect(popover.hasClass('popover-danger')).toEqual(true);
});
diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss
index 7fe199dfd8..5b3532d62f 100644
--- 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
index 96eeca1847..eca24216a1 100644
--- 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) => (
{text}
@@ -80,12 +90,6 @@ const ProgressBarAnnotated = ({
srOnly
/>
)}
- {!!threshold && (
-
- )}
{(!!threshold && !!thresholdLabel) && (
correct rendering renders without props 1`] =
"width": "NaN%",
}
}
- visuallyHidden={false}
>