feat: Separates file token from token

cloudscape-design · Nov 7, 2024 · 92a8510 · 92a8510
1 parent 8d2194d
commit 92a8510
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 137 deletions.
diff --git a/src/internal/components/file-token-group/file-token.tsx b/src/internal/components/file-token-group/file-token.tsx
@@ -5,11 +5,13 @@ import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import InternalBox from '../../../box/internal.js';
+import { FormFieldError, FormFieldWarning } from '../../../form-field/internal';
 import InternalSpaceBetween from '../../../space-between/internal.js';
 import InternalSpinner from '../../../spinner/internal.js';
+import DismissButton from '../../../token-group/dismiss-button';
 import { TokenGroupProps } from '../../../token-group/interfaces.js';
-import { Token } from '../../../token-group/token.js';
 import { BaseComponentProps } from '../../base-component/index.js';
+import { useUniqueId } from '../../hooks/use-unique-id';
 import Tooltip from '../tooltip/index';
 import * as defaultFormatters from './default-formatters.js';
 import { FileOptionThumbnail } from './thumbnail.js';
@@ -36,6 +38,7 @@ export interface FileTokenProps extends BaseComponentProps {
   errorText?: React.ReactNode;
   warningText?: React.ReactNode;
   loading?: boolean;
+  readOnly?: boolean;
   i18nStrings: FileTokenProps.I18nStrings;
   dismissLabel?: string;
   alignment?: TokenGroupProps.Alignment;
@@ -53,6 +56,7 @@ function InternalFileToken({
   onDismiss,
   errorText,
   warningText,
+  readOnly,
   loading,
   alignment,
   groupContainsImage,
@@ -62,6 +66,10 @@ function InternalFileToken({
   const formatFileSize = i18nStrings.formatFileSize ?? defaultFormatters.formatFileSize;
   const formatFileLastModified = i18nStrings.formatFileLastModified ?? defaultFormatters.formatFileLastModified;
 
+  const errorId = useUniqueId('error');
+  const warningId = useUniqueId('warning');
+
+  const showWarning = warningText && !errorText;
   const containerRef = useRef<HTMLDivElement>(null);
   const fileNameRef = useRef<HTMLSpanElement>(null);
   const fileNameContainerRef = useRef<HTMLDivElement>(null);
@@ -81,20 +89,24 @@ function InternalFileToken({
     !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
 
   return (
-    <div ref={containerRef} className={clsx(styles['file-token'])}>
-      <Token
-        type="file"
-        ariaLabel={file.name}
-        dismissLabel={i18nStrings.removeFileAriaLabel(index)}
-        onDismiss={onDismiss}
-        errorText={errorText}
-        warningText={warningText}
-        errorIconAriaLabel={i18nStrings.errorIconAriaLabel}
-        warningIconAriaLabel={i18nStrings.warningIconAriaLabel}
-        loading={loading}
-        alignment={alignment}
-        groupContainsImage={groupContainsImage && showFileThumbnail && alignment === 'horizontal'}
-        data-index={index}
+    <div
+      ref={containerRef}
+      className={clsx(styles.token, styles['token-grid'], {
+        [styles['token-contains-image']]: groupContainsImage,
+      })}
+      role="group"
+      aria-label={file.name}
+      aria-describedby={errorText ? errorId : warningText ? warningId : undefined}
+      data-index={index}
+    >
+      <div
+        className={clsx(styles['token-box'], {
+          [styles.loading]: loading,
+          [styles.error]: errorText,
+          [styles.warning]: showWarning,
+          [styles.horizontal]: alignment === 'horizontal',
+          [styles['read-only']]: readOnly,
+        })}
       >
         {loading && (
           <div
@@ -152,7 +164,20 @@ function InternalFileToken({
             </InternalSpaceBetween>
           </div>
         </InternalBox>
-      </Token>
+        {onDismiss && !readOnly && (
+          <DismissButton dismissLabel={i18nStrings.removeFileAriaLabel(index)} onDismiss={onDismiss} />
+        )}
+      </div>
+      {errorText && (
+        <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings.errorIconAriaLabel}>
+          {errorText}
+        </FormFieldError>
+      )}
+      {showWarning && (
+        <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings.warningIconAriaLabel}>
+          {warningText}
+        </FormFieldWarning>
+      )}
       {alignment === 'horizontal' && showTooltip && isEllipsisActive() && (
         <Tooltip
           trackRef={containerRef}

diff --git a/src/internal/components/file-token-group/index.tsx b/src/internal/components/file-token-group/index.tsx
@@ -29,6 +29,7 @@ function InternalFileTokenGroup({
   i18nStrings,
   onDismiss,
   limit,
+  readOnly,
   alignment = 'vertical',
   __internalRootRef,
   ...restProps
@@ -70,6 +71,7 @@ function InternalFileTokenGroup({
             warningText={file.warningText}
             i18nStrings={i18nStrings}
             loading={file.loading}
+            readOnly={readOnly}
             alignment={alignment}
             groupContainsImage={groupContainsImage}
             isImage={isImage(file.file)}

diff --git a/src/internal/components/file-token-group/styles.scss b/src/internal/components/file-token-group/styles.scss
@@ -5,17 +5,30 @@
 
 @use '../../styles/tokens' as awsui;
 @use '../../styles' as styles;
+@use '../../../token-group/mixins.scss' as mixins;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $image-size: 48px;
 $spinner-size: 16px;
+$file-token-height: 68px;
+$compact-token-width: 230px;
 
-.root {
-  @include styles.styles-reset();
+$token-background: awsui.$color-background-item-selected;
+$token-border-color: awsui.$color-border-item-selected;
+
+@mixin token-box-validation {
+  border-inline-start-width: awsui.$border-invalid-width;
+
+  > .dismiss-button {
+    color: awsui.$color-text-interactive-default;
+    &:hover {
+      color: awsui.$color-text-interactive-hover;
+    }
+  }
 }
 
-.file-token {
-  block-size: 100%;
-  position: relative;
+.root {
+  @include styles.styles-reset();
 }
 
 .file-loading-overlay {
@@ -77,3 +90,63 @@ $spinner-size: 16px;
     inline-size: calc(100% - $spinner-size);
   }
 }
+
+.token {
+  position: relative;
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: awsui.$space-xxs;
+
+  &-grid {
+    display: grid;
+    grid-template-rows: max-content auto;
+  }
+
+  &-contains-image {
+    grid-template-rows: $file-token-height auto;
+  }
+}
+
+.token-box {
+  @include mixins.token-box-styles();
+
+  &.horizontal {
+    max-inline-size: $compact-token-width;
+
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      max-inline-size: 100%;
+    }
+  }
+
+  &.error {
+    border-color: awsui.$color-border-status-error;
+    @include token-box-validation;
+  }
+
+  &.warning {
+    border-color: awsui.$color-border-status-warning;
+    @include token-box-validation;
+  }
+
+  &.read-only {
+    border-color: awsui.$color-border-input-disabled;
+    background-color: awsui.$color-background-container-content;
+    pointer-events: none;
+
+    > .dismiss-button {
+      color: awsui.$color-text-button-inline-icon-disabled;
+
+      &:hover {
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        cursor: initial;
+        color: awsui.$color-text-button-inline-icon-disabled;
+      }
+    }
+  }
+
+  &.loading {
+    border-color: awsui.$color-border-control-disabled;
+    background-color: awsui.$color-background-container-content;
+  }
+}
diff --git a/src/internal/components/token-list/styles.scss b/src/internal/components/token-list/styles.scss
@@ -46,7 +46,7 @@
   &.grid {
     display: grid;
     gap: awsui.$space-xs;
-    grid-template-columns: repeat(auto-fill, constants.$compact-token-width);
+    grid-template-columns: repeat(auto-fill, 230px);
 
     @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
       display: flex;

diff --git a/src/test-utils/dom/file-upload/index.ts b/src/test-utils/dom/file-upload/index.ts
@@ -8,8 +8,8 @@ import { FileTokenWrapper } from '../internal/file-token-group';
 import fileUploadSelectors from '../../../file-upload/styles.selectors.js';
 import formFieldStyles from '../../../form-field/styles.selectors.js';
 import fileUploadInputSelectors from '../../../internal/components/file-input/styles.selectors.js';
+import tokenGroupSelectors from '../../../internal/components/file-token-group/styles.selectors.js';
 import tokenListSelectors from '../../../internal/components/token-list/styles.selectors.js';
-import tokenGroupSelectors from '../../../token-group/styles.selectors.js';
 
 export default class FileUploadWrapper extends ComponentWrapper<HTMLElement> {
   static rootSelector: string = fileUploadSelectors.root;

diff --git a/src/test-utils/dom/internal/file-token-group.ts b/src/test-utils/dom/internal/file-token-group.ts
@@ -11,7 +11,7 @@ export default class FileTokenGroupWrapper extends ComponentWrapper {
   static rootSelector: string = testSelectors.root;
 
   findFileTokens(): Array<FileTokenWrapper> {
-    return this.findAllByClassName(tokenGroupSelectors.token).map(
+    return this.findAllByClassName(selectors.token).map(
       tokenElement => new FileTokenWrapper(tokenElement.getElement())
     );
   }
@@ -22,12 +22,12 @@ export default class FileTokenGroupWrapper extends ComponentWrapper {
    * @param tokenIndex 1-based index of the file token to return.
    */
   findFileToken(fileTokenIndex: number): null | FileTokenWrapper {
-    return this.findComponent(`.${tokenGroupSelectors.token}[data-index="${fileTokenIndex - 1}"]`, FileTokenWrapper);
+    return this.findComponent(`.${selectors.token}[data-index="${fileTokenIndex - 1}"]`, FileTokenWrapper);
   }
 }
 
 export class FileTokenWrapper extends ComponentWrapper {
-  static rootSelector: string = selectors['file-token'];
+  static rootSelector: string = selectors.token;
 
   findFileName(): ElementWrapper {
     return this.findByClassName(selectors['file-option-name'])!;

diff --git a/src/token-group/constants.scss b/src/token-group/constants.scss
@@ -8,6 +8,3 @@
 
 $token-background: awsui.$color-background-item-selected;
 $token-border-color: awsui.$color-border-item-selected;
-
-$file-token-height: 68px;
-$compact-token-width: 230px;
diff --git a/src/token-group/mixins.scss b/src/token-group/mixins.scss
@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use './constants' as constants;
+
+@mixin token-box-styles {
+  position: relative;
+  block-size: 100%;
+  border-block: awsui.$border-field-width solid constants.$token-border-color;
+  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  padding-block-start: styles.$control-padding-vertical;
+  padding-block-end: styles.$control-padding-vertical;
+  padding-inline-start: styles.$control-padding-horizontal;
+  padding-inline-end: awsui.$space-xxs;
+  display: flex;
+  align-items: flex-start;
+  background: constants.$token-background;
+  border-start-start-radius: awsui.$border-radius-token;
+  border-start-end-radius: awsui.$border-radius-token;
+  border-end-start-radius: awsui.$border-radius-token;
+  border-end-end-radius: awsui.$border-radius-token;
+  color: awsui.$color-text-body-default;
+  box-sizing: border-box;
+}
diff --git a/src/token-group/styles.scss b/src/token-group/styles.scss
@@ -7,6 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
+@use './mixins.scss' as mixins;
 
 .root {
   @include styles.styles-reset;
@@ -48,62 +49,12 @@
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xxs;
-
-  &-grid {
-    display: grid;
-    grid-template-rows: max-content auto;
-  }
-
-  &-contains-image {
-    grid-template-rows: constants.$file-token-height auto;
-  }
 }
 
 .token-box {
-  position: relative;
-  block-size: 100%;
-  border-block: awsui.$border-field-width solid constants.$token-border-color;
-  border-inline: awsui.$border-field-width solid constants.$token-border-color;
-  padding-block-start: styles.$control-padding-vertical;
-  padding-block-end: styles.$control-padding-vertical;
-  padding-inline-start: styles.$control-padding-horizontal;
-  padding-inline-end: awsui.$space-xxs;
-  display: flex;
-  align-items: flex-start;
-  background: constants.$token-background;
-  border-start-start-radius: awsui.$border-radius-token;
-  border-start-end-radius: awsui.$border-radius-token;
-  border-end-start-radius: awsui.$border-radius-token;
-  border-end-end-radius: awsui.$border-radius-token;
-  color: awsui.$color-text-body-default;
-  box-sizing: border-box;
-
-  &.horizontal {
-    max-inline-size: constants.$compact-token-width;
-
-    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-      max-inline-size: 100%;
-    }
-  }
+  @include mixins.token-box-styles();
 }
-@mixin token-box-validation {
-  border-inline-start-width: awsui.$border-invalid-width;
 
-  > .dismiss-button {
-    color: awsui.$color-text-interactive-default;
-    &:hover {
-      color: awsui.$color-text-interactive-hover;
-    }
-  }
-}
-.token-box-error {
-  border-color: awsui.$color-border-status-error;
-  @include token-box-validation;
-}
-.token-box-warning {
-  border-color: awsui.$color-border-status-warning;
-  @include token-box-validation;
-}
 .token-box-readonly {
   border-color: awsui.$color-border-input-disabled;
   background-color: awsui.$color-background-container-content;
@@ -134,8 +85,3 @@
     }
   }
 }
-
-.token-box-loading {
-  border-color: awsui.$color-border-control-disabled;
-  background-color: awsui.$color-background-container-content;
-}