Reduce the left padding of a dropdown button

Question

I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.

Now, I would like to make the distance between Button 2 and the dropdown (e.g., Cat) smaller.

I guess we need to overwrite the left padding of the button inside the dropdown. I tried to put marginLeft: "-10px" and paddingLeft: "-10px" in the style of FluentProvider or Dropdown, but it did not work.

Could anyone help?

CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx

import {
  FluentProvider,
  webLightTheme,
  makeStyles,
  shorthands
} from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons(/* optional base url */);
const useStyles = makeStyles({
  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 land = ["Cat", "Dog", "Ferret", "Hamster"];
  const styles = useStyles();
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div style={{ flexBasis: "auto" }}>
        <span style={{ lineHeight: "2.7rem" }}>Title</span>
      </div>
      <div style={{ display: "flex" }}>
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Back" }}
          ariaLabel="Back"
          text="Button 1"
          disabled={false}
          checked={false}
        />
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Up" }}
          text="Button 2"
          disabled={false}
          checked={false}
        />

        <FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
          <Dropdown
            className={styles.dropdown}
            style={{
              minWidth: "auto",
              display: "flex"
            }}
            defaultSelectedOptions={["Cat"]}
            {...props}
          >
            <OptionGroup label="Land">
              {land.map((option) => (
                <Option key={option} disabled={option === "Ferret"}>
                  {option}
                </Option>
              ))}
            </OptionGroup>
          </Dropdown>
        </FluentProvider>
      </div>
    </div>
  );
};

Answer 1

There might be many approaches, perhaps try specify styles for Dropdown button in makeStyles and pass it to the button. The value in below example can be further adjusted to suit the use case.

Forked demo with modification: codesandbox

const useStyles = makeStyles({
  dropdown: {
    // removes default border around the dropdown
    ...shorthands.borderWidth(0),
    // removes the blue bottom border when the dropdown is open
    "::after": {
      borderBottomWidth: 0
    }
  },
  // 👇 styles for the dropdown button
  button: {
    paddingLeft: "0px"
  }
});

Pass the styles to the button of Dropdown:

<Dropdown
  className={styles.dropdown}
  style={{
    minWidth: "auto",
    display: "flex",
  }}
  defaultSelectedOptions={["Cat"]}
  // 👇 pass styles to the button
  button={{ className: styles.button }}
  {...props}
>
...