CODEWITHSUNDEEP
cssdrop-down-menufluent-uifluentui-react
SoftTimur
SoftTimur

Reputation: 5510

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."
    }
  }
};

Upvotes: 0

Views: 589

Answers (2)

Mao Siyu
Mao Siyu

Reputation: 1

You can create a styled component: const StyledDropDown = styled(Dropdown)` display: flex; flex-wrap: wrap;

.ms-Dropdown-label {
    white-space: normal;
    height: unset;
    margin-right: 20px;
  }
& .ms-Dropdown-container {
    flex-wrap: wrap;
    margin-left: 10px;
}
& .ms-Dropdown-title {
    border: none;
}

`;

Upvotes: 0

alex3683
alex3683

Reputation: 1565

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

Upvotes: 1

Related Questions