@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.5

package/lib/components-react-node/stack/stack.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'SPACING_STEPS', {
+  enumerable: true,
+  get: function () {
+    return _defs.SPACING_STEPS;
+  },
+});
+Object.defineProperty(exports, 'STACK_ORIENTATION', {
+  enumerable: true,
+  get: function () {
+    return _defs.STACK_ORIENTATION;
+  },
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _defs = require('././defs.js');
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-stack'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/text-input/text-input.js

@@ -23,6 +23,18 @@ Object.defineProperty(exports, 'INPUT_SIZE', {
     return _defs.INPUT_SIZE;
   },
 });
+Object.defineProperty(exports, 'INPUT_TOOLTIP_ALIGNMENT', {
+  enumerable: true,
+  get: function () {
+    return _defs.INPUT_TOOLTIP_ALIGNMENT;
+  },
+});
+Object.defineProperty(exports, 'INPUT_TOOLTIP_DIRECTION', {
+  enumerable: true,
+  get: function () {
+    return _defs.INPUT_TOOLTIP_DIRECTION;
+  },
+});
 Object.defineProperty(exports, 'INPUT_TYPE', {
   enumerable: true,
   get: function () {

package/lib/components-react-node/toggle-tip/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';

package/lib/components-react-node/toggle-tip/toggletip.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 exports.propTypes = exports.descriptor = exports.default = void 0;
-var _createReactCustomElementType = _interopRequireWildcard(
+var _createReactCustomElementType = _interopRequireDefault(
   require('../../globals/wrappers/createReactCustomElementType.js')
 );
 var _propTypes = _interopRequireDefault(require('prop-types'));
@@ -22,58 +22,10 @@ var _settings = _interopRequireDefault(
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-function _getRequireWildcardCache(nodeInterop) {
-  if (typeof WeakMap !== 'function') return null;
-  var cacheBabelInterop = new WeakMap();
-  var cacheNodeInterop = new WeakMap();
-  return (_getRequireWildcardCache = function (nodeInterop) {
-    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-  })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-  if (!nodeInterop && obj && obj.__esModule) {
-    return obj;
-  }
-  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
-    return { default: obj };
-  }
-  var cache = _getRequireWildcardCache(nodeInterop);
-  if (cache && cache.has(obj)) {
-    return cache.get(obj);
-  }
-  var newObj = {};
-  var hasPropertyDescriptor =
-    Object.defineProperty && Object.getOwnPropertyDescriptor;
-  for (var key in obj) {
-    if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
-      var desc = hasPropertyDescriptor
-        ? Object.getOwnPropertyDescriptor(obj, key)
-        : null;
-      if (desc && (desc.get || desc.set)) {
-        Object.defineProperty(newObj, key, desc);
-      } else {
-        newObj[key] = obj[key];
-      }
-    }
-  }
-  newObj.default = obj;
-  if (cache) {
-    cache.set(obj, newObj);
-  }
-  return newObj;
-}
 var prefix = _settings.default.prefix;
-var descriptor = {
-  alignment: {},
-  open: {
-    serialize: _createReactCustomElementType.booleanSerializer,
-  },
-};
+var descriptor = {};
 exports.descriptor = descriptor;
-var propTypes = {
-  alignment: _propTypes.default.string,
-  open: _propTypes.default.bool,
-};
+var propTypes = {};
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-toggletip'),

package/lib/components-react-node/ui-shell/header-global-action.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _button = require('../button/button.js');
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = Object.assign({}, _button.descriptor, {});
+exports.descriptor = descriptor;
+var propTypes = Object.assign({}, _button.propTypes, {});
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-header-global-action'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/ui-shell/header-panel.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-header-panel'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/ui-shell/header-side-nav-items.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-header-side-nav-items'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/ui-shell/switcher-divider.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-switcher-divider'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/ui-shell/switcher-item.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-switcher-item'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/ui-shell/switcher.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-switcher'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "publishConfig": {
     "access": "public"
   },
@@ -15,9 +15,8 @@
       "node": "./lib/components-react-node/",
       "default": "./es/components-react/"
     },
-    "./es/components/": {
-      "node": "./lib/components/",
-      "default": "./es/components/"
+    "./es/components/*": {
+      "default": "./es/components/*"
     },
     "./es/globals/": {
       "node": "./lib/globals/",
@@ -69,7 +68,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.27.0",
+    "@carbon/styles": "^1.30.0",
     "flatpickr": "4.6.1",
     "lit": "^2.6.0",
     "lodash-es": "^4.17.21"
@@ -90,8 +89,8 @@
     "@babel/preset-modules": "~0.1.5",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.12.0",
-    "@carbon/icon-helpers": "^10.39.0",
-    "@carbon/icons": "^11.18.0",
+    "@carbon/icon-helpers": "^10.40.0",
+    "@carbon/icons": "^11.20.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",

package/scss/components/accordion/accordion.scss

@@ -11,11 +11,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/accordion';
 
 :host(#{$prefix}-accordion),
 :host(#{$prefix}-accordion-skeleton) {
   @extend .#{$prefix}--accordion;
+
+  @include layer-tokens.emit-layer-tokens(1);
 }
 
 :host(#{$prefix}-accordion-item),
@@ -33,22 +36,26 @@ $css--plex: true !default;
       margin: 0;
     }
   }
+}
 
-  &[size='sm'] {
-    @extend .#{$prefix}--accordion--sm;
-  }
+:host(#{$prefix}-accordion-item[size='sm']),
+:host(#{$prefix}-accordion-item-skeleton[size='sm']) {
+  @extend .#{$prefix}--accordion--sm;
+}
 
-  &[size='lg'] {
-    @extend .#{$prefix}--accordion--lg;
-  }
+:host(#{$prefix}-accordion-item[size='lg']),
+:host(#{$prefix}-accordion-item-skeleton[size='lg']) {
+  @extend .#{$prefix}--accordion--lg;
+}
 
-  &[alignment='start'] {
-    @extend .#{$prefix}--accordion--start;
-  }
+:host(#{$prefix}-accordion-item[alignment='start']),
+:host(#{$prefix}-accordion-item-skeleton[alignment='start']) {
+  @extend .#{$prefix}--accordion--start;
+}
 
-  &[isFlush] {
-    @extend .#{$prefix}--accordion--flush;
-  }
+:host(#{$prefix}-accordion-item[isFlush]),
+:host(#{$prefix}-accordion-item-skeleton[isFlush]) {
+  @extend .#{$prefix}--accordion--flush;
 }
 
 :host(#{$prefix}-accordion-item[expanding]) {

package/scss/components/button/button.scss

@@ -8,18 +8,78 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
+@use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/tooltip';
 
+@include code-snippet;
+
 :host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
+  @include layer-tokens.emit-layer-tokens(1);
   display: inline-flex;
+}
+
+:host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),
+:host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']) {
+  width: rem(20px);
+  height: rem(20px);
+}
+
+:host(#{$prefix}-button[pagination]),
+:host(#{$prefix}-modal-footer-button[pagination]) {
+  .#{$prefix}--btn {
+    border: none;
+    border-left: 1px solid $border-subtle;
+    transition: none;
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: -2px;
+      box-shadow: none;
+      border-left: 1px solid transparent;
+    }
+  }
+}
 
-  &[isExpressive] ::slotted([slot='icon']) {
-    width: rem(20px);
-    height: rem(20px);
+:host(#{$prefix}-button[pagination]:not([disabled])),
+:host(#{$prefix}-modal-footer-button[pagination]:not([disabled])) {
+  .#{$prefix}--btn {
+    color: $icon-primary;
+    &:active {
+      background-color: $layer-hover;
+    }
+  }
+}
+
+:host(#{$prefix}-button[pagination][batch-action]:not([disabled])),
+:host(
+    #{$prefix}-modal-footer-button[pagination][batch-action]:not([disabled])
+  ) {
+  .#{$prefix}--btn {
+    padding: $button-padding-ghost;
+
+    &:focus {
+      outline: 2px solid $layer;
+      outline-offset: -#{$spacing-01};
+    }
+  }
+
+  :host(#{$prefix}-button[pagination][has-main-content]:not([disabled])),
+  :host(
+      #{$prefix}-modal-footer-button[pagination][has-main-content]:not(
+          [disabled]
+        )
+    ) {
+    ::slotted([slot='icon']) {
+      position: static;
+      margin-left: $spacing-02;
+    }
   }
 }
 
@@ -36,8 +96,8 @@ $css--plex: true !default;
     // 196px from design kit
     max-width: rem(196px);
   }
+}
 
-  &[stacked] {
-    @extend .#{$prefix}--btn-set--stacked;
-  }
+:host(#{$prefix}-button-set[stacked]) {
+  @extend .#{$prefix}--btn-set--stacked;
 }

package/scss/components/checkbox/checkbox.scss

@@ -8,6 +8,8 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
@@ -15,9 +17,23 @@ $css--plex: true !default;
 :host(#{$prefix}-checkbox) {
   @extend .#{$prefix}--form-item;
   @extend .#{$prefix}--checkbox-wrapper;
+}
+
+:host(#{$prefix}-checkbox[readonly]) {
+  @extend .#{$prefix}--checkbox-wrapper--readonly;
+}
+
+:host(#{$prefix}-checkbox[data-table]) {
+  margin: 0;
+}
+
+:host(#{$prefix}-checkbox[data-table][hide-checkbox]) {
+  pointer-events: none;
 
-  &[readonly] {
-    @extend .#{$prefix}--checkbox-wrapper--readonly;
+  .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label::after {
+    background-color: transparent;
+    border-color: transparent;
   }
 }