kvnli216 opened a new pull request, #76842: URL: https://github.com/apache/airflow/pull/76842
Today a plugin tab looks just like a core tab. Plugins can already set an icon for their tab (`icon` and `icon_dark_mode`), but the icon only appears when the tab bar is narrower than 600px and hides the labels. At normal widths you only see the tab's name, so you can't tell which tabs come from a plugin. This adds an optional `show_icon_with_label` key to `external_views` and `react_apps` entries. When it is `True`, the tab shows its icon beside its label at full width, so plugin authors can make their tabs visually distinct from core tabs and from other plugins. It reuses what plugins already provide: - The icon is the existing `icon` / `icon_dark_mode` pair, picked by color mode the same way as today. - Below 600px the tab still collapses to the icon alone, so the same icon shows at every width. - The key defaults to `False`. Core tabs and existing plugins look exactly as before. - It has no effect without an `icon`. The generic plug icon used for the collapsed bar is never shown beside a label. - When the label is visible, the icon is hidden from screen readers, so the tab's name is read once. - A tab with its icon is measured with it, so the More menu still moves exactly the tabs that do not fit. Older Airflow versions accept and ignore the key, so a plugin can set it without checking the Airflow version. The last commit stops the tabs from shifting sideways when one is selected. The active tab is bold, and bold text is wider, so selecting a tab widened it and pushed every tab after it 5 to 6px. Each label now reserves its bold width with an invisible, zero-height bold copy in a `::after` pseudo-element. The copy lives in CSS, so the label text appears once in the DOM. ### Demo A local plugin with two run tabs that reuse the icons of the core Asset Events and Code tabs: "Warehouse" sets `show_icon_with_label`, "Source" does not. Light mode at full width, clicking between tabs, the tab bar at 600px or less, then dark mode. <img width="1000" height="500" alt="pr-plugin-tab-icon-demo-v2" src="https://github.com/user-attachments/assets/baff346f-ed7c-4d92-8572-9b7ef3578ac1"; /> --- ##### Was generative AI tooling used to co-author this PR? - [X] Yes — Claude Code (Opus 5.5) Generated-by: Claude Code (Opus 5.5) following [the guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
