Merge pull request #133 from rebeccaalpert/filedetails-updates

fix(FileDetails/FileDetailsLabel): Update styles to use Kayla's tokens
patternfly · Sep 13, 2024 · 874cae2 · 874cae2
2 parents 445dc30 + 050d07a
commit 874cae2
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/packages/module/src/FileDetails/FileDetails.scss b/packages/module/src/FileDetails/FileDetails.scss
@@ -6,8 +6,7 @@
 }
 
 .pf-chatbot__code-icon {
- background-color: #37a3a3;
- border-radius: var(--pf-t--global--border--radius--tiny);
+ color: var(--pf-t--global--icon--color--status--custom--default);
  width: 24px;
  height: 24px;
 }
@@ -16,8 +15,9 @@
  font-size: var(--pf-t--global--font--size--body--default);
 }
 
+// This is used in demos only
 .pf-chatbot__file-details-example {
- background: gray;
+ background: var(--pf-t--global--background--color--secondary--default);
  height: 100px;
  display: flex;
  justify-content: center;

diff --git a/packages/module/src/FileDetails/FileDetails.tsx b/packages/module/src/FileDetails/FileDetails.tsx
@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
-import { CodeIcon } from '@patternfly/react-icons';
+import { Flex, Stack, StackItem } from '@patternfly/react-core';
 import path from 'path';
 interface FileDetailsProps {
  /** Name of file, including extension */
@@ -928,16 +927,30 @@ export const extensionToLanguage = {
 export const FileDetails = ({ fileName }: PropsWithChildren<FileDetailsProps>) => {
  const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
  return (
- <Flex>
+ <Flex gap={{ default: 'gapSm' }}>
  <Flex
  className="pf-chatbot__code-icon"
  justifyContent={{ default: 'justifyContentCenter' }}
  alignItems={{ default: 'alignItemsCenter' }}
  alignSelf={{ default: 'alignSelfCenter' }}
  >
- <Icon>
- <CodeIcon color="white" />
- </Icon>
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+ fill="currentColor"
+ />
+ <g clipPath="url(#clip0_3280_27505)">
+ <path
+ d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+ fill="white"
+ />
+ </g>
+ <defs>
+ <clipPath>
+ <rect width="16" height="12.8" fill="white" transform="translate(4 5.60001)" />
+ </clipPath>
+ </defs>
+ </svg>
  </Flex>
  <Stack>
  <StackItem>

diff --git a/packages/module/src/FileDetailsLabel/FileDetailsLabel.scss b/packages/module/src/FileDetailsLabel/FileDetailsLabel.scss
@@ -1,27 +1,39 @@
 .pf-chatbot__file-label {
  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
  var(--pf-t--global--spacer--md);
- gap: 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 {
- --pf-v6-c-label--BackgroundColor: rgba(255, 255, 255, 1);
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--regular);
 
  .pf-chatbot__file-label > .pf-v6-c-label__content {
- --pf-v6-c-label--Color: rgba(255, 255, 255, 1);
+ --pf-v6-c-label--Color: var(--pf-t--global--background--color--primary--default);
  }
 }
 
 .pf-v6-theme-dark {
  .pf-v6-c-label.pf-chatbot__file-label {
- --pf-v6-c-label--BackgroundColor: rgba(41, 41, 41, 1);
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: rgba(41, 41, 41, 1);
- --pf-v6-c-label--Color: rgba(255, 255, 255, 1);
- --pf-v6-c-label--m-clickable--hover--Color: rgba(255, 255, 255, 1);
+ --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 {
- --pf-v6-c-button__icon--Color: rgba(199, 199, 199, 1);
+ --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+ }
+}
+
+.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-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
@@ -24,7 +24,7 @@ export const FileDetailsLabel = ({
  <Flex
  justifyContent={{ default: 'justifyContentCenter' }}
  alignItems={{ default: 'alignItemsCenter' }}
- gap={{ default: 'gapLg' }}
+ gap={{ default: 'gapMd' }}
  >
  <FlexItem>
  <FileDetails fileName={fileName} />