From 48e4b750bfb9ba81eb4e29bc4c455a11a6c34baa Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 14 Jul 2022 18:45:56 +0100
Subject: [PATCH] [EuiText] Add `kbd` styles (#6049)

* [EuiText] Adding `kbd` styles

* Adding CL

* Better comments and styles

* [PR feedback] Minor cleanup

- Remove extra newlines
- Remove extra semicolons (already added by logicalCSS() util)
- Refactor 1px border width to `thin` var
- Refactor conditional kdb logic to `euiScaleText` vs a new util

Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
---
 src-docs/src/views/text/text.js               |  8 +++++
 .../__snapshots__/text.styles.test.ts.snap    | 19 +++++++++++
 src/components/text/text.styles.ts            | 33 +++++++++++++++++++
 upcoming_changelogs/6049.md                   |  1 +
 4 files changed, 61 insertions(+)
 create mode 100644 upcoming_changelogs/6049.md

diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js
index 39af6f6afe3..e0f120b32e0 100644
--- a/src-docs/src/views/text/text.js
+++ b/src-docs/src/views/text/text.js
@@ -118,6 +118,14 @@ export default () => (
         <dt>Release date</dt>
         <dd>2002</dd>
       </dl>
+
+      <p>
+        Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
+      </p>
+
+      <p>
+        Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).
+      </p>
     </EuiText>
   </div>
 );
diff --git a/src/components/text/__snapshots__/text.styles.test.ts.snap b/src/components/text/__snapshots__/text.styles.test.ts.snap
index aaae78afb90..597942fd593 100644
--- a/src/components/text/__snapshots__/text.styles.test.ts.snap
+++ b/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -124,6 +124,22 @@ exports[`euiTextStyles sizes m 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+    
+    kbd {
+      padding-block-end: 4px;
+      // ensures when only one character the shape looks like a square
+      min-inline-size: 24px;
+      text-align: center;
+    }
+    
+    kbd::after {
+      content: '';
+      border-bottom: 1px solid #343741;
+      position: absolute;
+      bottom: 2px;
+      left: 0;
+      width: 100%;
+    }
   ;;label:m;"
 `;
 
@@ -251,6 +267,7 @@ exports[`euiTextStyles sizes relative 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+    
   ;;label:relative;"
 `;
 
@@ -378,6 +395,7 @@ exports[`euiTextStyles sizes s 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+    
   ;;label:s;"
 `;
 
@@ -505,5 +523,6 @@ exports[`euiTextStyles sizes xs 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+    
   ;;label:xs;"
 `;
diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
index c355b0d3c05..1fa9fafe0cc 100644
--- a/src/components/text/text.styles.ts
+++ b/src/components/text/text.styles.ts
@@ -182,6 +182,29 @@ const euiScaleText = (
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+    ${
+      // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
+      _customScale === 'm'
+        ? `
+    kbd {
+      ${logicalCSS('padding-bottom', euiTheme.size.xs)}
+      // ensures when only one character the shape looks like a square
+      ${logicalCSS('min-width', euiTheme.size.l)}
+      text-align: center;
+    }
+    
+    kbd::after {
+      content: '';
+      border-bottom: ${euiTheme.border.width.thin} solid ${
+            euiTheme.colors.text
+          };
+      position: absolute;
+      bottom: ${euiTheme.size.xxs};
+      left: 0;
+      width: 100%;
+    }`
+        : ''
+    }
   `;
 };
 
@@ -303,6 +326,16 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
       > :last-child {
         margin-bottom: 0 !important;
       }
+
+      kbd {
+        position: relative;
+        display: inline-block;
+        ${logicalCSS('padding-vertical', euiTheme.size.xxs)}
+        ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+        line-height: 1;
+        border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.text};
+        border-radius: calc(${euiTheme.border.radius.small} / 2);
+      }
     `,
     constrainedWidth: css`
       max-width: ${euiTextConstrainedMaxWidth};
diff --git a/upcoming_changelogs/6049.md b/upcoming_changelogs/6049.md
new file mode 100644
index 00000000000..31bf72d3cc8
--- /dev/null
+++ b/upcoming_changelogs/6049.md
@@ -0,0 +1 @@
+- Added styles for `kbd`'s within `EuiText`