[Emotion] Convert EuiButton (#6150)

* Converted `EuiButton` to emotion * Adding CL * Improving example panel to have color `subdued`. Removing wrong `.scss` import.
elastic · Aug 23, 2022 · 8f667c3 · 8f667c3
1 parent 0eca115
commit 8f667c3
Show file tree

Hide file tree

Showing 95 changed files with 1,725 additions and 2,007 deletions.
diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js
@@ -25,12 +25,12 @@ export default () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiButton color="ghost" size="s" iconType="help">
+                <EuiButton color="text" size="s" iconType="help">
                   Help
                 </EuiButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton color="ghost" size="s" iconType="user">
+                <EuiButton color="text" size="s" iconType="user">
                   Add user
                 </EuiButton>
               </EuiFlexItem>
@@ -39,7 +39,7 @@ export default () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty color="ghost" size="s" iconType="cross">
+                <EuiButtonEmpty color="text" size="s" iconType="cross">
                   Discard
                 </EuiButtonEmpty>
               </EuiFlexItem>

diff --git a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js
@@ -46,7 +46,7 @@ export default () => {
             <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={() => setToggleIdSelected(null)}
-                color="ghost"
+                color="text"
                 size="s"
                 iconType="cross"
               >

diff --git a/src-docs/src/views/bottom_bar/playground.js b/src-docs/src/views/bottom_bar/playground.js
@@ -10,7 +10,7 @@ export const bottomBarConfig = () => {
 
   propsToUse.children = {
     type: PropTypes.ReactNode,
-    value: '<EuiButton color="ghost">Save</EuiButton>',
+    value: '<EuiButton color="text">Save</EuiButton>',
   };
 
   propsToUse.position = {

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
@@ -12,6 +12,11 @@ import {
   EuiCallOut,
   EuiLink,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCard,
+  EuiPanel,
+  EuiSpacer,
 } from '../../../../src/components';
 
 import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group';
@@ -256,6 +261,81 @@ export const ButtonExample = {
   ),
   sections: [
     {
+      text: (
+        <>
+          <EuiSpacer size="xl" />
+          <EuiFlexGroup wrap>
+            <EuiFlexItem>
+              <EuiCard
+                hasBorder
+                href="#/navigation/button#basic-button"
+                image={
+                  <EuiPanel color="subdued" borderRadius="none">
+                    <EuiPanel color="subdued">
+                      <EuiButton fill>Primary action</EuiButton>
+                    </EuiPanel>
+                  </EuiPanel>
+                }
+                title="EuiButton"
+                titleSize="xs"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCard
+                hasBorder
+                href="#/navigation/button#basic-button"
+                image={
+                  <EuiPanel color="subdued" borderRadius="none">
+                    <EuiPanel color="subdued">
+                      <EuiButton>Secondary action</EuiButton>
+                    </EuiPanel>
+                  </EuiPanel>
+                }
+                title="EuiButton"
+                titleSize="xs"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCard
+                hasBorder
+                href="#/navigation/button#empty-button"
+                image={
+                  <EuiPanel color="subdued" borderRadius="none">
+                    <EuiPanel color="subdued">
+                      <EuiButtonEmpty>Tertiary action</EuiButtonEmpty>
+                    </EuiPanel>
+                  </EuiPanel>
+                }
+                title="EuiButtonEmpty"
+                titleSize="xs"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCard
+                hasBorder
+                href="#/navigation/button#icon-buttons"
+                image={
+                  <EuiPanel color="subdued" borderRadius="none">
+                    <EuiPanel color="subdued">
+                      <EuiButtonIcon
+                        display="base"
+                        size="m"
+                        iconType="refresh"
+                        aria-label="Button icon example with refresh icon"
+                      />
+                    </EuiPanel>
+                  </EuiPanel>
+                }
+                title="EuiButtonIcon"
+                titleSize="xs"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      ),
+    },
+    {
+      title: 'Basic button',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -624,8 +704,7 @@ export const ButtonExample = {
       demoPanelProps: { color: 'subdued' },
     },
     {
-      title: 'Ghost',
-      ghostBackground: true,
+      title: 'Ghost vs. dark mode',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -634,19 +713,24 @@ export const ButtonExample = {
       ],
       text: (
         <p>
-          For buttons on dark color backgrounds, you can pass{' '}
-          <EuiCode language="js">{'color="ghost"'}</EuiCode> to any of the
-          button components on this page. These should be used extremely rarely,
-          and are only for placing buttons on top of dark or image-based
-          backgrounds. A good example of their use is in the{' '}
+          For buttons on dark color backgrounds, it is recommended to wrap the
+          entire area in{' '}
+          <EuiCode language="js">
+            {'<EuiThemeProvider colorMode="dark">'}
+          </EuiCode>{' '}
+          to invert all colors to dark mode. The legacy{' '}
+          <EuiCode language="js">{'color="ghost"'}</EuiCode> now uses this
+          method and is set for deprecation. An example usage of inverted
+          buttons is in combination with{' '}
           <Link to="/layout/bottom-bar">
             <strong>EuiBottomBar</strong>
           </Link>{' '}
-          component.
+          which already wraps its children in dark mode.
         </p>
       ),
       snippet: buttonGhostSnippet,
       demo: <ButtonGhost />,
+      demoPanelProps: { paddingSize: 'none' },
     },
   ],
   guidelines: <Guidelines />,

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -6,7 +6,9 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
 } from '../../../../src/components';
+import { EuiThemeProvider } from '../../../../src/services';
 
 export default () => {
   const [toggle0On, setToggle0On] = useState(false);
@@ -16,63 +18,67 @@ export default () => {
   };
 
   return (
-    <EuiFlexGroup wrap gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" onClick={() => {}}>
-          Ghost
-        </EuiButton>
-      </EuiFlexItem>
+    <EuiThemeProvider colorMode="dark">
+      <EuiPanel borderRadius="none" hasShadow={false} color="subdued">
+        <EuiFlexGroup wrap gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButton color="text" onClick={() => {}}>
+              Ghost
+            </EuiButton>
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          fill
-          color="ghost"
-          size="s"
-          iconType="check"
-          onClick={() => {}}
-        >
-          Filled
-        </EuiButton>
-      </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              color="text"
+              size="s"
+              iconType="check"
+              onClick={() => {}}
+            >
+              Filled
+            </EuiButton>
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty size="s" color="ghost" onClick={() => {}}>
-          small
-        </EuiButtonEmpty>
-      </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty size="s" color="text" onClick={() => {}}>
+              small
+            </EuiButtonEmpty>
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          size="s"
-          color="ghost"
-          iconType="user"
-          onClick={() => {}}
-          aria-label="Your account"
-        />
-      </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              size="s"
+              color="text"
+              iconType="user"
+              onClick={() => {}}
+              aria-label="Your account"
+            />
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" isLoading fill size="s">
-          Loading&hellip;
-        </EuiButton>
-      </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton color="text" isLoading fill size="s">
+              Loading&hellip;
+            </EuiButton>
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" isLoading>
-          Loading&hellip;
-        </EuiButton>
-      </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton color="text" isLoading>
+              Loading&hellip;
+            </EuiButton>
+          </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          color="ghost"
-          isSelected={toggle0On}
-          fill={toggle0On}
-          onClick={onToggle0Change}
-        >
-          Toggle me
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              color="text"
+              isSelected={toggle0On}
+              fill={toggle0On}
+              onClick={onToggle0Change}
+            >
+              Toggle me
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiThemeProvider>
   );
 };
diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx
@@ -338,10 +338,10 @@ export default () => {
                           <ColorSectionJS
                             key={color}
                             color={color as keyof _EuiThemeColorsMode}
-                            colorValue={euiButtonColor(
-                              color as _EuiButtonColor,
-                              euiTheme
-                            )}
+                            colorValue={
+                              euiButtonColor(euiTheme, color as _EuiButtonColor)
+                                .backgroundColor
+                            }
                             hookName="useEuiButtonColorCSS"
                             minimumContrast={contrastValue}
                             showTextVariants={showTextVariants}

diff --git a/src-docs/src/views/theme/customizing/values.tsx b/src-docs/src/views/theme/customizing/values.tsx
@@ -135,7 +135,7 @@ export default () => {
                 <>
                   <EuiFlexItem grow={false}>
                     <EuiButtonEmpty
-                      color="ghost"
+                      color="text"
                       iconType="cross"
                       onClick={clearOverrides}
                     >
@@ -157,7 +157,7 @@ export default () => {
                 <span>
                   <EuiButton
                     onClick={() => setJsonFlyoutIsOpen(true)}
-                    color="ghost"
+                    color="text"
                   >
                     View theme JSON
                   </EuiButton>