chore: Add new inline-code variant in Box

pages/box/inline-code-example.page.tsx

@@ -0,0 +1,193 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Alert from '~components/alert';
+import Box from '~components/box';
+import Flashbar from '~components/flashbar';
+import Header from '~components/header';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+import Table from '~components/table';
+import { TableProps } from '~components/table';
+
+interface TableItem {
+  name: string;
+  alt: string;
+  description: React.ReactNode;
+  type: string;
+  size: string;
+}
+
+export default function InlineCodeExample() {
+  return (
+    <>
+      <h1>Inline-code examples</h1>
+      <Box padding={{ left: 'xl', right: 'xl', top: 'xxl', bottom: 'xl' }}>
+        <SpaceBetween size="l">
+          <div>
+            <h2>Example usage in paragraph</h2>
+            <p>
+              When writing documentation, you can use inline code elements to highlight variables like{' '}
+              <Box variant="awsui-inline-code">const myVariable = 42;</Box> or function names like{' '}
+              <Box variant="awsui-inline-code">calculateTotal()</Box>. For example:{' '}
+              <Box variant="awsui-inline-code">export API_ENDPOINT=&quot;https://api.example.com&quot;</Box>
+            </p>
+          </div>
+
+          <div>
+            <Table<TableItem>
+              totalItemsCount={4}
+              renderAriaLive={({ firstIndex, lastIndex, totalItemsCount }: TableProps.LiveAnnouncement) =>
+                `Displaying items ${firstIndex} to ${lastIndex} of ${totalItemsCount}`
+              }
+              columnDefinitions={[
+                {
+                  id: 'variable',
+                  header: 'Variable name',
+                  cell: (item: TableItem) => <Link href="#">{item.name || '-'}</Link>,
+                  sortingField: 'name',
+                  isRowHeader: true,
+                },
+                {
+                  id: 'alt',
+                  header: 'Text value',
+                  cell: (item: TableItem) => item.alt || '-',
+                  sortingField: 'alt',
+                },
+                {
+                  id: 'description',
+                  header: 'Description',
+                  cell: (item: TableItem) => item.description || '-',
+                },
+              ]}
+              enableKeyboardNavigation={true}
+              items={[
+                {
+                  name: 'Item 1',
+                  alt: 'First',
+                  description: (
+                    <>
+                      This is the first <Box variant="awsui-inline-code">db.t2.large</Box> item
+                    </>
+                  ),
+                  type: '1A',
+                  size: 'Small',
+                },
+                {
+                  name: 'Item 2',
+                  alt: 'Second',
+                  description: (
+                    <>
+                      This is the second <Box variant="awsui-inline-code">S3-aws-phoenix.example.com</Box> item
+                    </>
+                  ),
+                  type: '1B',
+                  size: 'Large',
+                },
+                {
+                  name: 'Item 3',
+                  alt: 'Third',
+                  description: '-',
+                  type: '1A',
+                  size: 'Large',
+                },
+                {
+                  name: 'Item 4',
+                  alt: 'Fourth',
+                  description: 'This is the fourth item',
+                  type: '2A',
+                  size: 'Small',
+                },
+              ]}
+              loadingText="Loading resources"
+              sortingDisabled={true}
+              header={<Header> In table </Header>}
+            />
+          </div>
+
+          <div>
+            <h2>In Alert component</h2>
+            <SpaceBetween size="xs">
+              <Alert type="info" header="Configuration required">
+                To configure your application, set the <Box variant="awsui-inline-code">API_ENDPOINT</Box> environment
+                variable to your API URL.
+              </Alert>
+
+              <Alert type="warning" header="Deprecated function">
+                The function <Box variant="awsui-inline-code">getUserData()</Box> is deprecated. Please use{' '}
+                <Box variant="awsui-inline-code">fetchUserProfile()</Box> instead.
+              </Alert>
+
+              <Alert type="error" header="Deprecated version">
+                The function <Box variant="awsui-inline-code">getUserData()</Box> is deprecated. Please use{' '}
+                <Box variant="awsui-inline-code">fetchUserProfile()</Box> instead.
+              </Alert>
+
+              <Alert type="success" header="Versionset is set">
+                The function <Box variant="awsui-inline-code">getUserData()</Box> is deprecated. Please use{' '}
+                <Box variant="awsui-inline-code">fetchUserProfile()</Box> instead.
+              </Alert>
+            </SpaceBetween>
+          </div>
+
+          <div>
+            <h2>In Flashbar component</h2>
+            <Flashbar
+              items={[
+                {
+                  type: 'success',
+                  header: 'Deployment successful',
+                  content: (
+                    <>
+                      Your application has been deployed successfully. The new version{' '}
+                      <Box variant="awsui-inline-code">v2.1.0</Box> is now live at{' '}
+                      <Box variant="awsui-inline-code">arn:service23G2::123:distribution/23E1</Box>.
+                    </>
+                  ),
+                  id: 'success-message',
+                },
+                {
+                  type: 'error',
+                  header: 'Build failed',
+                  content: (
+                    <>
+                      The build process failed with exit code 1. Check the{' '}
+                      <Box variant="awsui-inline-code">package.json</Box> file for missing dependencies or run{' '}
+                      <Box variant="awsui-inline-code">npm install</Box> to resolve issues.
+                    </>
+                  ),
+                  id: 'error-message',
+                },
+                {
+                  type: 'info',
+                  header: 'Build information',
+                  content: (
+                    <>
+                      The build process failed with exit code 1. Check the{' '}
+                      <Box variant="awsui-inline-code">package.json</Box> file for missing dependencies or run{' '}
+                      <Box variant="awsui-inline-code">npm install</Box> to resolve issues.
+                    </>
+                  ),
+                  id: 'info-message',
+                },
+                {
+                  type: 'warning',
+                  header: 'Build failed',
+                  content: (
+                    <>
+                      The build process failed with exit code 1. Check the{' '}
+                      <Box variant="awsui-inline-code">package.json</Box> file for missing dependencies or run{' '}
+                      <Box variant="awsui-inline-code">npm install</Box> to resolve issues.
+                    </>
+                  ),
+                  id: 'warning-message',
+                },
+              ]}
+            />
+          </div>
+        </SpaceBetween>
+      </Box>
+    </>
+  );
+}

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -86,6 +86,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-dropdown-item-hover": "#f2f3f3",
   "color-background-dropdown-item-selected": "#f1faff",
   "color-background-home-header": "#000000",
