fix(webkit): let the host decide surface, size and width in three components #829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

robsongajunior merged 11 commits into main from fix/host-context-wins

Jul 30, 2026

.specs/status-indicator.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -4,9 +4,9 @@ category: feedback
  
    structure: monolithic

    status: implemented

    spec_version: 1

    checksum: 3075d5cccdeaeefd787f9b51f02690a868e0eb969278caea79915517e3943529

    checksum: 39afb38b28af0204ddd14671bc3660e204be647480d82fc10511bf055fc6a53f

    created: 2026-05-22

    last_updated: 2026-05-28

    last_updated: 2026-07-28

    ---

    # Status Indicator — Component Spec

    @@ -55,7 +55,6 @@ _none_
  
    | Region | Token (DESIGN.md) |

    |---|---|

    | typography | .text-body-sm |

    | surface | `var(--bg-surface)` |

    | text | `var(--text-default)` |

    | spacing | `var(--spacing-3)` |

    | shape | `var(--shape-elements)` |

...snapshots__/linux/components-feedback-statusindicator--default--dark-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...snapshots__/linux/components-feedback-statusindicator--default--dark-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...apshots__/linux/components-feedback-statusindicator--default--light-desktop.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...napshots__/linux/components-feedback-statusindicator--default--light-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...napshots__/linux/components-feedback-statusindicator--default--light-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...sual/__image_snapshots__/linux/components-feedback-statusindicator--default.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...snapshots__/linux/components-feedback-statusindicator--loading--dark-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...snapshots__/linux/components-feedback-statusindicator--loading--dark-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...apshots__/linux/components-feedback-statusindicator--loading--light-desktop.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...napshots__/linux/components-feedback-statusindicator--loading--light-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...napshots__/linux/components-feedback-statusindicator--loading--light-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...sual/__image_snapshots__/linux/components-feedback-statusindicator--loading.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

..._snapshots__/linux/components-feedback-statusindicator--status--dark-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

..._snapshots__/linux/components-feedback-statusindicator--status--dark-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...napshots__/linux/components-feedback-statusindicator--status--light-desktop.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...snapshots__/linux/components-feedback-statusindicator--status--light-mobile.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...snapshots__/linux/components-feedback-statusindicator--status--light-tablet.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...isual/__image_snapshots__/linux/components-feedback-statusindicator--status.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/webkit/src/components/data/table/table-search/table-search.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -39,10 +39,10 @@ @@
     <template>
       <InputText
+        size="small"
         v-bind="$attrs"
         :data-testid="testId"
         class="flex-1"
-        size="small"
         :model-value="globalFilter"
         :placeholder="placeholder"
         @update:model-value="setFilter"
@@ Expand Down @@

packages/webkit/src/components/data/table/table.test.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -437,6 +437,33 @@ describe('Table (composition + data-driven)', () => { @@
           expect(bodyCells).toContain('Alpha')
           expect(bodyCells).not.toContain('Charlie')
         })
+        // `size` is bound BEFORE v-bind="$attrs" on the inner InputText, so the
+        // default is a default rather than a hard-code. Bound after, it would
+        // clobber the consumer's value and a search field could never sit level
+        // with a row of large toolbar controls.
+        it('defaults to the small field but lets a consumer override the size', () => {
+          const treeWith = (attrs: string) =>
+            defineComponent({
+              components: { Table, TableSearch },
+              setup: () => ({ rows, columns }),
+              template: `
+                <Table :data="rows" :columns="columns">
+                  <template #toolbar>
+                    <TableSearch ${attrs} />
+                  </template>
+                </Table>
+              `
+            })
+          const bare = render(treeWith(''))
+          const defaulted = within(bare.container).getByTestId('data-table__search')
+          expect(defaulted.closest('[data-size]')?.getAttribute('data-size')).toBe('small')
+          const overridden = render(treeWith('size="large"'))
+          const large = within(overridden.container).getByTestId('data-table__search')
+          expect(large.closest('[data-size]')?.getAttribute('data-size')).toBe('large')
+        })
       })
       describe('story fixtures (composeStories)', () => {
@@ Expand Down @@

packages/webkit/src/components/feedback/status-indicator/status-indicator.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ @@
         :data-testid="testId"
         :data-severity="severity"
         :data-loading="loading || null"
-        class="group inline-flex items-center gap-[var(--spacing-3)] rounded-[var(--shape-elements)] bg-[var(--bg-surface)] p-[var(--spacing-3)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+        class="group inline-flex items-center gap-[var(--spacing-3)] rounded-[var(--shape-elements)] text-body-sm text-[var(--text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
       >
         <Spinner
           v-if="loading"
@@ Expand Down @@

packages/webkit/src/components/layout/global-header/global-header-left.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ @@
       <div
         v-bind="$attrs"
         :data-testid="testId"
-        class="flex min-w-0 shrink-0 items-center justify-end gap-[var(--spacing-xs)]"
+        class="flex min-w-0 shrink items-center justify-end gap-[var(--spacing-xs)]"
       >
         <slot />
       </div>
@@ Expand Down @@