@splunk/react-ui 4.26.0 → 4.27.0

package/Color.js

@@ -331,7 +331,9 @@
     var le = j().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
-    })([ "", ";margin-bottom:", ";" ], P.mixins.reset("block"), P.variables.spacingQuarter);
+    })([ "", ";", "" ], P.mixins.reset("block"), (0, P.pick)({
+        enterprise: (0, I.css)([ "margin-bottom:", ";" ], P.variables.spacingQuarter)
+    }));
     var ie = j().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"

package/ControlGroup.js

@@ -677,6 +677,7 @@
                 
                 return n().createElement(O, E({
                     "data-test": "control-group",
+                    "data-test-required": m,
                     $error: Q
                 }, B),  n().createElement(T.Provider, {
                     value: this.getContextValue()

package/MIGRATION.mdx

@@ -5,6 +5,36 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.27.0
+
+### New `SingleOpenPanelGroup` API for `CollapsiblePanel`
+
+#### Change
+A new API, `SingleOpenPanelGroup`, has been added to `CollapsiblePanel`. 
+
+#### Context
+`Accordion` and `CollapsiblePanel` have similar style and behavior. Their only behavioral difference was that `Accordion` would only allow one panel to be open at a time, whereas `CollapsiblePanel` would allow multiple panels to be open at a time.
+
+Although they looked and behaved similarly, the APIs of `Accordion` and `CollapsiblePanel` were inconsistent. `inset` was supported in `Accordion` but not `CollapsiblePanel`; while actions were supported in `CollapsiblePanel` but not `Accordion`. Lastly, the components had different numbers of event handlers with different signatures. 
+
+These differences could lead to confusion on which component to use. It could also lead to using one component for a certain feature and then adding custom code to duplicate the functionality from the other component. 
+
+Given these behavioral and technical differences, `Accordion` will be deprecated in the next major version and `CollapsiblePanel` will support all the features of `Accordion` through its `SingleOpenPanelGroup` API. You will still be able to use `Accordion` in the next major version, but we recommend following the migration steps below at your earliest convenience.
+
+#### Migration steps
+Replace usage of `Accordion` with the `SingleOpenPanelGroup` component exported from `CollapsiblePanel`. See the `SingleOpenPanelGroup` examples in `CollapsiblePanel`'s documentation.
+
+### Deprecated `onRequestClose` and `onRequestOpen` callbacks and added new `onChange` callback for `CollapsiblePanel`
+
+#### Change
+`CollapsiblePanel`'s `onRequestClose` and `onRequestOpen` callbacks have been deprecated and will be removed in the next major version. A new callback `onChange` has been added to `CollapsiblePanel`. 
+
+#### Context
+An `onChange` callback is more consistent with other components in `@splunk/react-ui`. 
+
+#### Migration steps
+Replace `onRequestClose` and `onRequestOpen` callbacks with the new `onChange` callback when using a controlled `CollapsiblePanel`. See the Controlled example in `CollapsiblePanel`'s documentation.
+
 ## 4.26.0
 
 ### New `returnFocus` prop for `Modal`

package/Modal.js

@@ -105,8 +105,7 @@
     var j = x()(S()).withConfig({
         displayName: "BodyStyles__StyledBox",
         componentId: "lv54z7-0"
-    })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}" ], (0, 
-    w.pick)({
+    })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;" ], (0, w.pick)({
         enterprise: w.variables.backgroundColor,
         prisma: w.variables.backgroundColorDialog
     }), (0, w.pick)({
@@ -364,15 +363,25 @@
     var Z = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
         componentId: "sc-1y722ut-3"
-    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";color:", ";", "" ], w.mixins.reset("block"), w.variables.fontWeightSemiBold, w.variables.contentColorActive, (0, 
+    })([ "", ";", " margin:0;overflow-wrap:break-word;" ], w.mixins.reset("block"), (0, 
     w.pick)({
-        enterprise: (0, g.css)([ "line-height:22px;" ]),
-        prisma: (0, g.css)([ "line-height:24px;" ])
+        enterprise: (0, g.css)([ "", "" ], w.mixins.typography({
+            size: 20,
+            weight: "semiBold",
+            color: "active",
+            lineHeight: 22
+        })),
+        prisma: (0, g.css)([ "", "" ], w.mixins.typography({
+            size: 20,
+            weight: "semiBold",
+            color: "active",
+            lineHeight: 24
+        }))
     }));
     var ee = x().div.withConfig({
         displayName: "HeaderStyles__StyledSubtitle",
         componentId: "sc-1y722ut-4"
-    })([ "", ";font-size:14px;overflow-wrap:break-word;line-height:", ";" ], w.mixins.reset("block"), w.variables.lineHeight);
+    })([ "", ";overflow-wrap:break-word;" ], w.mixins.reset("block"));
     var te = x().div.withConfig({
         displayName: "HeaderStyles__StyledButtonsWrapper",
         componentId: "sc-1y722ut-5"