feat: Support labelTag for inline Token

pages/token/inline-long-popover.page.tsx

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Icon from '~components/icon';
+import Popover from '~components/popover';
+import Token from '~components/token';
+
+import { SimplePage } from '../app/templates';
+
+const dot = (
+  <Icon
+    svg={
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
+        <circle cx="8" cy="8" r="4" fill="#d13212" className="no-stroke" />
+      </svg>
+    }
+  />
+);
+
+const longLabel = 'popover trigger will be very very long and keep going until it has to truncate';
+
+export default function InlineLongPopoverPage() {
+  return (
+    <SimplePage title="Inline token with long popover trigger and label tag">
+      <div style={{ maxInlineSize: 300 }}>
+        <Token
+          variant="inline"
+          icon={dot}
+          label={
+            <Popover triggerType="text-inline" header={longLabel} content="Popover content" wrapTriggerText={false}>
+              {longLabel}
+            </Popover>
+          }
+          ariaLabel={longLabel}
+          labelTag="label tag here"
+          onDismiss={() => {}}
+          dismissLabel="Remove token"
+        />
+      </div>
+    </SimplePage>
+  );
+}

pages/token/permutations.page.tsx

@@ -15,13 +15,15 @@ const permutations = createPermutations<TokenProps>([
   {
     label: ['token'],
     icon: [undefined, <Icon key="icon" name="settings" size="small" />],
+    labelTag: [undefined, 'label-tag'],
     onDismiss: [undefined, () => {}],
     readOnly: [false, true],
     variant: ['inline'],
   },
   {
     label: ['token'],
     icon: [undefined, <Icon key="icon" name="settings" size="small" />],
+    labelTag: [undefined, 'label-tag'],
     onDismiss: [undefined, () => {}],
     disabled: [true],
     variant: ['inline'],

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

@@ -33907,7 +33907,7 @@ Only applies to plain text labels.",
     {
       "description": "Specifies the token's visual style and functionality.
 
-For \`inline\` only label, icon and dismiss button are displayed.
+When set to \`inline\`, only label, label tag, icon and dismiss button are displayed. Description and tags are not.
 
 Defaults to \`normal\` if not specified.",
       "inlineType": {

src/internal/components/option/index.tsx

@@ -93,7 +93,7 @@ const Option = ({
     >
       {icon}
       <SpanOrDivTag className={styles.content}>
-        <SpanOrDivTag className={styles['label-content']}>
+        <SpanOrDivTag className={clsx(styles['label-content'], triggerVariant && styles['trigger-variant'])}>
           {option.labelContent ? (
             <SpanOrDivTag className={clsx(styles.label, analyticsSelectors.label)}>{option.labelContent}</SpanOrDivTag>
           ) : (

src/internal/components/option/styles.scss

@@ -69,6 +69,23 @@
   }
 }
 
+// Inline tokens stay on one line: the label truncates and the label tag keeps its size.
+.label-content.trigger-variant {
+  flex-wrap: nowrap;
+
+  > .label {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+  }
+
+  > .label-tag {
+    flex: 0 0 auto;
+    overflow: visible;
+    text-overflow: clip;
+    white-space: nowrap;
+  }
+}
+
 .tags,
 .description {
   @include styles.font-body-s;

src/token/__tests__/token.test.tsx

@@ -162,6 +162,18 @@ describe('Token', () => {
     });
   });
 
+  describe('Label tag', () => {
+    test('renders label tag for normal variant', () => {
+      const wrapper = renderToken({ label: 'Test token', labelTag: '17%' });
+      expect(wrapper.findLabelTag()!.getElement()).toHaveTextContent('17%');
+    });
+
+    test('renders label tag for inline variant', () => {
+      const wrapper = renderToken({ label: 'Test token', variant: 'inline', labelTag: '17%' });
+      expect(wrapper.findLabelTag()!.getElement()).toHaveTextContent('17%');
+    });
+  });
+
   describe('One theme', () => {
     beforeEach(() => {
       document.body.classList.add('awsui-one-theme');

src/token/interfaces.ts

@@ -39,7 +39,7 @@ export interface TokenProps extends BaseComponentProps {
   /**
    * Specifies the token's visual style and functionality.
    *
-   * For `inline` only label, icon and dismiss button are displayed.
+   * When set to `inline`, only label, label tag, icon and dismiss button are displayed. Description and tags are not.
    *
    * Defaults to `normal` if not specified.
    */

src/token/internal.tsx

@@ -124,6 +124,7 @@ function InternalToken({
       return {
         ...labelObject,
         disabled,
+        labelTag,
         __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{sizedIcon(icon)}</span>,
       };
     } else {