IconButton: Move some styles around in story and add background opacity animation (#68520)

packages/grafana-ui/src/components/IconButton/IconButton.mdx

@@ -9,6 +9,7 @@ import { Alert } from '../Alert/Alert';
 This component looks just like an icon but behaves like a button. It fulfils an action when you click it and has hover and focus states. You can choose which icon size you would like to use.
 
 `IconButton` is best used when you only want an icon instead of a button with text, for example when you want to place a solitary clickable icon next to text. An example where an `IconButton` is used in Grafana is the hamburger icon at the top left which opens the new navigation.
+When using `IconButton` right next to a text element consider wrapping both in a flex container and use `align-items: center;` to make them align properly.
 
 Always keep in mind to add text for a tooltip and an aria label.
 

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -44,63 +44,50 @@ export const Basic: StoryFn<typeof IconButton> = (args: IconButtonProps) => {
 };
 
 export const ExamplesSizes = () => {
+  const theme = useTheme2();
   const sizes: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
   const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
   const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];
 
+  const rowStyle = css`
+    display: flex;
+    gap: ${theme.spacing(1)};
+    margin-bottom: ${theme.spacing(2)};
+  `;
+
   return (
-    <div
+    <HorizontalGroup spacing="md">
-      className={css`
+      {variants.map((variant) => {
-        button {
+        return (
-          margin-right: 8px;
+          <div key={variant}>
-          margin-left: 8px;
+            <p>{variant}</p>
-          margin-bottom: 20px;
+            {icons.map((icon) => {
-        }
+              return (
-      `}
+                <div className={rowStyle} key={icon}>
-    >
+                  {sizes.map((size) => (
-      <HorizontalGroup spacing="md">
+                    <span key={icon + size}>
-        {variants.map((variant) => {
+                      <IconButton name={icon} size={size} variant={variant} />
-          return (
+                    </span>
-            <div key={variant}>
+                  ))}
-              <p>{variant}</p>
+                </div>
-              {icons.map((icon) => {
+              );
-                return (
+            })}
-                  <div
+          </div>
-                    className={css`
+        );
-                      display: flex;
+      })}
-                    `}
+      <div>
-                    key={icon}
+        <p>disabled</p>
-                  >
+        {icons.map((icon) => (
-                    {sizes.map((size) => (
+          <div className={rowStyle} key={icon}>
-                      <span key={icon + size}>
+            {sizes.map((size) => (
-                        <IconButton name={icon} size={size} variant={variant} />
+              <span key={icon + size}>
-                      </span>
+                <IconButton name={icon} size={size} disabled />
-                    ))}
+              </span>
-                  </div>
+            ))}
-                );
+          </div>
-              })}
+        ))}
-            </div>
+      </div>
-          );
+    </HorizontalGroup>
-        })}
-        <div>
-          <p>disabled</p>
-          {icons.map((icon) => (
-            <div
-              className={css`
-                display: flex;
-              `}
-              key={icon}
-            >
-              {sizes.map((size) => (
-                <span key={icon + size}>
-                  <IconButton name={icon} size={size} disabled />
-                </span>
-              ))}
-            </div>
-          ))}
-        </div>
-      </HorizontalGroup>
-    </div>
   );
 };
 
@@ -123,10 +110,6 @@ const RenderBackgroundScenario = ({ background }: ScenarioProps) => {
       className={css`
         padding: 30px;
         background: ${theme.colors.background[background]};
-        button {
-          margin-right: 8px;
-          margin-left: 8px;
-        }
       `}
     >
       <VerticalGroup spacing="md">
@@ -134,6 +117,7 @@ const RenderBackgroundScenario = ({ background }: ScenarioProps) => {
         <div
           className={css`
             display: flex;
+            gap: ${theme.spacing(2)};
           `}
         >
           {variants.map((variant) => {

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -124,13 +124,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size, variant: IconButton
       &:before {
         z-index: -1;
         position: absolute;
+        opacity: 0;
         width: ${hoverSize}px;
         height: ${hoverSize}px;
         border-radius: ${theme.shape.radius.default};
         content: '';
         transition-duration: 0.2s;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-property: transform, opacity;
+        transition-property: opacity;
       }
 
       &:focus,
@@ -147,6 +148,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size, variant: IconButton
           background-color: ${variant === 'secondary'
             ? theme.colors.action.hover
             : colorManipulator.alpha(iconColor, 0.12)};
+          opacity: 1;
         }
       }
     `,