Merge pull request #619 from AllenInstitute/feature/refactor-new-button-style

aswallace · web-flow · commit 6a67feba4350 · 2025-11-24T17:20:18.000-08:00
Refactor icon buttons to use new component
diff --git a/packages/core/components/DataSourcePrompt/DataSourcePrompt.module.css b/packages/core/components/DataSourcePrompt/DataSourcePrompt.module.css
@@ -65,8 +65,6 @@
 }
 
 .icon-button {
-    background-color: transparent;
-    color: var(--primary-text-color);
     top: -6px;
 }
 
@@ -75,11 +73,6 @@
     height: 18px;
 }
 
-.icon-button:hover {
-    background-color: transparent;
-    color: var(--highlight-text-color);
-}
-
 .load-button-container {
     display: flex;
     margin-top: 18px;
diff --git a/packages/core/components/DataSourcePrompt/FilePrompt.module.css b/packages/core/components/DataSourcePrompt/FilePrompt.module.css
@@ -75,15 +75,9 @@
 }
 
 .selected-file-button {
-    color: var(--primary-text-color);
     margin-left: 10px;
 }
 
-.selected-file-button:hover {
-    background-color: unset;
-    color: var(--highlight-text-color);
-}
-
 .selected-files {
     align-items: center;
     display: flex;
diff --git a/packages/core/components/DataSourcePrompt/FilePrompt.tsx b/packages/core/components/DataSourcePrompt/FilePrompt.tsx
@@ -1,10 +1,10 @@
-import { Icon, IconButton, TextField } from "@fluentui/react";
+import { Icon, TextField } from "@fluentui/react";
 import classNames from "classnames";
 import { throttle } from "lodash";
 import * as React from "react";
 import { useDropzone } from "react-dropzone";
 
-import { SecondaryButton, TertiaryButton } from "../Buttons";
+import { SecondaryButton, TertiaryButton, TransparentIconButton } from "../Buttons";
 import Tooltip from "../Tooltip";
 import { Source, getNameAndTypeFromSourceUrl } from "../../entity/SearchParams";
 
@@ -97,9 +97,10 @@ export default function FilePrompt(props: Props) {
                             {props.selectedFile.name}.{props.selectedFile.type}
                         </p>
                     </Tooltip>
-                    <IconButton
+                    <TransparentIconButton
                         className={styles.selectedFileButton}
-                        iconProps={{ iconName: "Cancel" }}
+                        iconName="Cancel"
+                        title="Remove file"
                         onClick={() => props.onSelectFile(undefined)}
                     />
                 </div>
diff --git a/packages/core/components/DataSourcePrompt/index.tsx b/packages/core/components/DataSourcePrompt/index.tsx
@@ -1,10 +1,10 @@
-import { DefaultButton, Icon, IconButton } from "@fluentui/react";
+import { DefaultButton, Icon } from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import FilePrompt from "./FilePrompt";
-import { LinkLikeButton, PrimaryButton } from "../Buttons";
+import { LinkLikeButton, PrimaryButton, TransparentIconButton } from "../Buttons";
 import { Source } from "../../entity/SearchParams";
 import { interaction, selection } from "../../state";
 import { DataSourcePromptInfo } from "../../state/interaction/actions";
@@ -77,9 +77,9 @@ export default function DataSourcePrompt(props: Props) {
             {!metadataSource && (
                 <div className={styles.advancedOptionsHeader}>
                     <h4 className={styles.fullWidth}>Add metadata descriptor file (optional)</h4>
-                    <IconButton
+                    <TransparentIconButton
                         className={styles.iconButton}
-                        iconProps={{ iconName: "Cancel" }}
+                        iconName="Cancel"
                         onClick={() => {
                             setMetadataSource(undefined);
                             setShowAdvancedOptions(false);
diff --git a/packages/core/components/EditMetadata/EditMetadata.module.css b/packages/core/components/EditMetadata/EditMetadata.module.css
@@ -138,15 +138,9 @@
 }
 
 .selected-option-button {
-  color: var(--primary-text-color);
   margin-left: 10px;
 }
 
-.selected-option-button:hover {
-  background-color: unset;
-  color: var(--highlight-text-color);
-}
-
 .text-field {
   padding-bottom: var(--margin);
   width: var(--edit-form-field-width);
diff --git a/packages/core/components/EditMetadata/NewAnnotationPathway.tsx b/packages/core/components/EditMetadata/NewAnnotationPathway.tsx
@@ -1,11 +1,11 @@
-import { IconButton, Stack, StackItem, TextField } from "@fluentui/react";
+import { Stack, StackItem, TextField } from "@fluentui/react";
 import classNames from "classnames";
 import Fuse from "fuse.js";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import MetadataDetails, { ValueCountItem } from "./MetadataDetails";
-import { PrimaryButton, SecondaryButton } from "../Buttons";
+import { PrimaryButton, SecondaryButton, TransparentIconButton } from "../Buttons";
 import ComboBox from "../ComboBox";
 import LoadingIcon from "../Icons/LoadingIcon";
 import Tooltip from "../Tooltip";
@@ -295,9 +295,10 @@ export default function NewAnnotationPathway(props: NewAnnotationProps) {
                                         <Tooltip content={option}>
                                             <p className={styles.selectedOption}>{option}</p>
                                         </Tooltip>
-                                        <IconButton
+                                        <TransparentIconButton
                                             className={styles.selectedOptionButton}
-                                            iconProps={{ iconName: "Cancel" }}
+                                            iconName="Cancel"
+                                            title={`Remove ${option}`}
                                             onClick={() => removeDropdownChip(option)}
                                         />
                                     </div>
diff --git a/packages/core/components/QueryPart/QueryPartRow.module.css b/packages/core/components/QueryPart/QueryPartRow.module.css
@@ -1,17 +1,10 @@
 .icon-button, .icon-button:hover {
-    background-color: unset;
-    color: unset;
     font-weight: 600;
     height: 37px;
     max-width: 22px;
     width: 100%;
 }
 
-.icon-button:hover {
-    background-color: unset;
-    color: var(--highlight-text-color);
-}
-
 .icon-button i {
     font-size: 14px;
     font-weight: 600;
diff --git a/packages/core/components/QueryPart/QueryPartRow.tsx b/packages/core/components/QueryPart/QueryPartRow.tsx
@@ -1,8 +1,8 @@
-import { DirectionalHint, Icon, IconButton } from "@fluentui/react";
+import { DirectionalHint, Icon } from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
 
-import { useButtonMenu } from "../Buttons";
+import { TransparentIconButton, useButtonMenu } from "../Buttons";
 import { DnDItem, DnDItemRendererParams } from "../DnDList/DnDList";
 import Tooltip from "../Tooltip";
 
@@ -58,25 +58,20 @@ export default function QueryGroupRow(props: Props) {
                 </Tooltip>
             </div>
             {!!props.item.onRenderEditMenuList && (
-                <Tooltip content="Edit">
-                    <IconButton
-                        ariaLabel="Edit"
-                        className={classNames(styles.iconButton, styles.hiddenInnerIcon)}
-                        iconProps={{ iconName: "Edit" }}
-                        menuProps={editMenu}
-                    />
-                </Tooltip>
+                <TransparentIconButton
+                    className={classNames(styles.iconButton, styles.hiddenInnerIcon)}
+                    iconName="Edit"
+                    menuProps={editMenu}
+                    title="Edit"
+                />
             )}
             {props.item.onDelete && (
-                <Tooltip content="Delete">
-                    <IconButton
-                        ariaDescription="Delete"
-                        ariaLabel="Delete"
-                        className={styles.iconButton}
-                        iconProps={{ iconName: "Cancel" }}
-                        onClick={() => props.item.onDelete?.(props.item.id)}
-                    />
-                </Tooltip>
+                <TransparentIconButton
+                    className={styles.iconButton}
+                    iconName="Cancel"
+                    onClick={() => props.item.onDelete?.(props.item.id)}
+                    title="Delete"
+                />
             )}
         </div>
     );
diff --git a/packages/core/components/QuerySidebar/Query.module.css b/packages/core/components/QuerySidebar/Query.module.css
@@ -3,21 +3,6 @@
     background-color: var(--primary-sidebar-color);
 }
 
-.collapse-button:hover {
-    color: var(--highlight-text-color);
-    background-color: var(--highlight-background-color);
-}
-
-.expand-button {
-    color: var(--primary-sidebar-text-color);
-    background: none;
-}
-
-.expand-button:hover {
-    color: var(--highlight-text-color);
-    background: none;
-}
-
 .collapse-button i, .expand-button i {
     font-weight: 600;
 }
diff --git a/packages/core/components/QuerySidebar/Query.tsx b/packages/core/components/QuerySidebar/Query.tsx
@@ -1,9 +1,10 @@
-import { IContextualMenuItem, IconButton, SpinnerSize, TextField } from "@fluentui/react";
+import { IContextualMenuItem, SpinnerSize, TextField } from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import QueryFooter from "./QueryFooter";
+import { TertiaryButton, TransparentIconButton } from "../Buttons";
 import LoadingIcon from "../Icons/LoadingIcon";
 import QueryDataSource from "../QueryPart/QueryDataSource";
 import QueryFilter from "../QueryPart/QueryFilter";
@@ -119,12 +120,10 @@ export default function Query(props: QueryProps) {
                             <i>Building new query...</i>
                         </h4>
                     </Tooltip>
-                    <IconButton
-                        ariaDescription="Expand view details"
-                        ariaLabel="Expand"
+                    <TransparentIconButton
                         className={styles.expandButton}
                         disabled
-                        iconProps={{ iconName: "ChevronDownMed" }}
+                        iconName="ChevronDownMed"
                     />
                 </div>
                 <hr className={styles.divider}></hr>
@@ -154,13 +153,11 @@ export default function Query(props: QueryProps) {
                     <Tooltip content={props.query.name}>
                         <h4>{props.query.name}</h4>
                     </Tooltip>
-                    <IconButton
-                        ariaDescription="Expand view details"
-                        ariaLabel="Expand"
+                    <TransparentIconButton
                         className={styles.expandButton}
                         onClick={() => setIsExpanded(!isExpanded)}
-                        iconProps={{ iconName: "ChevronDownMed" }}
-                        data-testid="expand-button"
+                        iconName="ChevronDownMed"
+                        id="expand-button"
                     />
                 </div>
                 {!isExpanded && <hr className={styles.divider}></hr>}
@@ -214,13 +211,12 @@ export default function Query(props: QueryProps) {
                         }
                     />
                 </div>
-                <IconButton
-                    ariaDescription="Collapse view details"
-                    ariaLabel="Collapse"
+                <TertiaryButton
                     className={styles.collapseButton}
                     onClick={() => setIsExpanded(!isExpanded)}
-                    iconProps={{ iconName: "ChevronUpMed" }}
+                    iconName="ChevronUpMed"
                     data-testid="collapse-button"
+                    title="Collapse query details"
                 />
             </div>
             <QueryDataSource

Original file line number	Diff line number	Diff line change
`@@ -65,8 +65,6 @@`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`.icon-button {`
`68`		`- background-color: transparent;`
`69`		`- color: var(--primary-text-color);`
`70`	`68`	`top: -6px;`
`71`	`69`	`}`
`72`	`70`
`@@ -75,11 +73,6 @@`
`75`	`73`	`height: 18px;`
`76`	`74`	`}`
`77`	`75`
`78`		`-.icon-button:hover {`
`79`		`- background-color: transparent;`
`80`		`- color: var(--highlight-text-color);`
`81`		`-}`
`82`		`-`
`83`	`76`	`.load-button-container {`
`84`	`77`	`display: flex;`
`85`	`78`	`margin-top: 18px;`
Original file line number	Diff line number	Diff line change
`@@ -75,15 +75,9 @@`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`.selected-file-button {`
`78`		`- color: var(--primary-text-color);`
`79`	`78`	`margin-left: 10px;`
`80`	`79`	`}`
`81`	`80`
`82`		`-.selected-file-button:hover {`
`83`		`- background-color: unset;`
`84`		`- color: var(--highlight-text-color);`
`85`		`-}`
`86`		`-`
`87`	`81`	`.selected-files {`
`88`	`82`	`align-items: center;`
`89`	`83`	`display: flex;`
Original file line number	Diff line number	Diff line change
`@@ -138,15 +138,9 @@`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`.selected-option-button {`
`141`		`- color: var(--primary-text-color);`
`142`	`141`	`margin-left: 10px;`
`143`	`142`	`}`
`144`	`143`
`145`		`-.selected-option-button:hover {`
`146`		`- background-color: unset;`
`147`		`- color: var(--highlight-text-color);`
`148`		`-}`
`149`		`-`
`150`	`144`	`.text-field {`
`151`	`145`	`padding-bottom: var(--margin);`
`152`	`146`	`width: var(--edit-form-field-width);`