@splunk/react-ui 5.0.0-beta.5 → 5.0.0-rc.1

package/MIGRATION.v5.mdx

@@ -483,4 +483,55 @@ we have deprecated the `anchor` prop.
 Replace all usage of the `anchor` prop with passing in the `Anchor` component to the `title` prop:
 ```jsx
     <Card.Header title={<Anchor name="Title">Title</Anchor>} />
-```
+```
+
+## Deprecated `Popover`'s `"inverted"` value of the `appearance` prop
+
+### Change
+
+`Popover`'s `"inverted"` value of the `appearance` prop has been deprecated and will be removed in the next major version.
+
+### Context
+
+The inverted appearance was deprecated to ensure the Popover background aligns with the color scheme, i.e. Popover should be light in light mode and dark in dark mode.
+
+### Migration steps
+Replace all usage of Popover's `appearance="inverted"` with `appearance="normal"` (default). 
+If teams need to keep inverted Popovers they can use `backgroundColorFloating` and `contentColorInverted`. Otherwise Popover uses `backgroundColorPopup`.
+```jsx
+const StyledContent = styled.div`
+    background-color: ${variables.backgroundColorFloating};
+    color: ${variables.contentColorInverted};
+`;
+
+return (
+    <Popover>
+        <StyledContent>Popover content</StyledContent>
+    </Popover>
+)
+```
+
+## `Button`'s `label` prop no longer sets `label` attribute
+
+### Change
+`Button`'s `label` prop no longer sets HTML attribute `label` on the underlying button element.
+
+### Context
+In previous versions, the `label` prop, which sets the text on the Button, was also passed as a `label` HTML attribute which is invalid HTML for a `<button>`. This has been removed.
+
+### Migration steps
+Replace usages of `label` selector in tests with a different suitable query e.g. replace `querySelector('[label="Save"]')` with `getByText('Save')`.
+
+## `Color`'s test hook `[data-test="color"]` moved to root and `[data-test="toggle-swatch"]` added to toggle swatch
+
+### Change
+
+`Color`'s test hook `[data-test="color"]` has been moved to the root `div` element and a new test hook `[data-test="toggle-swatch"]` has been added to the toggle swatch.
+
+### Context
+
+`Color`'s test hook `[data-test="color"]` was incorrectly documented as the root of the component but was actually set on the toggle swatch.
+
+### Migration steps
+If the test hook needs to be on the root element of `Color`, use `[data-test="color"]`.
+If the test hook was being used to interact with the toggle swatch, replace usage of `[data-test="color"]` with `[data-test="toggle-swatch"]`.