add background hover on bubble radio items (#12055)

* add background hover on bubble radio items

* update snapshot test

frontend/src/metabase/components/Radio.jsx

@@ -156,6 +156,10 @@ const BubbleItem = styled(BaseItem)`
   color: ${props => (props.selected ? color("white") : color("brand"))};
   background-color: ${props =>
     props.selected ? color("brand") : lighten("brand")};
+  :hover {
+    background-color: ${props => !props.selected && lighten("brand", 0.38)};
+    transition: background 300ms linear;
+  }
 `;
 BubbleItem.defaultProps = {
   xspace: 1,

frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap

@@ -726,7 +726,7 @@ exports[`Radio should render "bubble" correctly 1`] = `
 >
   <li
     aria-selected={true}
-    className="Radio__BubbleItem-cPPKrR izYaHB Radio__BaseItem-gLcmFf bMiqJE"
+    className="Radio__BubbleItem-cPPKrR ebqsKW Radio__BaseItem-gLcmFf bMiqJE"
     mb={null}
     mr={1}
     onClick={[Function]}
@@ -746,7 +746,7 @@ exports[`Radio should render "bubble" correctly 1`] = `
   </li>
   <li
     aria-selected={false}
-    className="Radio__BubbleItem-cPPKrR iOSyOa Radio__BaseItem-gLcmFf etzrCv"
+    className="Radio__BubbleItem-cPPKrR kKeqRf Radio__BaseItem-gLcmFf etzrCv"
     mb={null}
     mr={null}
     onClick={[Function]}