v9: Custom Components with Slots & Composition API Part 1 (AppBarTitle)

[blendsdk]

What is this about?

I am using the new v9 API to create (migrate) my v8 components to v9. Here are some code snippets and ideas that might help if you are in the same boat as I am. Please note that you do not have to use this style of component authoring. To keep a certain standard, I just want my components to be created the same way as FUI component did.

Take a look at this link for component templates.

At the time of writing this post, the Slots and the composition API in v9 is not marked as stable by the FUI team. After several experiments and spending some time studying the react-components package, I find this approach to be very flexible and fine to work with.

The component

The AppBarTitle is a simple component that either shows a text or a link given the existance of the href property.

Describing the Slot

The Slot is either a DIV or an Anchor element.

// file: AppBarTitle.types.ts

export type AppBarTitleSlots = {
    root: NonNullable<Slot<"div"> | Slot<"a">>; // THIS WORKED!
 
    root: NonNullable<Slot<"div", "a">>; // THIS DID NOT WORK!
    ....
};

Conditional tag in State

// file: useAppBarTitle.ts

export const useAppBarTitle_unstable = (props: AppBarTitleProps, ref: React.Ref<HTMLElement>): AppBarTitleState => {
    const { href = undefined, target = undefined } = props;

    const tag = href ? "a" : "div";  // A different tag based on the {href} property

    return {
        href,
        target,
        components: {
            root: tag
        },
        root: getNativeElementProps(tag, {
            ref,
            ...props
        })
    };
};

Rendering

Nothing special here! Most of the work is done in the hook above.

// file: renderAppBarTitle.tsx
export const renderAppBarTitle_unstable = (state: AppBarTitleState) => {
  const { slots, slotProps } = getSlots<AppBarTitleSlots>(state);
  return <slots.root {...slotProps.root} />;
};

Styling

Here we make the Anchor element look like a text.

file:// useAppBarTitleStyles.ts

/**
 * Styles for the root slot.
 * TODO: improve later based on the state condition
 */
const useStyles = makeStyles({
    root: {
        textDecorationSkipInk: "none",
        textDecorationColor: "none",
        textDecorationLine: "none",
        color: tokens.colorNeutralForegroundOnBrand,
        fontWeight: 600,
        fontSize: "1rem",
        lineHeight: appBarConstants.appbarHeight,
        ...shorthands.margin(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalS)
    }
});

Usage

[tombohub]

Where did you learn this Slot API?

[blendsdk]

Where did you learn this Slot API?

Sorry for the late response. Take a look at v9 source code. Everything is there 👍 😄

[spmonahan]

It's also discussed in the docs: Customizing components with slots

[ajh123]

That AppBar component looks cool. It could be useful for a lot of sites, are you allowed to share the full code?

[blendsdk]

That AppBar component looks cool. It could be useful for a lot of sites, are you allowed to share the full code?

Not at the moment unfortunately. It is part of a larger SDK we have developed internally.

[bsunderhus]

Hey there @blendsdk.

About the slot API you're presenting here:

// file: AppBarTitle.types.ts

export type AppBarTitleSlots = {
    root: NonNullable<Slot<"div"> | Slot<"a">>; // THIS WORKED!
 
    root: NonNullable<Slot<"div", "a">>; // THIS DID NOT WORK!
    ....
};

The type Slot<"div"> | Slot<"a"> is not valid. It'll create an union discrimination issue between div and a, where when undefined is provided to the discrimination property (as) the compiler does not have enough information to determine if you're resolving to a div type or to an a type.

The type Slot<"div", "a"> is valid and should work, as Slot will internally indicate that div is the default value and that a is an optional one on the discrimination, resolve the issue for undefined.

If you are using Slot<"div"> | Slot<"a"> be aware you're introducing a potential discrimination incompatibility between your types.

[blendsdk]

Thank you