diff --git a/renderers/react/CHANGELOG.md b/renderers/react/CHANGELOG.md index 3762394b6..25878eda2 100644 --- a/renderers/react/CHANGELOG.md +++ b/renderers/react/CHANGELOG.md @@ -1,5 +1,7 @@ ## Unreleased +- (v0_8) Exclude SVG elements and descendants from CSS reset to restore SVG rendering. [#1252](https://github.com/google/A2UI/pull/1252) + - **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`. - **BREAKING CHANGE**: Renamed `createBinderlessComponent` to `createBinderlessComponentImplementation`. - **BREAKING CHANGE**: Removed `minimalCatalog`. diff --git a/renderers/react/src/v0_8/styles/reset.ts b/renderers/react/src/v0_8/styles/reset.ts index c6e38ced9..4b8c0a92a 100644 --- a/renderers/react/src/v0_8/styles/reset.ts +++ b/renderers/react/src/v0_8/styles/reset.ts @@ -32,7 +32,7 @@ */ export const resetStyles: string = ` @layer a2ui-reset { - :where(.a2ui-surface) :where(*) { + :where(.a2ui-surface) :where(*:not(svg, svg *:not(foreignObject *))) { all: revert; } } diff --git a/renderers/react/tests/v0_8/unit/components/SvgReset.test.tsx b/renderers/react/tests/v0_8/unit/components/SvgReset.test.tsx new file mode 100644 index 000000000..26f5143a6 --- /dev/null +++ b/renderers/react/tests/v0_8/unit/components/SvgReset.test.tsx @@ -0,0 +1,39 @@ +/** + * Copyright 2026 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {describe, it, expect} from 'vitest'; +import {render} from '@testing-library/react'; +import React from 'react'; +import {A2UIProvider} from '../../../../src/v0_8'; +import {resetStyles} from '../../../../src/v0_8/styles/reset'; +describe('SVG Reset Exclusion', () => { + it('should have the correct CSS selector in resetStyles', () => { + expect(resetStyles).toContain(':not(svg, svg *:not(foreignObject *))'); + }); + it('should allow presentational attributes on SVG elements', () => { + const {container} = render( + +
+ + + +
+
, + ); + const svg = container.querySelector('svg'); + expect(svg).toBeInTheDocument(); + expect(svg).toHaveAttribute('fill', 'red'); + }); +});