+  "color-background-inline-code": "rgba(0, 0, 0, 0.1)",
   "color-background-input-default": "#ffffff",
   "color-background-input-disabled": "#eaeded",
   "color-background-item-selected": "#f1faff",
@@ -765,6 +766,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-dropdown-item-hover": "#414750",
   "color-background-dropdown-item-selected": "#12293b",
   "color-background-home-header": "#000000",
+  "color-background-inline-code": "rgba(255, 255, 255, 0.1)",
   "color-background-input-default": "#1a2029",
   "color-background-input-disabled": "#414750",
   "color-background-item-selected": "#12293b",
@@ -1444,6 +1446,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-dropdown-item-hover": "#f2f3f3",
   "color-background-dropdown-item-selected": "#f1faff",
   "color-background-home-header": "#000000",
+  "color-background-inline-code": "rgba(0, 0, 0, 0.1)",
   "color-background-input-default": "#ffffff",
   "color-background-input-disabled": "#eaeded",
   "color-background-item-selected": "#f1faff",
@@ -2123,6 +2126,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-dropdown-item-hover": "#f2f3f3",
   "color-background-dropdown-item-selected": "#f1faff",
   "color-background-home-header": "#000000",
+  "color-background-inline-code": "rgba(0, 0, 0, 0.1)",
   "color-background-input-default": "#ffffff",
   "color-background-input-disabled": "#eaeded",
   "color-background-item-selected": "#f1faff",
@@ -2802,6 +2806,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-dropdown-item-hover": "#f3f3f7",
   "color-background-dropdown-item-selected": "#f0fbff",
   "color-background-home-header": "#0f141a",
+  "color-background-inline-code": "rgba(0, 0, 0, 0.1)",
   "color-background-input-default": "#ffffff",
   "color-background-input-disabled": "#ebebf0",
   "color-background-item-selected": "#f0fbff",
@@ -3481,6 +3486,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-dropdown-item-hover": "#f3f3f7",
   "color-background-dropdown-item-selected": "#f0fbff",
   "color-background-home-header": "#0f141a",
+  "color-background-inline-code": "rgba(0, 0, 0, 0.1)",
   "color-background-input-default": "#ffffff",
   "color-background-input-disabled": "#ebebf0",
   "color-background-item-selected": "#f0fbff",
@@ -4160,6 +4166,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-dropdown-item-hover": "#131920",
   "color-background-dropdown-item-selected": "#001129",
   "color-background-home-header": "#0f141a",
+  "color-background-inline-code": "rgba(255, 255, 255, 0.1)",
   "color-background-input-default": "#0f141a",
   "color-background-input-disabled": "#1b232d",
   "color-background-item-selected": "#001129",
