a2ui-project / a2ui-project/a2ui

The web renderers handle `Image` inconsistently with each other and with the spec

Đang mở
#1,298 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
component: angular renderer component: lit renderer component: react renderer component: specification component: standard catalog specification P2 type: bug type: feature/enhancement
Ngôn ngữ chính
TypeScript
Star
16.4k
Fork
1.3k
Merge trung bình
2 ngày 13 giờ
Pull request đã merge (30 ngày)
134

Mô tả

The three web renderers each implement the basic catalog `Image` differently, leading to visibly different rendered output for the same A2UI input. They also diverge from the spec on the default `fit` value.

| Renderer | Implementation | Default `fit` |
|----------|----------------|---------------|
| React | Bare `` ([Image.tsx#L53](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/react/src/v0_9/catalog/basic/components/Image.tsx#L53)) | `'fill'` ([Image.tsx#L26](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/react/src/v0_9/catalog/basic/components/Image.tsx#L26)) — matches spec |
| Lit | `` inside an `a2ui-image` custom element ([Image.ts#L25](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts#L25), [Image.ts#L87-L93](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts#L87-L93)) with `width: 100%; height: auto` in shadow CSS ([Image.ts#L38-L44](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts#L38-L44)) | `'fill'` inline ([Image.ts#L84](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts#L84)), but the wrapper's `height: auto` might make it visually irrelevant? |
| Angular | Bare `` ([image.component.ts#L37-L44](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/angular/src/v0_9/catalog/basic/image.component.ts#L37-L44)) with `max-width: 100%; height: auto` in component CSS ([image.component.ts#L47-L52](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/angular/src/v0_9/catalog/basic/image.component.ts#L47-L52)) | `'cover'` ([image.component.ts#L78](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/renderers/angular/src/v0_9/catalog/basic/image.component.ts#L78)) — diverges from spec |
| Spec | | `'fill'` ([basic_catalog.json#L62-L67](https://github.com/google/A2UI/blob/c55a37dc783146a607003ff3a3ecda92fbc36ac1/specification/v0_9/json/basic_catalog.json#L62-L67)) |

One consequence of this can be seen in https://github.com/google/A2UI/issues/1297, which is an issue that the React angular has that the Lit and Angular ones don't.

Ideally, we want rendering behavior to be consistent and predictable across renderers, especially ones residing in the same repo and using the same underlying rendering tech (CSS). This is a larger problem that would require a great deal more work to fix and prevent regression for, so I leave it beyond the scope of this issue and focus on `Image` here instead.

We should pick a target behavior for `Image`, document it, and align all three renderers and the spec on it.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Review the linked Image component files in the react, lit, and angular renderer directories to understand the current implementations. Compare them against the spec in specification/v0_9/json/basic_catalog.json. Determine the correct default 'fit' value and consistent rendering behavior. Update the three component files and the spec to align.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, react, typescript
Lĩnh vực
documentation, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
65/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.