[EuiText] Add kbd styles (elastic#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 <[email protected]>
yuliacech · Jul 14, 2022 · 48e4b75 · 48e4b75
1 parent e5aa956
commit 48e4b75
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+- Added styles for `kbd`'s within `EuiText`