🐛 fix(): introduce Shadow DOM to fix slot changes #1845
Description
Current Behavior
When using the component, updating the button text directly (without wrapping it in a React Fragment) causes the button to lose its styles (e.g., colors, padding, etc.). The text updates, but the button no longer looks styled. If the button text is wrapped in a React Fragment (<>...</>), the styles are preserved.
Expected Behavior
The should retain its styles when the button text is updated, regardless of whether the text is wrapped in a React Fragment.
Steps to Reproduce
- Render a with dynamic text as its child (e.g. {buttonText}).
- Update the button text on click.
- Observe that the button loses its styles after the text changes.
- Wrap the button text in a React Fragment (<>{buttonText}</>) and observe that the styles are preserved.
import "@baloise/ds-styles/css/all.css";
import "./styles.css";
import { BalButton, useBaloiseDesignSystem } from "@baloise/ds-react";
import { useState } from "react";
export default function App() {
useBaloiseDesignSystem();
const [buttonText, setButtonText] = useState<string>("Save");
return (
<div className="App">
<h2 className="title text-xx-large">Button without fragment</h2>
<BalButton
onClick={() =>
setButtonText(buttonText === "Save" ? "Loading" : "Save")
}
>
{buttonText}
</BalButton>
<hr />
<h2 className="title text-xx-large">Button with fragment</h2>
<BalButton
onClick={() =>
setButtonText(buttonText === "Save" ? "Loading" : "Save")
}
>
<>{buttonText}</>
</BalButton>
</div>
);
}Version
19.8.2
Browsers
Chrome
Device
Desktop
Code Reproduction URL
https://codesandbox.io/p/sandbox/frhyqq
Additional Information
No response
Code of Conduct
- I agree to follow this project's Code of Conduct