fix(FileDetailsLabel): Kayla wants to change the background

Kayla and Lucia met and decided on a different approach to FileDetailsLabel - updating that here.
patternfly · Sep 19, 2024 · cb70c5e · cb70c5e
1 parent 560d86b
commit cb70c5e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/packages/module/src/FileDetailsLabel/FileDetailsLabel.scss b/packages/module/src/FileDetailsLabel/FileDetailsLabel.scss
@@ -3,7 +3,6 @@
     var(--pf-t--global--spacer--md);
   gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  border: var(--pf-t--global--border--width--strong) solid transparent;
 }
 
 .pf-v6-c-label.pf-chatbot__file-label {
@@ -19,7 +18,6 @@
 .pf-v6-theme-dark {
   .pf-v6-c-label.pf-chatbot__file-label {
     --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
-    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
   }
 
   .pf-chatbot__file-label > .pf-v6-c-label__actions > .pf-v6-c-button.pf-m-plain > .pf-v6-c-button__icon {
@@ -29,9 +27,8 @@
 
 .pf-chatbot__file-label.pf-m-clickable:hover,
 .pf-chatbot__file-label.pf-m-clickable:focus-within {
-  border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--on-secondary);
-  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
 
   .pf-chatbot__code-icon {
     color: var(--pf-t--global--icon--color--status--custom--hover);

diff --git a/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx b/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx
@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from 'react';
-import { Flex, FlexItem, Label } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 
 interface FileDetailsLabelProps {
   /** Name of file, including extension */
@@ -12,15 +13,32 @@ interface FileDetailsLabelProps {
   onClick?: (event: React.MouseEvent) => void;
   /** Callback function for when close button is clicked */
   onClose?: (event: React.MouseEvent) => void;
+  /** Aria label for close button */
+  closeButtonAriaLabel?: string;
 }
 
 export const FileDetailsLabel = ({
   fileName,
   isLoading,
   onClick = undefined,
-  onClose = undefined
+  onClose = undefined,
+  closeButtonAriaLabel
 }: PropsWithChildren<FileDetailsLabelProps>) => (
-  <Label className="pf-chatbot__file-label" onClose={onClose} onClick={onClick} textMaxWidth="370px">
+  <Label
+    className="pf-chatbot__file-label"
+    onClose={onClose}
+    closeBtn={
+      <Button
+        type="button"
+        variant="plain"
+        onClick={onClose}
+        aria-label={closeButtonAriaLabel ?? `Close ${fileName}`}
+        icon={<TimesIcon />}
+      />
+    }
+    onClick={onClick}
+    textMaxWidth="370px"
+  >
     <Flex
       justifyContent={{ default: 'justifyContentCenter' }}
       alignItems={{ default: 'alignItemsCenter' }}