@cloudflare/component-toggle 4.1.0 → 4.2.3

package/CHANGELOG.md

@@ -3,7 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [4.1.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.0.5...@cloudflare/component-toggle@4.1.0) (2021-09-14)
+## [4.2.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.2...@cloudflare/component-toggle@4.2.3) (2021-09-20)
+
+**Note:** Version bump only for package @cloudflare/component-toggle
+
+
+
+
+
+## [4.2.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.1...@cloudflare/component-toggle@4.2.2) (2021-09-17)
+
+
+### Bug Fixes
+
+* **component-toggle:** UI-4634 Update background color ([dabbd14](http://stash.cfops.it:7999/fe/stratus/commits/dabbd14))
+
+
+
+
+
+## [4.2.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.0...@cloudflare/component-toggle@4.2.1) (2021-09-15)
+
+**Note:** Version bump only for package @cloudflare/component-toggle
+
+
+
+
+
+# [4.2.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.0.5...@cloudflare/component-toggle@4.2.0) (2021-09-15)
 
 
 ### Bug Fixes

package/dist/Toggle.d.ts

@@ -322,6 +322,7 @@ declare type ToggleProps = Omit<ComponentProps<typeof Container>, 'value' | 'typ
     value?: boolean;
     onChange: ((value: boolean) => void | Promise<void>) | false;
     labelledBy?: string;
+    name?: string;
     invalid?: boolean;
     height?: number;
     color?: string;

package/es/Toggle.js

@@ -95,7 +95,7 @@ const ToggleIcon = createComponent(({
     boxSizing: 'border-box',
     width: `${controlSize}px`,
     height: `${controlSize}px`,
-    backgroundColor: theme.colors.white,
+    backgroundColor: theme.colors.background,
     borderRadius: `${controlSize * 2}px`,
     boxShadow: `0 0 2px 1px ${theme.colors.gray[2]}`,
     transition
@@ -114,9 +114,10 @@ const Toggle = (_ref) => {
       color = _ref.color,
       borderColor = _ref.borderColor,
       invalid = _ref.invalid,
+      name = _ref.name,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 24 : _ref$height,
-      rest = _objectWithoutProperties(_ref, ["id", "value", "labelledBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "height"]);
+      rest = _objectWithoutProperties(_ref, ["id", "value", "labelledBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "name", "height"]);
 
   const controlSize = height - 4;
   return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
@@ -130,6 +131,7 @@ const Toggle = (_ref) => {
     id: id,
     type: "checkbox",
     checked: value,
+    name: name,
     onChange: disabled || !onChange ? undefined : e => onChange(e.target.checked),
     "aria-labelledby": labelledBy,
     disabled: disabled,

package/lib/Toggle.js

@@ -111,7 +111,7 @@ var ToggleIcon = (0, _styleContainer.createComponent)(function (_ref2) {
       boxSizing: 'border-box',
       width: "".concat(controlSize, "px"),
       height: "".concat(controlSize, "px"),
-      backgroundColor: theme.colors.white,
+      backgroundColor: theme.colors.background,
       borderRadius: "".concat(controlSize * 2, "px"),
       boxShadow: "0 0 2px 1px ".concat(theme.colors.gray[2]),
       transition: transition
@@ -132,9 +132,10 @@ var Toggle = function Toggle(_ref3) {
       color = _ref3.color,
       borderColor = _ref3.borderColor,
       invalid = _ref3.invalid,
+      name = _ref3.name,
       _ref3$height = _ref3.height,
       height = _ref3$height === void 0 ? 24 : _ref3$height,
-      rest = _objectWithoutProperties(_ref3, ["id", "value", "labelledBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "height"]);
+      rest = _objectWithoutProperties(_ref3, ["id", "value", "labelledBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "name", "height"]);
 
   var controlSize = height - 4;
   return /*#__PURE__*/_react.default.createElement(Container, _extends({}, rest, {
@@ -148,6 +149,7 @@ var Toggle = function Toggle(_ref3) {
     id: id,
     type: "checkbox",
     checked: value,
+    name: name,
     onChange: disabled || !onChange ? undefined : function (e) {
       return onChange(e.target.checked);
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-toggle",
   "description": "Cloudflare Toggle Component",
-  "version": "4.1.0",
+  "version": "4.2.3",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,12 +11,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^6.2.0",
-    "@cloudflare/elements": "^1.10.0",
-    "@cloudflare/intl-react": "^1.8.112",
+    "@cloudflare/component-icon": "^6.4.0",
+    "@cloudflare/elements": "^1.11.1",
+    "@cloudflare/intl-react": "^1.8.114",
     "@cloudflare/style-const": "^2.4.34",
-    "@cloudflare/style-container": "^7.3.55",
-    "@cloudflare/types": "^6.8.19",
+    "@cloudflare/style-container": "^7.4.0",
+    "@cloudflare/types": "^6.8.21",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
@@ -33,5 +33,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "1e801a7ac1f15d9c14896523413211fd12ba83f5"
+  "gitHead": "cf3ff5236b019dfa3a85d0e5d8a5ba3adf846eb5"
 }