Euilink supports text color (#1571)

elastic · Feb 15, 2019 · bb9a1ec · bb9a1ec
1 parent 895a07c
commit bb9a1ec
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `text` as a color option for `EuiLink` ([#1571](https://github.com/elastic/eui/pull/1571))
 - Added `EuiResizeObserver` to expose ResizeObserver API to React components; falls back to MutationObserver API in unsupported browsers ([#1559](https://github.com/elastic/eui/pull/1559))
 
 **Bug fixes**

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
@@ -67,6 +67,11 @@ export default () => (
           warning
         </EuiLink>
       </li>
+      <li>
+        <EuiLink color="text" href="#">
+          text
+        </EuiLink>
+      </li>
       <li>
         <span style={{ background: 'black' }}>
           <EuiLink color="ghost" href="#">

diff --git a/src/components/link/__snapshots__/link.test.js.snap b/src/components/link/__snapshots__/link.test.js.snap
@@ -106,6 +106,13 @@ exports[`EuiLink supports target 1`] = `
 />
 `;
 
+exports[`EuiLink text is rendered 1`] = `
+<button
+  class="euiLink euiLink--text"
+  type="button"
+/>
+`;
+
 exports[`EuiLink warning is rendered 1`] = `
 <button
   class="euiLink euiLink--warning"

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -9,7 +9,8 @@ $textColors: (
   accent: $euiColorAccent,
   warning: $euiColorWarning,
   danger: $euiColorDanger,
-  ghost: #FFF, // Ghost is special and a constant.
+  text: $euiTextColor,
+  ghost: $euiColorGhost,
 );
 
 // Create color modifiers based on the map

diff --git a/src/components/link/index.d.ts b/src/components/link/index.d.ts
@@ -22,6 +22,7 @@ declare module '@elastic/eui' {
     | 'accent'
     | 'danger'
     | 'warning'
+    | 'text'
     | 'ghost';
 
   export interface LinkButtonProps {

diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -12,6 +12,7 @@ const colorsToClassNameMap = {
   'danger': 'euiLink--danger',
   'warning': 'euiLink--warning',
   'ghost': 'euiLink--ghost',
+  'text': 'euiLink--text',
 };
 
 export const COLORS = Object.keys(colorsToClassNameMap);