@@ -4839,6 +4846,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-dropdown-item-hover": "#131920",
   "color-background-dropdown-item-selected": "#001129",
   "color-background-home-header": "#0f141a",
+  "color-background-inline-code": "rgba(255, 255, 255, 0.1)",
   "color-background-input-default": "#161d26",
   "color-background-input-disabled": "#1b232d",
   "color-background-item-selected": "#001129",

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -4498,6 +4498,7 @@ Override the HTML tag by using property \`tagOverride\`.",
           "awsui-value-large",
           "awsui-key-label",
           "awsui-gen-ai-label",
+          "awsui-inline-code",
         ],
       },
       "name": "variant",

src/box/__tests__/box.test.tsx

@@ -59,6 +59,10 @@ describe('Box', () => {
       const boxWrapper = renderBox({ variant: 'awsui-value-large' });
       expect(boxWrapper.getElement().tagName).toBe('SPAN');
     });
+    test('uses code as tag name when set to awsui-inline-code', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-inline-code' });
+      expect(boxWrapper.getElement().tagName).toBe('CODE');
+    });
   });
   describe('tagOverride property', () => {
     const tagOverrides = [

src/box/interfaces.ts

@@ -151,7 +151,8 @@ export namespace BoxProps {
     | 'samp'
     | 'awsui-key-label'
     | 'awsui-gen-ai-label'
-    | 'awsui-value-large';
+    | 'awsui-value-large'
+    | 'awsui-inline-code';
 
   export type Display = 'block' | 'inline' | 'inline-block' | 'none';
   export type TextAlign = 'left' | 'center' | 'right';

src/box/internal.tsx

@@ -82,5 +82,9 @@ const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride'])
     return 'div';
   }
 
+  if (variant === 'awsui-inline-code') {
+    return 'code';
+  }
+
   return variant;
 };

src/box/text.scss

@@ -53,6 +53,17 @@
       font-weight: awsui.$font-box-value-large-weight;
       color: inherit;
     }
+    &.inline-code-variant {
+      @include base-styles.code-extra-defaults;
+      @include styles.font-body-s;
+      border-start-start-radius: awsui.$space-static-xxs;
+      border-start-end-radius: awsui.$space-static-xxs;
+      border-end-start-radius: awsui.$space-static-xxs;
+      border-end-end-radius: awsui.$space-static-xxs;
+      background-color: awsui.$color-background-inline-code;
+      padding-block: awsui.$space-static-xxxs;
+      padding-inline: awsui.$space-static-xxs;
+    }
     &.h1-variant.font-weight-default,
     &.h2-variant.font-weight-default,
     &.h3-variant.font-weight-default,

style-dictionary/utils/token-names.ts

@@ -456,6 +456,7 @@ export type ColorsTokenName =
   | 'colorBackgroundDropdownItemHover'
   | 'colorBackgroundDropdownItemSelected'
   | 'colorBackgroundHomeHeader'
+  | 'colorBackgroundInlineCode'
   | 'colorBackgroundInputDefault'
   | 'colorBackgroundInputDisabled'
   | 'colorBackgroundItemSelected'

style-dictionary/visual-refresh/colors.ts

@@ -51,6 +51,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundDropdownItemHover: { light: '{colorGrey200}', dark: '{colorGrey900}' },
   colorBackgroundDropdownItemSelected: '{colorBackgroundItemSelected}',
   colorBackgroundHomeHeader: '{colorGrey950}',
+  colorBackgroundInlineCode: { light: 'rgba(0, 0, 0, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' },
   colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorGrey850}' },
   colorBackgroundInputDisabled: { light: '{colorGrey250}', dark: '{colorGrey800}' },
   colorBackgroundItemSelected: { light: '{colorBlue50}', dark: '{colorBlue1000}' },

style-dictionary/visual-refresh/contexts/flashbar-warning.ts

@@ -39,6 +39,9 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = {
   // Tutorial hotspot
   colorTextTutorialHotspotDefault: '{colorGrey600}',
   colorTextTutorialHotspotHover: '{colorGrey900}',
+
+  // Inline-code variant background in Box
+  colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)',
 };
 
 const tokens: StyleDictionary.ColorsDictionary = {

style-dictionary/visual-refresh/contexts/flashbar.ts

@@ -24,6 +24,7 @@ export const baseTokens: StyleDictionary.ColorsDictionary = {
   colorBorderDividerDefault: '{colorGrey100}',
   colorTextTutorialHotspotDefault: '{colorGrey300}',
   colorTextTutorialHotspotHover: '{colorGrey100}',
+  colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)',
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(