address styling bugs and PR feedback

AllenInstitute · Nov 23, 2024 · 6e4de6a · 6e4de6a
1 parent 86841dd
commit 6e4de6a
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 16 deletions.
diff --git a/packages/core/components/ChoiceGroup/index.tsx b/packages/core/components/ChoiceGroup/index.tsx
@@ -1,6 +1,8 @@
 import { ChoiceGroup, IChoiceGroupOption } from "@fluentui/react";
 import * as React from "react";
 
+import Tooltip from "../Tooltip";
+
 import styles from "./ChoiceGroup.module.css";
 
 interface Props {
@@ -22,7 +24,21 @@ export default function BaseChoiceGroup(props: Props) {
         <ChoiceGroup
             className={props?.className}
             defaultSelectedKey={props?.defaultSelectedKey}
-            options={props.options}
+            options={props.options.map((option) => {
+                return {
+                    ...option,
+                    onRenderField: (optionProps, defaultRender) => {
+                        if (optionProps && defaultRender) {
+                            return (
+                                <Tooltip content={optionProps.title}>
+                                    {defaultRender(optionProps) || <></>}
+                                </Tooltip>
+                            );
+                        }
+                        return <></>;
+                    },
+                };
+            })}
             onChange={props.onChange}
             styles={{ root: styles.choiceGroup }}
         />

diff --git a/packages/core/components/ComboBox/ComboBox.module.css b/packages/core/components/ComboBox/ComboBox.module.css
@@ -44,14 +44,27 @@
   border-radius: var(--small-border-radius);
   box-shadow: var(--box-shadow);
   padding: 8px 0;
-  max-height: 250px !important;
+  max-height: 300px !important;
 }
 
 .combo-box-callout > div {
   background-color: var(--primary-background-color);
   border-radius: 0;
 }
 
+.combo-box-callout::after  {
+  background-image: linear-gradient(transparent,  var(--primary-background-color));
+  content: " ";
+  display: block;
+  height: 30px;
+  pointer-events: none;
+  /* Adjusted for height - footer height */
+  width: 100%;
+  z-index: 10;
+  position: absolute;
+  bottom: 5px;
+}
+
 .combo-box-item :is(input, button, label){
   color: var(--primary-text-color);
 }
@@ -97,3 +110,7 @@
 .combo-box-item > div:hover :is(i, div) {
   color: var(--highlight-text-color) !important;
 }
+
+.options-container {
+  padding-bottom: var(--margin);
+}
diff --git a/packages/core/components/ComboBox/index.tsx b/packages/core/components/ComboBox/index.tsx
@@ -86,6 +86,7 @@ export default function BaseComboBox(props: Props) {
                 root: styles.comboBox,
                 label: styles.comboBoxLabel,
                 callout: styles.comboBoxCallout,
+                optionsContainer: styles.optionsContainer,
             }}
             useComboBoxAsMenuWidth={props?.useComboBoxAsMenuWidth}
         />

diff --git a/packages/core/components/EditMetadata/ExistingAnnotationPathway.tsx b/packages/core/components/EditMetadata/ExistingAnnotationPathway.tsx
@@ -35,12 +35,12 @@ export default function ExistingAnnotationPathway(props: ExistingAnnotationProps
         // Track how many values we've seen, since some files may not have a value for this field
         let totalValueCount = 0;
         if (props?.annotationValueMap?.has(selectedFieldName)) {
-            const fieldValues = props.annotationValueMap.get(selectedFieldName);
-            valueMap = Object.keys(fieldValues).map((fieldName) => {
-                totalValueCount += fieldValues[fieldName];
+            const fieldValueToOccurenceMap = props.annotationValueMap.get(selectedFieldName);
+            valueMap = Object.keys(fieldValueToOccurenceMap).map((fieldName) => {
+                totalValueCount += fieldValueToOccurenceMap[fieldName];
                 return {
                     value: fieldName,
-                    fileCount: fieldValues[fieldName],
+                    fileCount: fieldValueToOccurenceMap[fieldName],
                 };
             });
         }
@@ -81,13 +81,15 @@ export default function ExistingAnnotationPathway(props: ExistingAnnotationProps
             )}
             <div className={classNames(styles.footer, styles.footerAlignRight)}>
                 <SecondaryButton title="Cancel" text="CANCEL" onClick={props.onDismiss} />
-                <PrimaryButton
-                    className={styles.primaryButton}
-                    disabled={!newValues}
-                    title="Replace"
-                    text="REPLACE"
-                    onClick={onSubmit}
-                />
+                {valueCount && (
+                    <PrimaryButton
+                        className={styles.primaryButton}
+                        disabled={!newValues}
+                        title="Replace"
+                        text="REPLACE"
+                        onClick={onSubmit}
+                    />
+                )}
             </div>
         </>
     );

diff --git a/packages/core/components/EditMetadata/MetadataDetails.module.css b/packages/core/components/EditMetadata/MetadataDetails.module.css
@@ -8,13 +8,19 @@
 .details-header > div, .details-header > div:hover, .details-header span {
   background-color: var(--primary-background-color);
   color: var(--secondary-text-color);
+  font-size: var(--xs-paragraph-size);
+  height: 36px;
 }
 
 .details-header > div {
   padding-top: 5px;
   border-bottom: 1px solid var(--border-color);
 }
 
+.details-header > div > div:hover {
+  background-color: unset;
+}
+
 .column-right-align span, .column-right-align-cell {
   display: flex;
   justify-content: flex-end;
@@ -28,15 +34,18 @@
 .table-row > div:first-child {
   color: var(--secondary-text-color);
   background-color: unset;
-  font-family: var(--font-family);
-  font-size: 14px;
+  font-size: var(--l-paragraph-size);
   font-weight: 400;
 }
 
 .table-row > div:hover:first-child, .table-row > div:hover {
   color: var(--secondary-text-color);
 }
 
+.table-title {
+  padding-bottom: 5px
+}
+
 .stack {
   width: 100%;
 }

diff --git a/packages/core/components/EditMetadata/MetadataDetails.tsx b/packages/core/components/EditMetadata/MetadataDetails.tsx
@@ -59,7 +59,7 @@ export default function EditMetadataDetailsList(props: DetailsListProps) {
         <div className={styles.wrapper}>
             <Stack className={styles.stack} horizontal tokens={{ childrenGap: 20 }}>
                 <StackItem grow className={styles.stackItemLeft}>
-                    <h4>Existing values</h4>
+                    <h4 className={styles.tableTitle}>Existing values</h4>
                     <DetailsList
                         setKey="items"
                         cellStyleProps={{

diff --git a/packages/core/components/EditMetadata/index.tsx b/packages/core/components/EditMetadata/index.tsx
@@ -78,10 +78,12 @@ export default function EditMetadataForm() {
                     {
                         key: EditMetadataPathway.EXISTING,
                         text: "Existing field",
+                        title: "Choose a field that already exists in the data source(s).",
                     },
                     {
                         key: EditMetadataPathway.NEW,
                         text: "New field",
+                        title: "Create a new field that doesn't yet exist in the data source(s).",
                     },
                 ]}
             />