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

package/{MIGRATION.mdx → MIGRATION.md}

@@ -1,11 +1,8 @@
-import Link from '@splunk/react-ui/Link';
-import Table from '@splunk/react-ui/Table';
-
 # Migration
 
 This document lists migration guidance for new features and breaking changes.
 
-## 4.44.0 
+## 4.44.0
 
 ### `ButtonGroup` role changed to `group`
 
@@ -21,7 +18,7 @@ This created an unexpected user experience for keyboard and screen reader users.
 
 #### Migration steps
 
-If `role="group"` is not desired: 
+If `role="group"` is not desired:
 * consider using `RadioBar` which supports `role="menubar"`
 * implement either the [Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) or [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) pattern according to WCAG guidelines using `ButtonGroup`
 * contact the Design System team to make a feature request based on your use case.
@@ -576,44 +573,17 @@ Themes has new variables in version 4.17.0 that support all of the weight values
 This aligns with the existing API for `variant` in this component.
 
 #### Migration steps
-Convert any usage of a number to the keyword value using the following table based on <Link to="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping" openInNewContext>MDN</Link>:
-
-<Table>
-    <Table.Head>
-        <Table.HeadCell>Number</Table.HeadCell>
-        <Table.HeadCell>Keyword</Table.HeadCell>
-    </Table.Head>
-    <Table.Body>
-        <Table.Row key={300}>
-            <Table.Cell>{300}</Table.Cell>
-            <Table.Cell>light</Table.Cell>
-        </Table.Row>
-        <Table.Row key={400}>
-            <Table.Cell>{400}</Table.Cell>
-            <Table.Cell>normal</Table.Cell>
-        </Table.Row>
-        <Table.Row key={500}>
-            <Table.Cell>{500}</Table.Cell>
-            <Table.Cell>semiBold</Table.Cell>
-        </Table.Row>
-        <Table.Row key={600}>
-            <Table.Cell>{600}</Table.Cell>
-            <Table.Cell>semiBold</Table.Cell>
-        </Table.Row>
-        <Table.Row key={700}>
-            <Table.Cell>{700}</Table.Cell>
-            <Table.Cell>bold</Table.Cell>
-        </Table.Row>
-           <Table.Row key={800}>
-            <Table.Cell>{800}</Table.Cell>
-            <Table.Cell>extraBold</Table.Cell>
-        </Table.Row>
-           <Table.Row key={900}>
-            <Table.Cell>{900}</Table.Cell>
-            <Table.Cell>heavy</Table.Cell>
-        </Table.Row>
-    </Table.Body>
-</Table>
+Convert any usage of a number to the keyword value using the following table based on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS):
+
+| Number | Keyword   |
+| ------ | --------- |
+|    300 | light     |
+|    400 | normal    |
+|    500 | semiBold  |
+|    600 | semiBold  |
+|    700 | bold      |
+|    800 | extraBold |
+|    900 | heavy     |
 
 For example, convert `<Typography as="p" weight={700} />` to `<Typography as="p" weight='bold' />`.
 

package/{MIGRATION.v5.mdx → MIGRATION.v5.md}

@@ -483,4 +483,70 @@ 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"]`.
+
+## All components that previously used `KeyboardEvent`'s deprecated `keyCode` property now use `KeyboardEvent`'s `key` property.
+
+### Change
+
+Switched all components that previously used `KeyboardEvent`'s deprecated `keyCode` property to use its `key` property instead.
+
+### Context
+
+Since current testing library tooling (such as `userEvent`) no longer provides a keyCode along with synthetic keyboard events,
+upgrading testing libaries could cause tests to break. By removing the usage of `keyCode` in our codebase, this enables testing libary upgrades.
+
+### Migration steps
+
+Use `KeyboardEvent`'s `key` property instead `keyCode` property to identify key presses.

package/Markdown.js

@@ -756,12 +756,11 @@
             // Languages are passed from `react-markdown` via `classname`
             // Follows react-markdown's README recommendation for handling syntax highlighting
             // https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
-                        var d = /language-(\w+)/.exec(a);
-            var p = d && d[1] || undefined;
+                        var d = (a === null || a === void 0 ? void 0 : a.replace("language-", "")) || undefined;
             return l ? l(Ne({
-                language: p
+                language: d
             }, e)) :  t().createElement(F, Ue({
-                language: p
+                language: d
             }, e));
         }), [ l, o ]);
         var O = (0, n.useMemo)((function() {