Make Badge priority class always present like in all other components

This change affects output HTML and may break downstream snapshot tests.
react-ui-org · Sep 11, 2024 · c3e3222 · c3e3222
1 parent 9664227
commit c3e3222
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
@@ -4,6 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';
 
 export const Badge = ({
@@ -16,7 +17,7 @@ export const Badge = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      priority === 'outline' && styles.isRootPriorityOutline,
+      getRootPriorityClassName(priority, styles),
       getRootColorClassName(color, styles),
     )}
   >

diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss
@@ -20,6 +20,9 @@ $_badge-size: 1.25rem;
         vertical-align: baseline;
         color: var(--rui-local-color);
         border-radius: math.div($_badge-size, 2);
+    }
+
+    .isRootPriorityFilled {
         background-color: var(--rui-local-background-color);
         box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
     }
@@ -67,9 +70,6 @@ $_badge-size: 1.25rem;
     }
 
     .isRootPriorityOutline {
-        --rui-local-background-color: transparent;
-        --rui-local-box-shadow: none;
-
         padding-top: 0.1875rem;
         padding-bottom: 0.1875rem;
         border: borders.$width solid currentcolor;

diff --git a/src/components/Badge/__tests__/Badge.test.jsx b/src/components/Badge/__tests__/Badge.test.jsx
@@ -19,7 +19,7 @@ describe('rendering', () => {
     ],
     [
       { priority: 'filled' },
-      (rootElement) => expect(rootElement).not.toHaveClass('isRootPriorityOutline'),
+      (rootElement) => expect(rootElement).toHaveClass('isRootPriorityFilled'),
     ],
     [
       { priority: 'outline' },

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -4,11 +4,11 @@ import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
-import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
 import styles from './Button.module.scss';
 

diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx
@@ -5,7 +5,7 @@ import React, {
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
-import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';

diff --git a/src/components/_helpers/getRootPriorityClassName.js b/src/components/_helpers/getRootPriorityClassName.js
@@ -1,4 +1,4 @@
-export default (priority, styles) => {
+export const getRootPriorityClassName = (priority, styles) => {
   if (priority === 'filled') {
     return styles.isRootPriorityFilled;
   }