Updating buttons and links to promote success over secondary colo…

…r and fixed EuiButtonIcon colors (#4874) * Using the same color set for buttons and icon buttons - Added `success` and `accent` color options to EuiButton - Starting to deprecate `secondary`
elastic · Jun 21, 2021 · d69a5de · d69a5de
1 parent 773564a
commit d69a5de
Show file tree

Hide file tree

Showing 30 changed files with 477 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,12 +6,15 @@
 - Reverted `z-index: 1` on `EuiPageBody` ([#4892](https://github.com/elastic/eui/pull/4892))
 - Added `updateButtonProps` to `EuiSuperDatePicker` to provide more control over the update/refresh button ([#4895](https://github.com/elastic/eui/pull/4895))
 - Added `DraggableProvidedDragHandleProps` interface from 'react-beautiful-dnd' ([#4903](https://github.com/elastic/eui/pull/4903))
+- Added `success` and `accent` `color` options to `EuiButton` ([#4874](https://github.com/elastic/eui/pull/4874))
+- Added `success` `color` option to `EuiLink` ([#4874](https://github.com/elastic/eui/pull/4874))
 
 **Bug fixes**
 
 - Fixed `EuiRange` container expansion due to negative margin value ([#4815](https://github.com/elastic/eui/pull/4815))
 - Fixed `EuiRange` ticks position to better align with thumbs ([#4815](https://github.com/elastic/eui/pull/4815))
 - Fixed DataGrid footer and header rows jumps in Firefox ([#4869](https://github.com/elastic/eui/issues/4869))
+- Fixed shaded colors of `EuiButtonIcon` ([#4874](https://github.com/elastic/eui/pull/4874))
 
 **Theme: Amsterdam**
 
@@ -42,7 +45,7 @@
 
 **Theme: Amsterdam**
 
-- Decreased spacing and root element size of `EuiSideNav` ([#4816](https://github.com/elastic/eui/pull/4816))
+- Decreased spacing and root element size of `EuiSideNav` ([#4827](https://github.com/elastic/eui/pull/4827))
 
 ## [`34.2.0`](https://github.com/elastic/eui/tree/v34.2.0)
 

diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js
@@ -34,25 +34,25 @@ export default () => (
 
     <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
       <EuiFlexItem grow={false}>
-        <EuiButton color="secondary" onClick={() => {}}>
-          Secondary
+        <EuiButton color="success" onClick={() => {}}>
+          Success
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton color="secondary" fill onClick={() => {}}>
+        <EuiButton color="success" fill onClick={() => {}}>
           Filled
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton color="secondary" size="s" onClick={() => {}}>
+        <EuiButton color="success" size="s" onClick={() => {}}>
           Small
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton color="secondary" size="s" fill onClick={() => {}}>
+        <EuiButton color="success" size="s" fill onClick={() => {}}>
           Small and filled
         </EuiButton>
       </EuiFlexItem>

diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
@@ -7,22 +7,31 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
+const colors = ['primary', 'text', 'accent', 'success', 'warning', 'danger'];
+
 export default () => (
   <>
-    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={false}>
-        <EuiButton size="s" iconType="calendar">
-          Last 15 min
-        </EuiButton>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          display="base"
-          size="s"
-          iconType="boxesVertical"
-          aria-label="More"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    {colors.map((color) => (
+      <EuiFlexGroup
+        key={color}
+        responsive={false}
+        gutterSize="s"
+        alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton color={color} size="s" iconType="calendar">
+            Last 15 min
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color={color}
+            display="base"
+            size="s"
+            iconType="boxesVertical"
+            aria-label="More"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ))}
   </>
 );
diff --git a/src-docs/src/views/empty_prompt/playground.js b/src-docs/src/views/empty_prompt/playground.js
@@ -24,7 +24,7 @@ export default () => {
     options: {
       default: 'default',
       subdued: 'subdued',
-      secondary: 'secondary',
+      success: 'success',
       accent: 'accent',
       danger: 'danger',
       warning: 'warning',

diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
@@ -100,11 +100,11 @@ export default () => {
   }
   return (
     <div>
-      <EuiLink color="secondary" onClick={() => showFlyout('s')}>
+      <EuiLink color="success" onClick={() => showFlyout('s')}>
         Show <strong>small</strong> flyout with <strong>no max-width</strong>
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout('s', true)}>
+      <EuiLink color="success" onClick={() => showFlyout('s', true)}>
         Show <strong>small</strong> flyout with{' '}
         <strong>default max-width</strong>
       </EuiLink>
@@ -123,11 +123,11 @@ export default () => {
 
       <EuiSpacer />
 
-      <EuiLink color="secondary" onClick={() => showFlyout('m')}>
+      <EuiLink color="success" onClick={() => showFlyout('m')}>
         Show <strong>medium</strong> flyout with <strong>no max-width</strong>
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout('m', true)}>
+      <EuiLink color="success" onClick={() => showFlyout('m', true)}>
         Show <strong>medium</strong> flyout with{' '}
         <strong>default max-width</strong>
       </EuiLink>
@@ -138,18 +138,18 @@ export default () => {
         100vw wins on small screens
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout('m', 900)}>
+      <EuiLink color="success" onClick={() => showFlyout('m', 900)}>
         Show <strong>medium</strong> flyout with{' '}
         <strong>larger custom max-width</strong>
       </EuiLink>
 
       <EuiSpacer />
 
-      <EuiLink color="secondary" onClick={() => showFlyout('l')}>
+      <EuiLink color="success" onClick={() => showFlyout('l')}>
         Show <strong>large</strong> flyout with <strong>no max-width</strong>
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout('l', true)}>
+      <EuiLink color="success" onClick={() => showFlyout('l', true)}>
         Show <strong>large</strong> flyout with{' '}
         <strong>default max-width</strong>
       </EuiLink>
@@ -160,18 +160,18 @@ export default () => {
         100vw wins on small screens
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout('l', 1600)}>
+      <EuiLink color="success" onClick={() => showFlyout('l', 1600)}>
         Show <strong>large</strong> flyout with{' '}
         <strong>larger custom max-width</strong>
       </EuiLink>
 
       <EuiSpacer />
 
-      <EuiLink color="secondary" onClick={() => showFlyout(240)}>
+      <EuiLink color="success" onClick={() => showFlyout(240)}>
         Show <strong>240</strong> flyout with <strong>no max-width</strong>
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout(240, true)}>
+      <EuiLink color="success" onClick={() => showFlyout(240, true)}>
         Show <strong>240</strong> flyout with <strong>default max-width</strong>
       </EuiLink>
       <EuiSpacer size="s" />
@@ -181,7 +181,7 @@ export default () => {
         wins on small screens
       </EuiLink>
       <EuiSpacer size="s" />
-      <EuiLink color="secondary" onClick={() => showFlyout(240, 1600)}>
+      <EuiLink color="success" onClick={() => showFlyout(240, 1600)}>
         Show <strong>240</strong> flyout with{' '}
         <strong>larger custom max-width</strong>
       </EuiLink>

diff --git a/src-docs/src/views/guidelines/accessibility.js b/src-docs/src/views/guidelines/accessibility.js
@@ -294,7 +294,7 @@ export default {
           <EuiSpacer />
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
-              <EuiIcon type="checkInCircleFilled" size="l" color="secondary" />
+              <EuiIcon type="checkInCircleFilled" size="l" color="success" />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs">

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
@@ -43,8 +43,8 @@ export default () => (
         </EuiLink>
       </li>
       <li>
-        <EuiLink color="secondary" href="#">
-          secondary
+        <EuiLink color="success" href="#">
+          success
         </EuiLink>
       </li>
       <li>

diff --git a/src-docs/src/views/link/link_disable.js b/src-docs/src/views/link/link_disable.js
@@ -31,7 +31,7 @@ export const LinkDisable = () => {
       <EuiSpacer size="m" />
       <EuiTextColor color="accent">
         When links are disabled, they inherit the{' '}
-        <EuiLink color="secondary" disabled={disableLink} onClick={() => {}}>
+        <EuiLink color="success" disabled={disableLink} onClick={() => {}}>
           color
         </EuiLink>{' '}
         of surrounding text.

diff --git a/src-docs/src/views/link/link_example.js b/src-docs/src/views/link/link_example.js
@@ -24,7 +24,7 @@ const linkValidationHtml = renderToHtml(LinkValidation);
 const linkSnippet = [
   `<EuiLink href="#"><!-- Link text --></EuiLink>
 `,
-  `<EuiLink href="#" color="secondary">
+  `<EuiLink href="#" color="success">
   <!-- Colored link text -->
 </EuiLink>
 `,

diff --git a/src-docs/src/views/link/link_validation.js b/src-docs/src/views/link/link_validation.js
@@ -15,7 +15,7 @@ export const LinkValidation = () => {
     <>
       {urls.map((url) => (
         <div key={url}>
-          <EuiLink color="secondary" href={url}>
+          <EuiLink color="success" href={url}>
             {url}
           </EuiLink>
         </div>

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -116,7 +116,7 @@ export const Table = () => {
           {
             render: (item) => {
               return (
-                <EuiLink color="secondary" onClick={() => cloneUser(item)}>
+                <EuiLink color="success" onClick={() => cloneUser(item)}>
                   Clone
                 </EuiLink>
               );

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -19,6 +19,21 @@ exports[`EuiButton is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props color accent is rendered 1`] = `
+<button
+  class="euiButton euiButton--accent"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButton props color danger is rendered 1`] = `
 <button
   class="euiButton euiButton--danger"
@@ -79,6 +94,21 @@ exports[`EuiButton props color secondary is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props color success is rendered 1`] = `
+<button
+  class="euiButton euiButton--success"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButton props color text is rendered 1`] = `
 <button
   class="euiButton euiButton--text"

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -47,7 +47,9 @@ import { validateHref } from '../../services/security/href_validator';
 
 export type ButtonColor =
   | 'primary'
+  | 'accent'
   | 'secondary'
+  | 'success'
   | 'warning'
   | 'danger'
   | 'ghost'
@@ -57,7 +59,9 @@ export type ButtonSize = 's' | 'm';
 
 export const colorToClassNameMap: { [color in ButtonColor]: string } = {
   primary: '--primary',
+  accent: '--accent',
   secondary: '--secondary',
+  success: '--success',
   warning: '--warning',
   danger: '--danger',
   ghost: '--ghost',
@@ -84,7 +88,8 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    */
   fill?: boolean;
   /**
-   * Any of our named colors
+   * Any of our named colors.
+   * **`secondary` color is DEPRECATED, use `success` instead**
    */
   color?: ButtonColor;
   /**