[8.x] Replace Sass `@euiButton` mixin usage with CSS-in-JS (#194621) (#194737)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Replace Sass `@euiButton` mixin usage with CSS-in-JS
(#194621)](https://github.com/elastic/kibana/pull/194621)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-02T16:02:36Z","message":"Replace
Sass `@euiButton` mixin usage with CSS-in-JS (#194621)\n\n##
Summary\r\n\r\nThis PR removes a Sass mixin usage that is shortly to
be\r\ndeprecated/removed from EUI.\r\n\r\nI think this somewhat
addresses #122594 / #122556 but to be honest I'm\r\nnot 100% sure what's
going on with that meta issue 😅\r\n\r\n### QA\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"231\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/578ea6d8-1dce-4daa-9e3d-e1aac7079ec3\">\r\n|
<img width=\"260\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/482aa5a1-ed0c-4252-95b0-8b324628cb6c\">\r\n|\r\n\r\nNote
that the height of the button has changed from prod, but from what\r\nI
can tell this is actually correct and was previously broken
on\r\nproduction. Hover/focus styles should remain the same compared
to\r\nproduction.\r\n\r\n- `yarn storybook shared_ux`\r\n- Go
to\r\nhttp://localhost:9001/?path=/story/button-exit-full-screen-button--exit-full-screen-button\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"9bd0da694e7e8851935ac4dcd2b8d76e74fec9f4","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","v8.16.0","backport:version"],"title":"Replace
Sass `@euiButton` mixin usage with
CSS-in-JS","number":194621,"url":"https://github.com/elastic/kibana/pull/194621","mergeCommit":{"message":"Replace
Sass `@euiButton` mixin usage with CSS-in-JS (#194621)\n\n##
Summary\r\n\r\nThis PR removes a Sass mixin usage that is shortly to
be\r\ndeprecated/removed from EUI.\r\n\r\nI think this somewhat
addresses #122594 / #122556 but to be honest I'm\r\nnot 100% sure what's
going on with that meta issue 😅\r\n\r\n### QA\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"231\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/578ea6d8-1dce-4daa-9e3d-e1aac7079ec3\">\r\n|
<img width=\"260\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/482aa5a1-ed0c-4252-95b0-8b324628cb6c\">\r\n|\r\n\r\nNote
that the height of the button has changed from prod, but from what\r\nI
can tell this is actually correct and was previously broken
on\r\nproduction. Hover/focus styles should remain the same compared
to\r\nproduction.\r\n\r\n- `yarn storybook shared_ux`\r\n- Go
to\r\nhttp://localhost:9001/?path=/story/button-exit-full-screen-button--exit-full-screen-button\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"9bd0da694e7e8851935ac4dcd2b8d76e74fec9f4"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194621","number":194621,"mergeCommit":{"message":"Replace
Sass `@euiButton` mixin usage with CSS-in-JS (#194621)\n\n##
Summary\r\n\r\nThis PR removes a Sass mixin usage that is shortly to
be\r\ndeprecated/removed from EUI.\r\n\r\nI think this somewhat
addresses #122594 / #122556 but to be honest I'm\r\nnot 100% sure what's
going on with that meta issue 😅\r\n\r\n### QA\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"231\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/578ea6d8-1dce-4daa-9e3d-e1aac7079ec3\">\r\n|
<img width=\"260\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/482aa5a1-ed0c-4252-95b0-8b324628cb6c\">\r\n|\r\n\r\nNote
that the height of the button has changed from prod, but from what\r\nI
can tell this is actually correct and was previously broken
on\r\nproduction. Hover/focus styles should remain the same compared
to\r\nproduction.\r\n\r\n- `yarn storybook shared_ux`\r\n- Go
to\r\nhttp://localhost:9001/?path=/story/button-exit-full-screen-button--exit-full-screen-button\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"9bd0da694e7e8851935ac4dcd2b8d76e74fec9f4"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

packages/shared-ux/button/exit_full_screen/package.json

@@ -2,6 +2,5 @@
   "name": "@kbn/shared-ux-button-exit-full-screen",
   "private": true,
   "version": "1.0.0",
-  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
-  "sideEffects": ["*.scss"]
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
 }

packages/shared-ux/button/exit_full_screen/src/__snapshots__/exit_full_screen_button.test.tsx.snap

@@ -10,7 +10,13 @@ exports[`<ExitFullScreenButton /> with kibana services is rendered 1`] = `
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span
@@ -51,7 +57,13 @@ exports[`<ExitFullScreenButton /> with kibana services renders custom logo 1`] =
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span
@@ -99,7 +111,13 @@ exports[`<ExitFullScreenButton /> with manual services is rendered 1`] = `
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span

packages/shared-ux/button/exit_full_screen/src/exit_full_screen_button.component.tsx

@@ -15,16 +15,20 @@ import {
   EuiIcon,
   EuiImage,
   useEuiTheme,
+  useEuiShadow,
   makeHighContrastColor,
 } from '@elastic/eui';
+// EUI allows reaching into internal folders for component-specific exports, but they aren't typed in Kibana
+// @ts-ignore
+import { useEuiButtonFocusCSS } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button';
+// @ts-ignore
+import { euiButtonDisplayStyles } from '@elastic/eui/lib/components/button/button_display/_button_display.styles';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import cx from 'classnames';
 
 import type { ExitFullScreenButtonComponentProps as Props } from '../types';
 
-import './exit_full_screen_button.scss';
-
 const text = i18n.translate('sharedUXPackages.exitFullScreenButton.exitFullScreenModeButtonText', {
   defaultMessage: 'Exit full screen',
 });
@@ -40,17 +44,23 @@ const description = i18n.translate(
  * A presentational component that renders a button designed to exit "full screen" mode.
  */
 export const ExitFullScreenButton = ({ onClick, className, customLogo }: Props) => {
-  const { euiTheme } = useEuiTheme();
-  const { colors, size, border } = euiTheme;
+  const euiThemeContext = useEuiTheme();
+  const { euiButtonDisplay } = euiButtonDisplayStyles(euiThemeContext);
+  const { colors, size, border } = euiThemeContext.euiTheme;
 
-  const buttonCSS = css`
-    padding: ${size.xs} ${size.s};
-    background: ${colors.fullShade};
-    border-radius: ${border.radius.small};
-    height: ${size.xl};
-    color: ${makeHighContrastColor(colors.emptyShade)(colors.fullShade)};
-    outline-color: ${colors.emptyShade};
-  `;
+  const buttonCSS = [
+    euiButtonDisplay,
+    css`
+      padding: ${size.xs} ${size.s};
+      background: ${colors.fullShade};
+      border-radius: ${border.radius.small};
+      height: ${size.xl};
+      color: ${makeHighContrastColor(colors.emptyShade)(colors.fullShade)};
+      outline-color: ${colors.emptyShade};
+    `,
+    useEuiShadow('l'),
+    useEuiButtonFocusCSS(),
+  ];
 
   return (
     <div>

packages/shared-ux/button/exit_full_screen/src/exit_full_screen_button.scss

@@ -1,12 +0,0 @@
-
-/**
- * This file is a stop-gap measure to ensure that EUI mixins that haven't been converted from Emotion
- * are still applied.  This should be replaced once `EuiButton` and other mixin functionality are
- * fully converted to Emotion.
- *
- * see: https://github.com/elastic/kibana/issues/122594
- */
-.exitFullScreenButton {
-  @include euiButton;
-  @include euiBottomShadow;
-}