@databiosphere/findable-ui 42.0.1 → 42.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "42.0.1"
+  ".": "42.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [42.1.0](https://github.com/DataBiosphere/findable-ui/compare/v42.0.1...v42.1.0) (2025-08-13)
+
+
+### Features
+
+* create typography to css helper function ([#625](https://github.com/DataBiosphere/findable-ui/issues/625)) ([#626](https://github.com/DataBiosphere/findable-ui/issues/626)) ([2a78f7a](https://github.com/DataBiosphere/findable-ui/commit/2a78f7aa256617f9f1f058b2979849e865a668a0))
+
+
+### Bug Fixes
+
+* fix category group filter label line height ([#627](https://github.com/DataBiosphere/findable-ui/issues/627)) ([#628](https://github.com/DataBiosphere/findable-ui/issues/628)) ([3bb93ce](https://github.com/DataBiosphere/findable-ui/commit/3bb93ce6f8cd4ad316d08809626638b45e238b56))
+* fix pagination summary spacing ([#623](https://github.com/DataBiosphere/findable-ui/issues/623)) ([#624](https://github.com/DataBiosphere/findable-ui/issues/624)) ([b1bfd1f](https://github.com/DataBiosphere/findable-ui/commit/b1bfd1f6c4f1a7d53524ec8d584a97b9cd1dbe83))
+* revert typography theme styles ([#630](https://github.com/DataBiosphere/findable-ui/issues/630)) ([#631](https://github.com/DataBiosphere/findable-ui/issues/631)) ([e9f037b](https://github.com/DataBiosphere/findable-ui/commit/e9f037b8e5c759533f7cb491e7b080c5496f6474))
+
 ## [42.0.1](https://github.com/DataBiosphere/findable-ui/compare/v42.0.0...v42.0.1) (2025-08-12)
 
 

package/lib/components/Filter/components/Filters/filters.js

@@ -53,7 +53,7 @@ export const Filters = ({ categoryFilters, className, disabled = false, onFilter
     }, [windowHeight]);
     return (React.createElement(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
-        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
+        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 /**

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -1,3 +1,4 @@
+import { Typography } from "@mui/material";
 import { FiltersProps } from "./filters";
 interface Props {
     height: number;
@@ -6,9 +7,5 @@ export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & Props & Pick<FiltersProps, "disabled" | "surfaceType">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+export declare const StyledTypography: typeof Typography;
 export {};

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -6,10 +6,13 @@ export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) =>
     return (React.createElement(Fade, { in: totalResult > 0, unmountOnExit: true },
         React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Results"),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 },
                 firstResult,
                 " - ",
                 lastResult),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "of"),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, totalResult))));
 };

package/lib/styles/common/mixins/typography.d.ts

@@ -0,0 +1,8 @@
+import { SerializedStyles } from "@emotion/react";
+import { ThemeProps } from "../../../theme/types";
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export declare function typographyToCSS(variant: keyof ThemeProps["theme"]["typography"]): (props: ThemeProps) => SerializedStyles;

package/lib/styles/common/mixins/typography.js

@@ -0,0 +1,11 @@
+import { css } from "@emotion/react";
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export function typographyToCSS(variant) {
+    return (props) => {
+        return css(props.theme.typography[variant]);
+    };
+}

package/lib/theme/common/typography.js

@@ -57,9 +57,11 @@ const heading = (theme) => ({
     fontFamily: "Inter",
     fontSize: "20px",
     fontWeight: 500,
+    letterSpacing: "-0.2px",
     lineHeight: "28px",
     [bpUpSm({ theme })]: {
         fontSize: "24px",
+        letterSpacing: "-0.4px",
         lineHeight: "32px",
     },
 });
@@ -67,9 +69,11 @@ const headingLarge = (theme) => ({
     fontFamily: "Inter",
     fontSize: "24px",
     fontWeight: 500,
+    letterSpacing: "-0.4px",
     lineHeight: "32px",
     [bpUpSm({ theme })]: {
-        fontSize: "32px",
+        fontSize: "30px",
+        letterSpacing: "-0.8px",
         lineHeight: "40px",
     },
 });
@@ -80,6 +84,7 @@ const headingSmall = (theme) => ({
     lineHeight: "26px",
     [bpUpSm({ theme })]: {
         fontSize: "20px",
+        letterSpacing: "-0.2px",
         lineHeight: "28px",
     },
 });
@@ -91,8 +96,8 @@ const headingXLarge = (theme) => ({
     lineHeight: "40px",
     [bpUpSm({ theme })]: {
         fontSize: "40px",
-        letterSpacing: "-0.4px",
-        lineHeight: "48px",
+        letterSpacing: "-1.4px",
+        lineHeight: "56px",
     },
 });
 const headingXSmall = {

package/package.json

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

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -42,4 +42,4 @@ export const Filters = styled("div")<
 
 export const StyledTypography = styled(Typography)`
   padding: 8px;
-`;
+` as typeof Typography;

package/src/components/Filter/components/Filters/filters.tsx

@@ -103,6 +103,7 @@ export const Filters = ({
           {label && (
             <StyledTypography
               color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              component="div"
               variant={TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500}
             >
               {label}

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -19,11 +19,11 @@ export const PaginationSummary = ({
       <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
           Results
-        </Typography>
+        </Typography>{" "}
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
           {firstResult} - {lastResult}
-        </Typography>
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>of</Typography>
+        </Typography>{" "}
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>of</Typography>{" "}
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
           {totalResult}
         </Typography>

package/src/styles/common/mixins/typography.ts

@@ -0,0 +1,15 @@
+import { css, SerializedStyles } from "@emotion/react";
+import { ThemeProps } from "../../../theme/types";
+
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export function typographyToCSS(
+  variant: keyof ThemeProps["theme"]["typography"]
+) {
+  return (props: ThemeProps): SerializedStyles => {
+    return css(props.theme.typography[variant]);
+  };
+}

package/src/theme/common/typography.ts

@@ -72,9 +72,11 @@ const heading = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "20px",
   fontWeight: 500,
+  letterSpacing: "-0.2px",
   lineHeight: "28px",
   [bpUpSm({ theme })]: {
     fontSize: "24px",
+    letterSpacing: "-0.4px",
     lineHeight: "32px",
   },
 });
@@ -83,9 +85,11 @@ const headingLarge = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "24px",
   fontWeight: 500,
+  letterSpacing: "-0.4px",
   lineHeight: "32px",
   [bpUpSm({ theme })]: {
-    fontSize: "32px",
+    fontSize: "30px",
+    letterSpacing: "-0.8px",
     lineHeight: "40px",
   },
 });
@@ -97,6 +101,7 @@ const headingSmall = (theme: Theme): TypographyStyle => ({
   lineHeight: "26px",
   [bpUpSm({ theme })]: {
     fontSize: "20px",
+    letterSpacing: "-0.2px",
     lineHeight: "28px",
   },
 });
@@ -109,8 +114,8 @@ const headingXLarge = (theme: Theme): TypographyStyle => ({
   lineHeight: "40px",
   [bpUpSm({ theme })]: {
     fontSize: "40px",
-    letterSpacing: "-0.4px",
-    lineHeight: "48px",
+    letterSpacing: "-1.4px",
+    lineHeight: "56px",
   },
 });