Expose --input-width and --button-width CSS variables on the ComboboxOptions component (#3057)

* add both `--input-width` and `--button-width` to `ComboboxOptions`

* use `--input-width` and `--button-width` in combobox countries example

* update changelog
This commit is contained in:
Robin Malfait
2024-03-26 17:58:19 +01:00
committed by GitHub
parent 000e0c0192
commit 056b311522
3 changed files with 10 additions and 3 deletions
@@ -72,8 +72,8 @@ export default function Home() {
</Combobox.Button>
</span>
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
<div className="absolute mt-1 rounded-md bg-white shadow-lg">
<Combobox.Options className="shadow-xs max-h-60 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
{countries.map((country) => (
<Combobox.Option
key={country}