[Tabs]: Allow smaller gap between tab-titles · Esri/calcite-design-system

(4 commenti) (0 reazioni) (0 assegnatari)TypeScript (88 fork)auto 404

ArcGIS Scene Viewerc-tabcalcite-componentscalcite-design-tokensenhancementestimate - 2good first issueimpact - p3 - not time sensitivep - low

Metriche repository

Star: (367 stelle)
Metriche merge PR: (Merge medio 22g 2h) (74 PR mergiate in 30 g)

Descrizione

monday.com sync: #11038671226

Check existing issues

I have checked for existing issues to avoid duplicates

Which Component

Tab

Description

Proposed: allow the user to adjust the gap between tab-titles

(e.g. by exposing --calcite-internal-tab-nav-gap?)

Acceptance Criteria

let the user reduce the gap – or reduce the gap according to width – to enhance compact layouts

Relevant Info

No response

Example Use Case

We use calcite-tabs in the header of "Scene tools" in Scene Viewer. This is a compact, fixed-width UI, with 5 icon-only tab-titles. The whole calcite-tab-nav is 248px wide.

With the gap between tab-titles being fixed to --calcite-internal-tab-nav-gap the width of each tab is limited to 25px

Reducing the gap would make the buttons more easy to click

E.g.

Priority impact

impact - p3 - not time sensitive

Calcite package

@esri/calcite-components
@esri/calcite-components-react
@esri/calcite-design-tokens
@esri/calcite-ui-icons
@esri/eslint-plugin-calcite-components

Esri team

ArcGIS Scene Viewer

Guida contributor

Direzione di ricerca: Esamina le proprietà personalizzate CSS del componente Tabs, in particolare ` calcite internal tab nav gap`, e determina come renderle configurabili dall'utente o regolabili in base alla larghezza del contenitore.
Tech stack: typescriptcss
Dominio: frontend
Tipo issue: Funzionalità
Difficoltà: 2
Tempo stimato: Mezza giornata
Stato attività: Nuova
Chiarezza: Chiara
Prerequisiti: CSSWeb Components
Adatta ai principianti: 85