@databiosphere/findable-ui 41.0.0 → 41.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "41.0.0"
+  ".": "41.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [41.1.0](https://github.com/DataBiosphere/findable-ui/compare/v41.0.0...v41.1.0) (2025-07-31)
+
+
+### Features
+
+* update data dictionary column filter button size to large ([#603](https://github.com/DataBiosphere/findable-ui/issues/603)) ([#604](https://github.com/DataBiosphere/findable-ui/issues/604)) ([a1d7c76](https://github.com/DataBiosphere/findable-ui/commit/a1d7c76bad1386c7c56bbb4c5f65f9905addc71e))
+
 ## [41.0.0](https://github.com/DataBiosphere/findable-ui/compare/v40.0.0...v41.0.0) (2025-07-30)
 
 

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.js

@@ -1,7 +1,9 @@
 import { ButtonGroup, useMediaQuery } from "@mui/material";
 import React from "react";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
 import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Button } from "../../../../../Filter/components/surfaces/drawer/components/Button/button";
 import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 export const ColumnFilters = ({ table, }) => {
@@ -12,6 +14,14 @@ export const ColumnFilters = ({ table, }) => {
     if (!enableColumnFilters)
         return null;
     if (isDrawer)
-        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { ...props }) }));
+        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { Button: renderButton, ...props }) }));
     return (React.createElement(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED }, columnFilters.map((column) => (React.createElement(ColumnFilter, { key: column.id, column: column })))));
 };
+/**
+ * Renders the drawer's open button with the specified size.
+ * @param props - Button props.
+ * @returns Button.
+ */
+function renderButton(props) {
+    return React.createElement(Button, { size: BUTTON_PROPS.SIZE.LARGE, ...props });
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -1,5 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import React, { Fragment, useCallback } from "react";
+import { BUTTON_PROPS } from "../../../../../styles/common/mui/button";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
@@ -28,7 +29,7 @@ export const ColumnFilter = ({ Button = StyledButton, className, column, ...prop
         column.setFilterValue(updater(value));
     }, [column]);
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open },
+        React.createElement(Button, { disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open, size: BUTTON_PROPS.SIZE.LARGE },
             React.createElement(Grid, { ...GRID_PROPS },
                 getColumnHeader(column),
                 React.createElement(FilterCountChip, { count: filterValue.length }))),

package/lib/theme/common/components.js

@@ -241,7 +241,16 @@ export const MuiButton = (theme) => {
         variants: [
             {
                 props: { size: BUTTON_PROPS.SIZE.LARGE },
-                style: { padding: "10px 16px" },
+                style: {
+                    padding: "10px 16px",
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    ".MuiButton-iconSizeLarge": {
+                        // eslint-disable-next-line sort-keys -- disabling key order for readability
+                        ".MuiSvgIcon-root": {
+                            fontSize: "20px",
+                        },
+                    },
+                },
             },
             {
                 props: { size: BUTTON_PROPS.SIZE.MEDIUM },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "41.0.0",
+  "version": "41.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -1,9 +1,11 @@
 import { ButtonGroup, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import React, { ComponentProps } from "react";
 import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
 import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Button } from "../../../../../Filter/components/surfaces/drawer/components/Button/button";
 import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 import { ColumnFiltersProps } from "./types";
@@ -22,7 +24,7 @@ export const ColumnFilters = <T extends RowData = Attribute>({
     return (
       <ColumnFiltersAdapter
         table={table}
-        renderSurface={(props) => <Drawer {...props} />}
+        renderSurface={(props) => <Drawer Button={renderButton} {...props} />}
       />
     );
 
@@ -34,3 +36,12 @@ export const ColumnFilters = <T extends RowData = Attribute>({
     </ButtonGroup>
   );
 };
+
+/**
+ * Renders the drawer's open button with the specified size.
+ * @param props - Button props.
+ * @returns Button.
+ */
+function renderButton(props: ComponentProps<typeof Button>): JSX.Element {
+  return <Button size={BUTTON_PROPS.SIZE.LARGE} {...props} />;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -1,6 +1,7 @@
 import { Grid, Typography } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React, { Fragment, useCallback } from "react";
+import { BUTTON_PROPS } from "../../../../../styles/common/mui/button";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
@@ -51,6 +52,7 @@ export const ColumnFilter = <T extends RowData>({
         endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
         onClick={onOpen}
         open={open}
+        size={BUTTON_PROPS.SIZE.LARGE}
       >
         <Grid {...GRID_PROPS}>
           {getColumnHeader(column)}

package/src/theme/common/components.ts

@@ -258,7 +258,16 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
     variants: [
       {
         props: { size: BUTTON_PROPS.SIZE.LARGE },
-        style: { padding: "10px 16px" },
+        style: {
+          padding: "10px 16px",
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          ".MuiButton-iconSizeLarge": {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            ".MuiSvgIcon-root": {
+              fontSize: "20px",
+            },
+          },
+        },
       },
       {
         props: { size: BUTTON_PROPS.SIZE.MEDIUM },