fix js errors, tweak coloring, make badges default to span

elastic · Mar 12, 2018 · ac5f9f2 · ac5f9f2
1 parent fe9d522
commit ac5f9f2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 43 deletions.
diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
@@ -45,21 +45,6 @@ const allowedColors = [
   'euiColorAccent',
 ]
 
-function renderPaletteColor(color) {
-  return (
-    <EuiFlexItem>
-      <div style={{ background: lightColors[color].rgba, height: 32 }} />
-      <div style={{ padding: '16px 16px 32px 16px' }}>
-        <p><strong>{color}</strong></p>
-        <EuiSpacer size="s" />
-        <p>RGB {lightColors[color].r}, {lightColors[color].g}, {lightColors[color].b}</p>
-        <EuiSpacer size="xs" />
-        <p>HEX {rgbToHex(lightColors[color].rgba).toUpperCase()}</p>
-      </div>
-    </EuiFlexItem>
-  );
-}
-
 export default() => (
   <GuidePage title="Color guidelines">
     <EuiText>
@@ -76,7 +61,16 @@ export default() => (
 
     <EuiFlexGrid columns={3}>
       {allowedColors.map(function(color, index) {
-        return renderPaletteColor(color);
+        <EuiFlexItem key={index}>
+          <div style={{ background: lightColors[color].rgba, height: 32 }} />
+          <div style={{ padding: '16px 16px 32px 16px' }}>
+            <p><strong>{color}</strong></p>
+            <EuiSpacer size="s" />
+            <p>RGB {lightColors[color].r}, {lightColors[color].g}, {lightColors[color].b}</p>
+            <EuiSpacer size="xs" />
+            <p>HEX {rgbToHex(lightColors[color].rgba).toUpperCase()}</p>
+          </div>
+        </EuiFlexItem>
       })}
     </EuiFlexGrid>
 
@@ -115,7 +109,7 @@ export default() => (
     <div>
       {allowedColors.map(function(color, index) {
          return (
-           <Fragment>
+           <Fragment key={index}>
              <EuiFlexGroup gutterSize="none">
               {allowedColors.map(function(color2, index) {
                 const contrast = (
@@ -133,14 +127,14 @@ export default() => (
                       <EuiBadge color="#000">AAA</EuiBadge>
                     </div>
                   );
-                } else if (contrast > 4.5) {
+                } else if (contrast > 4.4) {
                   contrastRating = (
                     <div>
                       <EuiSpacer size="xs" />
                       <EuiBadge color="#333">AA</EuiBadge>
                     </div>
                   );
-                } else if (contrast > 3) {
+                } else if (contrast >= 2.9) {
                   contrastRating = (
                     <div>
                       <EuiSpacer size="xs" />

diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiBadge is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiBadge euiBadge--default testClass1 testClass2"
   data-test-subj="test subject string"
@@ -13,11 +13,11 @@ exports[`EuiBadge is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color accent is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--accent"
 >
   <span
@@ -27,11 +27,11 @@ exports[`EuiBadge props color accent is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color danger is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--danger"
 >
   <span
@@ -41,11 +41,11 @@ exports[`EuiBadge props color danger is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color default is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--default"
 >
   <span
@@ -55,11 +55,11 @@ exports[`EuiBadge props color default is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color primary is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--primary"
 >
   <span
@@ -69,11 +69,11 @@ exports[`EuiBadge props color primary is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color secondary is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--secondary"
 >
   <span
@@ -83,11 +83,11 @@ exports[`EuiBadge props color secondary is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props color warning is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--warning"
 >
   <span
@@ -97,11 +97,11 @@ exports[`EuiBadge props color warning is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props iconSide left is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--default"
 >
   <span
@@ -129,11 +129,11 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props iconSide right is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--iconRight euiBadge--default"
 >
   <span
@@ -161,11 +161,11 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
 
 exports[`EuiBadge props iconType is rendered 1`] = `
-<div
+<span
   class="euiBadge euiBadge--default"
 >
   <span
@@ -193,5 +193,5 @@ exports[`EuiBadge props iconType is rendered 1`] = `
       Content
     </span>
   </span>
-</div>
+</span>
 `;
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
@@ -98,7 +98,7 @@ export const EuiBadge = ({
     );
   } else {
     return (
-      <div
+      <span
         className={classes}
         style={optionalCustomStyles}
         {...rest}
@@ -109,7 +109,7 @@ export const EuiBadge = ({
             {children}
           </span>
         </span>
-      </div>
+      </span>
     );
   }
 };

diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
@@ -29,15 +29,15 @@
 // Core
 
 $euiColorPrimary: #0079a5 !default;
-$euiColorSecondary: #018277 !default;
+$euiColorSecondary: #017F75 !default;
 $euiColorAccent: #DD0A73 !default;
 $euiColorHighlight: #FFFBF1 !default;
 $euiColorGhost: #FFF !default;
 
 // Status
 $euiColorSuccess: $euiColorSecondary !default;
 $euiColorDanger: #A30000 !default;
-$euiColorWarning: darken(#D95221, 3%) !default;
+$euiColorWarning: #C34A1E !default;
 
 // Grays
 $euiColorEmptyShade: #FFF !default;