@splunk/react-ui 5.2.0 → 5.4.0

package/Link.js

@@ -99,7 +99,7 @@
     f.pickVariant)("$appearance", {
         inline: (0, c.css)([ "text-decoration:underline;" ]),
         standalone: (0, c.css)([ "font-weight:", ";" ], f.variables.fontWeightSemiBold)
-    }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorDisabled);
+    }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorAccentWeak);
     // CONCATENATED MODULE: ./src/Link/Link.tsx
     function y() {
         return y = Object.assign ? Object.assign.bind() : function(e) {
@@ -142,19 +142,19 @@
         openInNewContext: a().oneOfType([ a().bool, a().string ]),
         to: a().string
     };
-    var S = (0, s._)("(Opens new window)");
+    var k = (0, s._)("(Opens new window)");
     /**
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
- */    var k =  r().forwardRef((function(e, 
+ */    var S =  r().forwardRef((function(e, 
     // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
     n) {
         var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.tag, f = p === void 0 ? "a" : p, b = e.to, g = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "tag", "to" ]);
         // @docs-props-type LinkPropsBase
-                var m = typeof u === "string" ? u : S;
+                var m = typeof u === "string" ? u : k;
         // Ensure `Link` always renders as an `a` (unless overriden by `tag`) by passing a value to Clickable,
         // using '' if disabled or the to is not passed.
-                var O = s && "" || b && b || "";
+                var O = f !== "button" ? s && "" || b && b || "" : undefined;
         
         return r().createElement(h, y({
             "data-test": "link",
@@ -168,8 +168,8 @@
             tag: f
         }), a, u &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, m)));
     }));
-    k.propTypes = x;
-    /* harmony default export */    const C = k;
+    S.propTypes = x;
+    /* harmony default export */    const C = S;
     // forwardRef appears to prevent TS from inferring LinkProps in components that import Link
     // so we need to export it separately to prevent the TS build from failing with:
     // "... has or is using name 'LinkPropsBase' from external module "...packages/react-ui/src/Link/Link" but cannot be named."

package/MIGRATION.md

@@ -2,6 +2,33 @@
 
 This document lists migration guidance for new features and breaking changes.
 
+## 5.3.0
+
+### `Switch`'s `appearance="checkbox"` prop has been deprecated in favor of new `Checkbox` component.
+
+#### Change
+### `Switch`'s `appearance="checkbox"` prop has been deprecated and will be removed in the next major verion.
+
+#### Context
+The `Switch` component combines two different components - a checkbox and a toggle. While superficially similar in that they both provide a boolean control, they are semantically different controls.
+
+* `appearance="toggle"` is semantically a button, and should have an immediate effect
+* `appearance="checkbox"` is semantically a checkbox, and should not take effect until a form submission or similar action has been taken
+
+Additionally, there are several properties (error, indeterminate state) that exist as props on `Switch` despite only being supported when `appearance="checkbox"`.
+
+Given this, we are introducing a new `<Checkbox>` component that can replace `<Switch appearance="checkbox">`.
+
+#### Migration steps
+* Replace `<Switch appearance="checkbox">` with `<Checkbox />`, and update the following props:
+    * replace `onClick` with `onChange`
+      * note that `onChange` reports the new state of the `Checkbox`, whereas `onClick` reported the old state of the `Switch`
+    * replace `toggleRef` with `inputRef`
+    * replace `selected` with `checked`
+    * replace `selected="some"` with `checked="indeterminate"`
+    * replace `selectedLabel`, `someSelectedLabel`, or `unselectedLabel` with an `aria-label` that matches `checked`
+        * consider whether or not these three props are necessary, and if a visible label can be used instead
+
 ## 5.0.0
 
 ### Component spacing