[favorites] Split CSS helper into module to break SVG leak (#270495)

Author: clintandrewhall

src/platform/packages/shared/content-management/favorites/favorites_public/index.ts

@@ -11,10 +11,8 @@ export { type FavoritesClientPublic, FavoritesClient } from './src/favorites_cli
 export { FavoritesContextProvider } from './src/favorites_context';
 export { useFavorites } from './src/favorites_query';
 
-export {
-  FavoriteButton,
-  type FavoriteButtonProps,
-  cssFavoriteHoverWithinEuiTableRow,
-} from './src/components/favorite_button';
+export { FavoriteButton, type FavoriteButtonProps } from './src/components/favorite_button';
+
+export { cssFavoriteHoverWithinEuiTableRow } from './src/components/favorite_button_table_row_styles';
 export { StardustWrapper } from './src/components/stardust_wrapper';
 export { FavoritesEmptyState } from './src/components/favorites_empty_state';

src/platform/packages/shared/content-management/favorites/favorites_public/package.json

@@ -2,5 +2,6 @@
   "name": "@kbn/content-management-favorites-public",
   "private": true,
   "version": "1.0.0",
-  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
 }

src/platform/packages/shared/content-management/favorites/favorites_public/src/components/favorite_button.tsx

@@ -10,9 +10,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
-import type { EuiThemeComputed } from '@elastic/eui';
-import { EuiButtonIcon, euiCanAnimate } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiButtonIcon } from '@elastic/eui';
 import { useAddFavorite, useFavorites, useRemoveFavorite } from '../favorites_query';
 import { useFavoritesClient } from '../favorites_context';
 import { StardustWrapper } from './stardust_wrapper';
@@ -30,7 +28,9 @@ export const FavoriteButton = ({ id, className }: FavoriteButtonProps) => {
 
   const favoritesClient = useFavoritesClient();
 
-  if (!data) return null;
+  if (!data) {
+    return null;
+  }
 
   const isFavorite = data.favoriteIds.includes(id);
   const isFavoriteOptimistic = isFavorite || addFavorite.isLoading;
@@ -54,7 +54,9 @@ export const FavoriteButton = ({ id, className }: FavoriteButtonProps) => {
         aria-label={title}
         iconType={isFavoriteOptimistic ? 'starFill' : 'star'}
         onClick={() => {
-          if (addFavorite.isLoading || removeFavorite.isLoading) return;
+          if (addFavorite.isLoading || removeFavorite.isLoading) {
+            return;
+          }
 
           if (isFavorite) {
             favoritesClient?.reportRemoveFavoriteClick();
@@ -73,26 +75,3 @@ export const FavoriteButton = ({ id, className }: FavoriteButtonProps) => {
     </StardustWrapper>
   );
 };
-
-/**
- * CSS to apply to euiTable to show the favorite button on hover or when active
- * @param euiTheme
- */
-export const cssFavoriteHoverWithinEuiTableRow = (euiTheme: EuiThemeComputed) => css`
-  @media (hover: hover) {
-    .euiTableRow .cm-favorite-button--empty {
-      visibility: hidden;
-      opacity: 0;
-      ${euiCanAnimate} {
-        transition: opacity ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
-      }
-    }
-    .euiTableRow:hover,
-    .euiTableRow:focus-within {
-      .cm-favorite-button--empty {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-`;

src/platform/packages/shared/content-management/favorites/favorites_public/src/components/favorite_button_table_row_styles.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { EuiThemeComputed } from '@elastic/eui';
+import { euiCanAnimate } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+/**
+ * CSS to apply to a `EuiBasicTable` row container to show the favorite button
+ * on hover or when active.
+ *
+ * Extracted to its own module (no React, no `FavoriteButton` import) so
+ * consumers that only need the row-hover style don't drag the whole
+ * `FavoriteButton` + `StardustWrapper` graph into their bundle.
+ *
+ * @param euiTheme - resolved EUI theme, typically from `useEuiTheme()`.
+ */
+export const cssFavoriteHoverWithinEuiTableRow = (euiTheme: EuiThemeComputed) => css`
+  @media (hover: hover) {
+    .euiTableRow .cm-favorite-button--empty {
+      visibility: hidden;
+      opacity: 0;
+      ${euiCanAnimate} {
+        transition: opacity ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
+      }
+    }
+    .euiTableRow:hover,
+    .euiTableRow:focus-within {
+      .cm-favorite-button--empty {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+`;