[EuiText] Add kbd styles

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>
 );

src/components/text/__snapshots__/text.styles.test.ts.snap

@@ -124,6 +124,26 @@ exports[`euiTextStyles sizes m 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+
+
+
+
+    // when the size is 'm' the 'kbd' element gets a line between the text and the border-bottom
+    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 +271,9 @@ exports[`euiTextStyles sizes relative 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+
+
+
   ;;label:relative;"
 `;
 
@@ -378,6 +401,9 @@ exports[`euiTextStyles sizes s 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+
+
+
   ;;label:s;"
 `;
 
@@ -505,5 +531,8 @@ exports[`euiTextStyles sizes xs 1`] = `
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+
+
+
   ;;label:xs;"
 `;

src/components/text/text.styles.ts

@@ -182,6 +182,40 @@ const euiScaleText = (
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; // 90% of parent font size
     }
+
+
+
+  `;
+};
+
+// Internal utility for getting EuiText ornaments based on options
+const euiGetTextOrnaments = (
+  euiThemeContext: UseEuiTheme,
+  options: _FontScaleOptions
+) => {
+  const { euiTheme } = euiThemeContext;
+  const { customScale } = options;
+
+  return `
+    // when the size 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: 1px solid ${euiTheme.colors.text};
+        position: absolute;
+        bottom: ${euiTheme.size.xxs};
+        left: 0;
+        width: 100%;
+      }`
+    }
   `;
 };
 
@@ -303,6 +337,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: 1px solid ${euiTheme.colors.text};
+        border-radius: calc(${euiTheme.border.radius.small} / 2);
+      }
     `,
     constrainedWidth: css`
       max-width: ${euiTextConstrainedMaxWidth};
@@ -313,6 +357,10 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
         measurement: 'rem',
         customScale: 'm',
       })}
+
+      ${euiGetTextOrnaments(euiThemeContext, {
+        customScale: 'm',
+      })}
     `,
     s: css`
       ${euiScaleText(euiThemeContext, {

upcoming_changelogs/6049.md

@@ -0,0 +1 @@
+- Added styles for `kbd`'s within `EuiText`