kaxil commented on code in PR #70298:
URL: https://github.com/apache/airflow/pull/70298#discussion_r3736188453
##########
registry/src/css/main.css:
##########
@@ -3170,6 +3170,26 @@ main {
max-width: 16rem;
}
+.capability-filter-toggles {
Review Comment:
`.modules-header` is a flex row with `justify-content: space-between`, no
`flex-wrap`, and no breakpoint, and `.search-wrapper` is `flex: 1; min-width:
0` (line 1021). The two new labels are `white-space: nowrap` and come to
roughly 340px between them, so all of that comes out of the module search box.
At phone widths the search input collapses to about the width of its icon.
`flex-wrap: wrap` on `.modules-header` would sort it.
##########
registry/src/provider-version.njk:
##########
@@ -340,6 +340,16 @@ eleventyComputed:
<section class="modules">
<div class="modules-header">
<h2>Modules</h2>
+ <div class="capability-filter-toggles">
Review Comment:
These render on every version page, but only the `isLatest` branch gets
modules from `modules.json`. Older versions use `pv.versionData.modules`, which
`extract_versions.py` builds by AST and which only carries 7 fields per module:
name, type, import_path, short_description, docs_url, source_url, category. I
checked `registry/src/_data/versions/amazon/9.17.0/metadata.json`: 0 of 370
modules have `supports_durable_execution`, and `supports_deferrable` won't be
there either. So on any page built from those payloads (1349 in the current
`_data/versions` snapshot) both data attributes are `false` and ticking either
box empties the whole grid with no explanation. The badge degraded gracefully
because it just doesn't render, a filter doesn't. Could the toggles be gated on
`pv.isLatest`, or on at least one module qualifying?
##########
registry/src/css/main.css:
##########
@@ -3263,10 +3284,18 @@ main {
font-size: var(--text-xs);
font-weight: var(--font-medium);
border-radius: var(--radius-lg);
+}
+
+.provider-detail-page .modules .module .content h3 .durable-badge {
background: color-mix(in srgb, var(--color-teal-500) 15%, transparent);
color: var(--color-teal-400);
}
+.provider-detail-page .modules .module .content h3 .deferrable-badge {
+ background: color-mix(in srgb, var(--color-blue-500) 15%, transparent);
+ color: var(--color-blue-400);
Review Comment:
`--color-blue-400` (#60a5fa) on a 15% `--color-blue-500` wash is 6.1:1 in
dark mode but 2.14:1 over a white card, at `--text-xs`. The durable badge has
the same issue (1.62:1). Since you've already split the shared rule from the
per-badge colors here, both could use `light-dark()` the way tokens.css and
line 1700 do. `light-dark(var(--color-blue-600), var(--color-blue-400))` gets
light mode to 4.35:1.
--
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]
