Add iconSize to Breadcrumb props

[joegasewicz]

Environment

• Package version(s): @blueprintjs/core - ^3.33.0
• Browser and OS versions: N / A

Feature request

I want to be able to define an icon size in the breadcrumbs props. Currently I can only control the size of icon props
passed in via the currentBreadcrumbRenderer prop -

const renderCurrentBreadcrumb = ({ text, icon, ...restProps }: IBreadcrumbProps) => {
    return <Breadcrumb {...restProps}><Icon iconSize={26} icon={icon} /> {text}</Breadcrumb>;
};

But the above only changes the last icon component in the breadcrumb path.

Examples

const breadcrumbsProps = [
        { href: "/client", icon: "user", text: props.user?.email, iconSize: 30 },
        { href: props.location.pathname, icon: "list-detail-view", text: "Projects", iconSize: 30 },
    ];

[adidahiya]

Can you share a bit more context about why you need a custom icon size? What kinds of other UI elements is this breadcrumb list placed next to? Are you applying other custom styles?

[joegasewicz]

Hi @adidahiya I just needed to be able to pass down the iconSize to all paths in the breadcrumb props.

for example i currently have this:

the first segment(s) parts of the breadcrumbs path icons are smaller than the last icon, as i can control the last icons size via the enderCurrentBreadcrumb function.

here is my breadcrumbs component code:

 const breadcrumbs = [
        { href: "/client", icon: "user", text: props.user?.email },
        { href: props.location.pathname, icon: "list-detail-view", text: "Projects" },
];

<BreadCrumbs
                currentBreadcrumbRenderer={renderCurrentBreadcrumb}
                items={breadcrumbs}
            />

My renderCurrentBreadcrumb function then updates the last icon on the breadcrumbs path like this:

const renderCurrentBreadcrumb = ({ text, icon, ...restProps }: IBreadcrumbProps) => {
    return <Breadcrumb {...restProps}><Icon iconSize={30} icon={icon} /> {text}</Breadcrumb>;
};

The code change is about then enabling me to define all icon sizes in the array of breadcrumbs paths like this:

const breadcrumbsProps = [
        { href: "/client", icon: "user", text: props.user?.email, iconSize: 30 },
        { href: props.location.pathname, icon: "list-detail-view", text: "Projects", iconSize: 30 },
    ];

[saruman1234]

Hi @joegasewicz,

You can also provide a breadcrumbRenderer prop, to control how the other breadcrumbs are rendered.

If you don't provide a currentBreadcrumbRenderer, breadcrumbRenderer will be used for both.

For example:

import {
  Breadcrumb,
  Breadcrumbs,
  IBreadcrumbProps,
  IBreadcrumbsProps,
  Icon,
} from "@blueprintjs/core";
import React from "react";

const Example = () => {
  // Assuming you want all the breadcrumbs to use the same icon size.
  const BREADCRUMB_ICON_SIZE = 30;

  const items: IBreadcrumbProps[] = [
    { href: "/user", icon: "user", text: "Saruman" },
    {
      href: "/user/projects",
      icon: "list-detail-view",
      text: "Projects",
    },
  ];

  const breadcrumbRenderer: IBreadcrumbsProps["breadcrumbRenderer"] = ({
    icon,
    ...restProps
  }: IBreadcrumbProps) => {
    return (
      <Breadcrumb
        icon={
          <Icon
            icon={icon}
            iconSize={BREADCRUMB_ICON_SIZE}
            intent={restProps.intent}
          />
        }
        {...restProps}
      />
    );
  };

  return <Breadcrumbs breadcrumbRenderer={breadcrumbRenderer} items={items} />;
};

export default Example;

[adidahiya]

@saruman1234's suggestion looks like the right way to go. In addition, I don't think it makes sense to change the icon size without changing text size and spacing as well. If we do end up adding to the Blueprint API to support this use case, I would rather add an API which makes a more holistic size change to the breadcrumbs layout rather than just an icon size change (e.g. large={true})

[joegasewicz]

thanks @saruman1234