S2 quiet Picker menu is always 192px wide: its width calc() has no unit

Abierto Apto para principiantes
  • ¿Algo no está bien?
#10,909 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
Menos de una hora
Aptitud para principiantes
88/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, react, typescript
Área
frontend

Línea de trabajo

El valor incorrecto es la entrada isQuiet dentro del estilo width de los styles del Popover en packages/@react-spectrum/s2/src/Picker.tsx, y la misma expresión calc(var(--trigger-width) - 24) aparece en packages/@react-spectrum/s2/src/TabsPicker.tsx. Añade px al 24 en ambos archivos, luego recompila y comprueba la reproducción: un Picker quiet de 300px de ancho debería abrir un menú de 276px con sus opciones en una sola línea.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Provide a general summary of the issue here

A quiet S2 Picker's menu is meant to be its field's width less 24px, but the CSS for that width has no unit: calc(var(--trigger-width) - 24). Browsers drop the declaration as invalid, so every quiet menu falls back to its 192px minimum width. In a wider quiet Picker, the menu is much narrower than the field and its options wrap. TabsPicker has the same expression.

🤔 Expected Behavior?

A quiet Picker 300px wide opens a menu 276px wide (300 - 24), and its options fit on one line.

😯 Current Behavior

The menu is 192px wide whatever the field's width, and longer options wrap onto two or three lines. Measured in the reproduction below, with the same 300px Picker side by side:

Picker Field Menu Option heights
Standard 300px 300px 32, 32, 50
Quiet 300px 192px 32, 50, 68

The cause is the arbitrary value in the Popover's styles in packages/@react-spectrum/s2/src/Picker.tsx:

width: {
  default: '--trigger-width',
  isQuiet: '[calc(var(--trigger-width) - 24)]'
}

It compiles to .ZbWuche17 { width: calc(var(--trigger-width) - 24); } in dist/private/Picker.css. A calc() that subtracts a unitless number from a length is invalid, so the browser ignores the rule and only minWidth: 192 applies. packages/@react-spectrum/s2/src/TabsPicker.tsx has the same value, width: 'calc(var(--trigger-width) - 24)', which also ends up in dist/private/TabsPicker.css.

💁 Possible Solution

Add the unit in both files:

isQuiet: '[calc(var(--trigger-width) - 24px)]'

width: 'calc(var(--trigger-width) - 24px)'

Changing - 24 to - 24px in the built dist/private/Picker.css and dist/private/TabsPicker.css fixes the reproduction: the quiet menu becomes 276px and its options fit on one line (heights 32, 32, 50, the same as the standard Picker). Both files define the same class, so both need the change.

🔦 Context

Our create form uses quiet Pickers that keep their field's width once a value is chosen, as values in a document. Their menus came out narrower than the fields, with options like "Experience Data Model" wrapping onto two lines. We work around it with an app stylesheet rule that sets the menu's width while a quiet Picker is open.

🖥️ Steps to Reproduce

A minimal Vite app.

package.json:

{
  "name": "s2-quiet-picker-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite" },
  "dependencies": {
    "@react-spectrum/s2": "1.7.1",
    "react": "^19.2.7",
    "react-dom": "^19.2.7"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^6.0.2",
    "unplugin-parcel-macros": "^0.2.0",
    "vite": "^8.0.16"
  }
}

vite.config.js:

import react from "@vitejs/plugin-react";
import macros from "unplugin-parcel-macros";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [macros.vite(), react()],
  optimizeDeps: { exclude: ["@react-spectrum/s2/style"] },
});

index.html:

<!doctype html>
<html lang="en"><body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body></html>

src/main.jsx:

import "@react-spectrum/s2/page.css";
import { Picker, PickerItem, Provider } from "@react-spectrum/s2";
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
import { createRoot } from "react-dom/client";

// The same Picker, standard and quiet, with its longest option chosen. The
// quiet Picker is as wide as its value, and its menu should be that width
// less 24px; it's always 192px instead, and the options wrap.
function App() {
  return (
    <Provider background="base">
      <div style={{ display: "flex", gap: 48, padding: 24 }}>
        {[false, true].map((isQuiet) => (
          <Picker
            key={String(isQuiet)}
            label={isQuiet ? "Quiet" : "Standard"}
            isQuiet={isQuiet}
            defaultSelectedKey="genai"
            styles={style({ width: 300 })}
          >
            <PickerItem id="standard">Standard Data Model</PickerItem>
            <PickerItem id="experience">Experience Data Model</PickerItem>
            <PickerItem id="genai">Adobe Experience Platform Web Service Data Model</PickerItem>
          </Picker>
        ))}
      </div>
    </Provider>
  );
}

createRoot(document.getElementById("root")).render(<App />);
  1. Run npm install, then npm run dev.
  2. Open the Standard Picker: its menu is as wide as the field, 300px.
  3. Open the Quiet Picker: its menu is 192px wide, and "Experience Data Model" and the long option wrap.
  4. In DevTools, the menu's width: calc(var(--trigger-width) - 24) declaration is crossed out as invalid.
Version

@react-spectrum/s2 1.7.1 (the same code is on main)

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

macOS

🧢 Your Company/Team

Adobe / Event Telemetry

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 19 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.