Dropdown - Menu ( options size fit )

[hanoj-budime]

Describe the bug
Dropdowm menu options should fit based on content length.

---

To Reproduce
Include steps to reproduce the behaviour.

() => {
  const selectOption = (value) => {
    console.log(value);
  };
  const options = [
    {
      value: 1,
      label: "Android",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcDropdown
        icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 360c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zm0-160c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zM120 96c0 30.9-25.1 56-56 56S8 126.9 8 96S33.1 40 64 40s56 25.1 56 56z"/></svg>}
        caretHidden={true}
        options={options}
        onSelectOption={selectOption}
        size="small"
        padding="xxsmall"
      ></DxcDropdown>
    </DxcInset>
  );
}

Example:

1. Create a new React App using create-react-app.
2. Install the @dxc-technology\halstack-react dependencies and run the app.
3. Click on '...'.
4. Scroll down to '...'.
5. See the error.

Expected behaviour

https://codesandbox.io/s/dropdown-432qn0?file=/index.html

---

Screenshots
If applicable, add screenshots to help explain your problem.

[GomezIvann]

Hi @HanojHanu.

Your request seems fair. In the past, we designed the component with the idea of a button and a menu with the same width, but this premise seems to fit better a select component rather than a dropdown, which is a navigational component and the content of its options is crucial. Anyways, we will study this as part of the component re-design that will take place shortly (#835). You can track our progress there!

To conclude, be careful with the padding prop in your code snippet as it does not exist in the component.

Thanks for the feedback!

[hanoj-budime]

Yes, just tring padding to remove unwanted space around my 3-dot menu..

[GomezIvann]

That space is because you are adding a fixed size (size="small"). Try to remove it and the icon should be centred alone.

[hanoj-budime]

That space is because you are adding a fixed size (size="small"). Try to remove it and the icon should be centred alone.

You see this around this 3-dot-memu icon there is some padding or marging still i don't want to wast that much space around it..

If needed i'll customize at my end.

For example
https://codesandbox.io/s/dropdown-432qn0?file=/index.html

[GomezIvann]

The space around the icon is a design decision and can't be removed. As I said, this component anatomy was inherited from Material UI and is a bit outdated, we have planned a re-design at a certain point in the future and we will consider this scenario.