Updating components to use success over secondary color option (#…

…4888) * add 'success' as an acceptable prop value for color * add snapshot of 'success' badge * update docs to use 'success' * add 'success' to Expression and make it the default color * add deprecation notice * update to use the color prop 'success' over 'secondary' * update snapshots to use the euiProgress--success class * update to use 'success' over 'secondary' * update to use 'success' over 'secondary' * add 'success' as color prop option * use 'success' over 'secondary' * use color prop 'success' over 'secondary' * add deprecation notice * remove secondary from list * update docs * add deprecation notice * update to use 'success' in test * add success as color option * update changelog * update to use success color variable * Revert "update to use success color variable" This reverts commit 76ed608. * change icon to use success sass var
elastic · Jun 21, 2021 · 773564a · 773564a
1 parent e4f8ae0
commit 773564a
Show file tree

Hide file tree

Showing 42 changed files with 169 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `success` as `color` option to `EuiBadge`, `EuiTextColor`, `EuiText`, `EuiStat`, and `EuiExpression` ([#4888](https://github.com/elastic/eui/pull/4888))
+- Changed default `color` props from `secondary` to `success` where necessary ([#4888](https://github.com/elastic/eui/pull/4888))
 - Added display of number of selected options in `EuiSearchBar` filters when `numActiveFilters` exists ([#4748](https://github.com/elastic/eui/pull/4748))
 - 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))

diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js
@@ -65,7 +65,7 @@ export const GuideRuleExample = ({
             {children}
           </EuiSplitPanel.Inner>
           <EuiSplitPanel.Inner color="transparent">
-            <EuiText color={type === 'do' ? 'secondary' : 'danger'} size="s">
+            <EuiText color={type === 'do' ? 'success' : 'danger'} size="s">
               <p>
                 {doOrDont && <strong>{doOrDont}.</strong>} {text}
               </p>

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
@@ -14,7 +14,7 @@ const badges = [
   'default',
   'hollow',
   'primary',
-  'secondary',
+  'success',
   'accent',
   'warning',
   'danger',
@@ -82,7 +82,7 @@ export default () => {
       <EuiSpacer size="m" />
       <EuiFlexGroup wrap responsive={false} gutterSize="xs">
         <EuiFlexItem grow={false}>
-          <EuiBadge color="secondary" isDisabled={isDisabled}>
+          <EuiBadge color="success" isDisabled={isDisabled}>
             {isDisabled ? 'Disabled badge' : 'Disable me!'}
           </EuiBadge>
         </EuiFlexItem>

diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js
@@ -30,7 +30,7 @@ export default () => (
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiBadge
-        color="secondary"
+        color="success"
         iconType="cross"
         iconSide="right"
         onClick={() => {}}

diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -33,7 +33,7 @@ const badgeSnippet = [
 `,
   `<EuiBadge color="#BADA55">Custom</EuiBadge>
 `,
-  `<EuiBadge color="secondary" isDisabled>Disabled</EuiBadge>
+  `<EuiBadge color="success" isDisabled>Disabled</EuiBadge>
 `,
 ];
 
@@ -66,7 +66,7 @@ const badgeButtonSnippet = [
   `<EuiBadge
   iconType="cross"
   iconSide="right"
-  color="secondary"
+  color="success"
   onClick={onBadgeClick}
   onClickAriaLabel="Aria label applied to text button"
   iconOnClick={onBadgeIconClick}
@@ -80,7 +80,7 @@ import BadgeHealth from './badge_health';
 const badgeHealthSource = require('!!raw-loader!./badge_health');
 const badgeHealthHtml = renderToHtml(BadgeHealth);
 const badgeHealthSnippet = [
-  `<EuiBadge color="secondary">Healthy</EuiBadge>
+  `<EuiBadge color="success">Healthy</EuiBadge>
 `,
   `<EuiBadge color="warning">Warning</EuiBadge>
 `,

diff --git a/src-docs/src/views/badge/badge_health.js b/src-docs/src/views/badge/badge_health.js
@@ -9,7 +9,7 @@ import {
 export default () => (
   <EuiFlexGroup wrap responsive={false} gutterSize="xs">
     <EuiFlexItem grow={false}>
-      <EuiBadge color="secondary">Healthy</EuiBadge>
+      <EuiBadge color="success">Healthy</EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiBadge color="warning">Warning</EuiBadge>

diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.js
@@ -30,7 +30,7 @@ export default () => (
       </EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiBadge color="secondary" href="/#/display/badge" isDisabled={true}>
+      <EuiBadge color="success" href="/#/display/badge" isDisabled={true}>
         disabled anchor badge
       </EuiBadge>
     </EuiFlexItem>

diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx
@@ -34,7 +34,7 @@ const complexEvent = (
       <EuiBadge color="primary">sample</EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiBadge color="secondary">review</EuiBadge>
+      <EuiBadge color="success">review</EuiBadge>
     </EuiFlexItem>
   </EuiFlexGroup>
 );

diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.js
@@ -75,7 +75,7 @@ export const Sparklines = () => {
             <EuiStat
               title=""
               description="Increase over time"
-              titleColor="secondary"
+              titleColor="success"
               textAlign="right">
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
@@ -93,7 +93,7 @@ export const Sparklines = () => {
                 />
               </Chart>
               <EuiSpacer size="s" />
-              <EuiText size="xs" color="secondary">
+              <EuiText size="xs" color="success">
                 <EuiIcon type="sortUp" /> <strong>15%</strong>
               </EuiText>
             </EuiStat>

diff --git a/src-docs/src/views/expression/colors.tsx b/src-docs/src/views/expression/colors.tsx
@@ -5,7 +5,7 @@ import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
-    <EuiExpression description="Secondary" value="isDefault()" />
+    <EuiExpression description="Success" value="isDefault()" />
     <EuiSpacer size="s" />
     <EuiExpression description="Primary" value="color()" color="primary" />
     <EuiSpacer size="s" />

diff --git a/src-docs/src/views/facet/facet.js b/src-docs/src/views/facet/facet.js
@@ -10,9 +10,7 @@ export default () => (
       Simple, selected
     </EuiFacetButton>
     <br />
-    <EuiFacetButton
-      quantity={6}
-      icon={<EuiIcon type="dot" color="secondary" />}>
+    <EuiFacetButton quantity={6} icon={<EuiIcon type="dot" color="success" />}>
       Label or color indicator
     </EuiFacetButton>
     <br />

diff --git a/src-docs/src/views/facet/facet_example.js b/src-docs/src/views/facet/facet_example.js
@@ -17,7 +17,7 @@ const facetSource = require('!!raw-loader!./facet');
 const facetHtml = renderToHtml(Facet);
 const facetSnippet = `<EuiFacetButton
   quantity={6}
-  icon={<EuiIcon type="dot" color="secondary" />}
+  icon={<EuiIcon type="dot" color="success" />}
   isSelected>
   <!-- Facet with EuiIcon content -->
 </EuiFacetButton>

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
@@ -21,7 +21,7 @@ export default () => (
           <EuiProgress
             valueText={true}
             max={100}
-            color="secondary"
+            color="success"
             size="s"
             {...item}
           />

diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js
@@ -32,7 +32,7 @@ export const ResizeObserverHookExample = () => {
       <EuiText>
         {hasResizeObserver ? (
           <p>
-            <EuiIcon type="checkInCircleFilled" color="secondary" /> Browser
+            <EuiIcon type="checkInCircleFilled" color="success" /> Browser
             supports ResizeObserver API.
           </p>
         ) : (

diff --git a/src-docs/src/views/stat/playground.js b/src-docs/src/views/stat/playground.js
@@ -19,6 +19,7 @@ export default () => {
     options: {
       primary: 'primary',
       secondary: 'secondary',
+      success: 'success',
       danger: 'danger',
       accent: 'accent',
       text: 'text',

diff --git a/src-docs/src/views/stat/stat_colors.js b/src-docs/src/views/stat/stat_colors.js
@@ -17,8 +17,8 @@ export default () => (
       <EuiFlexItem>
         <EuiStat
           title="1,000"
-          description="Secondary color"
-          titleColor="secondary"
+          description="Success color"
+          titleColor="success"
         />
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/src-docs/src/views/stat/stat_combos.js b/src-docs/src/views/stat/stat_combos.js
@@ -48,10 +48,10 @@ export default () => {
             <EuiStat
               title="6,800"
               description="Success widgets"
-              titleColor="secondary"
+              titleColor="success"
               textAlign="right"
               isLoading={isLoading}>
-              <EuiIcon type="check" color="secondary" />
+              <EuiIcon type="check" color="success" />
             </EuiStat>
           </EuiPanel>
         </EuiFlexItem>

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -58,7 +58,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 28 2016',
         magnitude: 1,
-        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
+        health: <EuiBadge color="success">Healthy</EuiBadge>,
       },
       {
         id: 1,
@@ -70,7 +70,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 01 2016',
         magnitude: 1,
-        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
+        health: <EuiBadge color="success">Healthy</EuiBadge>,
       },
       {
         id: 2,
@@ -104,7 +104,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 16 2016',
         magnitude: 100,
-        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
+        health: <EuiBadge color="success">Healthy</EuiBadge>,
       },
       {
         id: 4,
@@ -126,7 +126,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
+        health: <EuiBadge color="success">Healthy</EuiBadge>,
       },
       {
         id: 6,
@@ -170,7 +170,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
+        health: <EuiBadge color="success">Healthy</EuiBadge>,
       },
       {
         id: 10,
@@ -203,7 +203,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="secondary">Healthy</EuiHealth>,
+        health: <EuiHealth color="success">Healthy</EuiHealth>,
       },
       {
         id: 13,

diff --git a/src-docs/src/views/text/text_align.js b/src-docs/src/views/text/text_align.js
@@ -22,7 +22,7 @@ export default () => (
         prop
       </p>
     </EuiText>
-    <EuiText textAlign="center" color="secondary">
+    <EuiText textAlign="center" color="success">
       <p>And in conjunction with coloring.</p>
     </EuiText>
   </div>

diff --git a/src-docs/src/views/text/text_color.js b/src-docs/src/views/text/text_color.js
@@ -12,7 +12,7 @@ export default () => (
     <EuiTitle>
       <h2>
         <EuiTextColor color="default">You </EuiTextColor>
-        <EuiTextColor color="secondary">use </EuiTextColor>
+        <EuiTextColor color="success">use </EuiTextColor>
         <EuiTextColor color="accent">it </EuiTextColor>
         <EuiTextColor color="warning">on </EuiTextColor>
         <EuiTextColor color="danger">anything!</EuiTextColor>
@@ -29,7 +29,7 @@ export default () => (
         <EuiTextColor color="subdued">Subdued text color</EuiTextColor>
       </p>
       <p>
-        <EuiTextColor color="secondary">Secondary text color</EuiTextColor>
+        <EuiTextColor color="success">Success text color</EuiTextColor>
       </p>
       <p>
         <EuiTextColor color="accent">Accent text color</EuiTextColor>

diff --git a/src-docs/src/views/text_diff/text_diff.js b/src-docs/src/views/text_diff/text_diff.js
@@ -40,7 +40,7 @@ export default () => {
       </EuiText>
       <EuiSpacer />
       <EuiCode>
-        <EuiTextColor color="secondary"> {ins} </EuiTextColor> Insertions,
+        <EuiTextColor color="success"> {ins} </EuiTextColor> Insertions,
         <EuiTextColor color="danger"> {del} </EuiTextColor>
         Deletions
       </EuiCode>

diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
@@ -277,6 +277,23 @@ exports[`EuiBadge props color secondary is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBadge props color success is rendered 1`] = `
+<span
+  class="euiBadge euiBadge--iconLeft"
+  style="background-color:#6dccb1;color:#000"
+>
+  <span
+    class="euiBadge__content"
+  >
+    <span
+      class="euiBadge__text"
+    >
+      Content
+    </span>
+  </span>
+</span>
+`;
+
 exports[`EuiBadge props color warning is rendered 1`] = `
 <span
   class="euiBadge euiBadge--iconLeft"
@@ -479,6 +496,23 @@ exports[`EuiBadge props style is rendered with secondary 1`] = `
 </span>
 `;
 
+exports[`EuiBadge props style is rendered with success 1`] = `
+<span
+  class="euiBadge euiBadge--iconLeft"
+  style="background-color:#6dccb1;color:#000;border:4px solid tomato"
+>
+  <span
+    class="euiBadge__content"
+  >
+    <span
+      class="euiBadge__text"
+    >
+      Content
+    </span>
+  </span>
+</span>
+`;
+
 exports[`EuiBadge props style is rendered with warning 1`] = `
 <span
   class="euiBadge euiBadge--iconLeft"

diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
@@ -84,7 +84,8 @@ export type EuiBadgeProps = {
   iconSide?: IconSide;
 
   /**
-   * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.
+   * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
+   * **`secondary` color is DEPRECATED, use `success` instead**
    */
   color?: IconColor;
   /**
@@ -116,6 +117,7 @@ const colorToHexMap: { [color in IconColor]: string } = {
   // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
   default: '#d3dae6',
   primary: visColors[1],
+  success: visColors[0],
   secondary: visColors[0],
   accent: visColors[2],
   warning: visColors[5],