cssdrop-down-menufluent-uifluentui-react

Remove all the borders around the dropdown button


I'm using the preview Dropdown of Fluent UI.

I would like to remove all the borders around the button, including the bottom border. I tried to add root={{ borderBottom: "none"}} in the <Dropdown, it did not work.

Could anyone help?

CodeSandbox: https://codesandbox.io/s/lively-rgb-i2lw6z?file=/example.tsx

import { makeStyles, shorthands, useId } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import * as React from "react";
const useStyles = makeStyles({
  root: {
    // Stack the label above the field with a gap
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
    maxWidth: "500px"
  }
});
export const Grouped = (props: Partial<DropdownProps>) => {
  const dropdownId = useId("dropdown-grouped");
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const water = ["Fish", "Jellyfish", "Octopus", "Seal"];
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <label id={dropdownId}>Best pet</label>
      <Dropdown
        aria-labelledby={dropdownId}
        placeholder="Select an animal"
        appearance="underline"
        {...props}
      >
        <OptionGroup label="Land">
          {land.map((option) => (
            <Option key={option} disabled={option === "Ferret"}>
              {option}
            </Option>
          ))}
        </OptionGroup>
        <OptionGroup label="Sea">
          {water.map((option) => (
            <Option key={option}>{option}</Option>
          ))}
        </OptionGroup>
      </Dropdown>
    </div>
  );
};
Grouped.parameters = {
  docs: {
    description: {
      story:
        "Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label."
    }
  }
};

Solution

  • It seems the easiest solution is to use the appearance type filled-lighter, as it renders no borders, but only the bottom border when opened (I don't know if that should be removed as well):

    <Dropdown
      aria-labelledby={dropdownId}
      placeholder="Select an animal"
      appearance="filled-lighter"
      {...props}
    >
    

    Alternatively you can set the border styles of the dropdown to have zero width:

    import { makeStyles, shorthands, useId } from "@fluentui/react-components";
    import {
      Dropdown,
      Option,
      OptionGroup,
      DropdownProps
    } from "@fluentui/react-components/unstable";
    import * as React from "react";
    const useStyles = makeStyles({
      root: {
        // Stack the label above the field with a gap
        display: "grid",
        gridTemplateRows: "repeat(1fr)",
        justifyItems: "start",
        ...shorthands.gap("2px"),
        maxWidth: "500px"
      },
      dropdown: {
        // removes default border around the dropdown
        ...shorthands.borderWidth(0),
        // removes the blue bottom border when the dropdown is open
        '::after': {
          borderBottomWidth: 0
        }
      },
    });
    export const Grouped = (props: Partial<DropdownProps>) => {
      const dropdownId = useId("dropdown-grouped");
      const land = ["Cat", "Dog", "Ferret", "Hamster"];
      const water = ["Fish", "Jellyfish", "Octopus", "Seal"];
      const styles = useStyles();
      return (
        <div className={styles.root}>
          <label id={dropdownId}>Best pet</label>
          <Dropdown
            className={styles.dropdown}
            aria-labelledby={dropdownId}
            placeholder="Select an animal"
            {...props}
          >
            <OptionGroup label="Land">
              {land.map((option) => (
                <Option key={option} disabled={option === "Ferret"}>
                  {option}
                </Option>
              ))}
            </OptionGroup>
            <OptionGroup label="Sea">
              {water.map((option) => (
                <Option key={option}>{option}</Option>
              ))}
            </OptionGroup>
          </Dropdown>
        </div>
      );
    };
    Grouped.parameters = {
      docs: {
        description: {
          story:
            "Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label."
        }
      }
    };
    

    Adjusted sandbox: https://codesandbox.io/s/wizardly-bohr-teithu?file=/example.tsx