Fixed Bug 60407 - Files. The button for calling the sort menu settings does not work when opening the information panel.

packages/components/table-container/StyledTableContainer.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import Base from "../themes/base";
 import { mobile, tablet, hugeMobile } from "../utils/device";
+import IconButton from "../icon-button";
 import Scrollbar from "../scrollbar";
 import { isMobile, isMobileOnly } from "react-device-detect";
 
@@ -412,6 +413,21 @@ const StyledScrollbar = styled(Scrollbar)`
 
 StyledTableRow.defaultProps = { theme: Base };
 
+const StyledSettingsIcon = styled(IconButton)`
+  ${(props) =>
+    props.isDisabled &&
+    css`
+      svg {
+        path {
+          fill: ${props.theme.tableContainer.header
+            .settingsIconDisableColor} !important;
+        }
+      }
+    `}
+`;
+
+StyledSettingsIcon.defaultProps = { theme: Base };
+
 export {
   StyledTableContainer,
   StyledTableRow,
@@ -424,4 +440,5 @@ export {
   StyledInfoPanelToggleWrapper,
   StyledEmptyTableContainer,
   StyledScrollbar,
+  StyledSettingsIcon,
 };

packages/components/table-container/TableSettings.js

@@ -1,8 +1,11 @@
 import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import IconButton from "../icon-button";
+// import IconButton from "../icon-button";
 import DropDown from "../drop-down";
-import { StyledTableSettings } from "./StyledTableContainer";
+import {
+  StyledTableSettings,
+  StyledSettingsIcon,
+} from "./StyledTableContainer";
 import Checkbox from "../checkbox";
 
 const TableSettings = ({ columns, infoPanelVisible }) => {
@@ -27,7 +30,7 @@ const TableSettings = ({ columns, infoPanelVisible }) => {
       className="table-container_header-settings-icon"
       ref={ref}
     >
-      <IconButton
+      <StyledSettingsIcon
         size={12}
         isFill
         iconName="/static/images/settings.desc.react.svg"

packages/components/themes/base.js

@@ -2211,6 +2211,8 @@ const Base = {
       borderImageSource: `linear-gradient(to right,${white} 21px,${grayLightMid} 21px,${grayLightMid} calc(100% - 20px),${white} calc(100% - 20px))`,
       lengthenBorderImageSource: `linear-gradient(to right, ${grayLightMid}, ${grayLightMid})`,
       hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`,
+
+      settingsIconDisableColor: "#D0D5DA",
     },
 
     tableCell: {
@@ -3105,8 +3107,8 @@ const Base = {
   },
 
   itemIcon: {
-    borderColor: grayLightMid
-  }
+    borderColor: grayLightMid,
+  },
 };
 
 export default Base;

packages/components/themes/dark.js

@@ -2204,6 +2204,8 @@ const Dark = {
       borderImageSource: `linear-gradient(to right,${black} 21px,#474747 21px,#474747 calc(100% - 20px),${black} calc(100% - 20px))`,
       lengthenBorderImageSource: `linear-gradient(to right, #474747, #474747)`,
       hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`,
+
+      settingsIconDisableColor: "#474747",
     },
 
     tableCell: {
@@ -3104,8 +3106,8 @@ const Dark = {
   },
 
   itemIcon: {
-    borderColor: "#474747"
-  }
+    borderColor: "#474747",
+  },
 };
 
 export default Dark;