From 5bcecab3c335b44ca7c08437bbbf689a7f04823d Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Sat, 31 Aug 2024 15:12:57 +0200
Subject: [PATCH] Make `Badge` priority class always present like in all other
 components

This change affects output HTML and may break downstream snapshot tests.
---
 src/components/Badge/Badge.jsx                      | 3 ++-
 src/components/Badge/Badge.module.scss              | 6 +++---
 src/components/Badge/__tests__/Badge.test.jsx       | 2 +-
 src/components/Button/Button.jsx                    | 2 +-
 src/components/ButtonGroup/ButtonGroup.jsx          | 2 +-
 src/components/_helpers/getRootPriorityClassName.js | 2 +-
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
index 56215029..ef841489 100644
--- 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
index a78c7022..1949d937 100644
--- 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
index 87e14c91..6e40cec2 100644
--- 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
index cf948894..3fa732fc 100644
--- 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
index d863a4e1..e894fb92 100644
--- 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
index 41017657..9cdb17c3 100644
--- 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;
   }