carbon-components - npm Package Compare versions

Comparing version 7.12.1 to 7.12.2

es/components/structured-list/structured-list.js

@@ -41,2 +41,5 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
     });
+    _this.element.addEventListener('click', function (evt) {
+      _this._handleClick(evt);
+    });
     return _this;
@@ -71,6 +74,28 @@ }
   }, {
+    key: '_handleClick',
+    value: function _handleClick(evt) {
+      var _this2 = this;
+
+      var selectedRow = eventMatches(evt, this.options.selectorRow);
+      [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow))).forEach(function (row) {
+        return row.classList.remove(_this2.options.classActive);
+      });
+      if (selectedRow) {
+        selectedRow.classList.add(this.options.classActive);
+      }
+    }
+
+    // Handle Enter or Space keydown events for selecting <label> rows
+
+  }, {
     key: '_handleKeydownChecked',
     value: function _handleKeydownChecked(evt) {
+      var _this3 = this;
+
       var selectedRow = eventMatches(evt, this.options.selectorRow);
+      [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow))).forEach(function (row) {
+        return row.classList.remove(_this3.options.classActive);
+      });
       if (selectedRow) {
+        selectedRow.classList.add(this.options.classActive);
         var input = this.element.querySelector('#' + selectedRow.getAttribute('for') + '.bx--structured-list-input');
@@ -80,5 +105,10 @@ input.checked = true;
     }
+
+    // Handle up and down keydown events for selecting <label> rows
+
   }, {
     key: '_handleKeydownArrow',
     value: function _handleKeydownArrow(evt) {
+      var _this4 = this;
+
       var selectedRow = eventMatches(evt, this.options.selectorRow);
@@ -89,2 +119,5 @@ var direction = this._direction(evt);
         var rows = [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow)));
+        rows.forEach(function (row) {
+          return row.classList.remove(_this4.options.classActive);
+        });
         var firstIndex = 0;
@@ -96,2 +129,3 @@ var nextIndex = this._nextIndex(rows, selectedRow, direction);
           case -1:
+            rows[lastIndex].classList.add(this.options.classActive);
             rows[lastIndex].focus();
@@ -101,2 +135,3 @@ this._handleInputChecked(lastIndex);
           case rows.length:
+            rows[firstIndex].classList.add(this.options.classActive);
             rows[firstIndex].focus();
@@ -106,2 +141,3 @@ this._handleInputChecked(firstIndex);
           default:
+            rows[nextIndex].classList.add(this.options.classActive);
             rows[nextIndex].focus();
@@ -121,3 +157,4 @@ this._handleInputChecked(nextIndex);
   selectorInit: '[data-structured-list]',
-  selectorRow: '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row'
+  selectorRow: '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row',
+  classActive: 'bx--structured-list-row--selected'
 };
@@ -124,0 +161,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "homepage": "http://carbondesignsystem.com/",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "module": "es/index.js",
@@ -8,0 +8,0 @@ "main": "umd/index.js",

src/components/structured-list/README.md

@@ -27,8 +27,9 @@ ### SCSS
 
-| Selector                             | Description                                                                                  |
-|--------------------------------------|----------------------------------------------------------------------------------------------|
-| .bx--structured-list--border         | Applies border around structured-list and white background-color                             |
-| .bx--structured-list--condensed      | Applies condensed styles for all body rows                                                   |
-| .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports. |
-| .bx--structured-list--selection      | Applies styles used for selection variant of structured-list.                                |
+| Selector                             | Description                                                                                                  |
+|--------------------------------------|--------------------------------------------------------------------------------------------------------------|
+| .bx--structured-list--border         | Applies border around structured-list and white background-color                                             |
+| .bx--structured-list--condensed      | Applies condensed styles for all body rows                                                                   |
+| .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports.                 |
+| .bx--structured-list--selection      | Applies styles used for selection variant of structured-list.                                                |
+| .bx--structured-list-row--selected   | Applies modifier class to label row. This changes the background color to indicate that the row is selected. |
 
@@ -50,2 +51,3 @@
 | `selectorStepElement` | `.bx--structured-list-tbody .bx--structured-list-row` | The selector to find the step element.           |
+| `classActive`         | `'bx--structured-list-row--selected'`                 | The class to indicate a selected row             |
 
@@ -52,0 +54,0 @@ ### FAQ

src/components/structured-list/structured-list.js

@@ -26,2 +26,5 @@ import mixin from '../../globals/js/misc/mixin';
     });
+    this.element.addEventListener('click', (evt) => {
+      this._handleClick(evt);
+    });
   }
@@ -51,5 +54,20 @@
 
+  _handleClick(evt) {
+    const selectedRow = eventMatches(evt, this.options.selectorRow);
+    [...this.element.querySelectorAll(this.options.selectorRow)].forEach(row =>
+      row.classList.remove(this.options.classActive),
+    );
+    if (selectedRow) {
+      selectedRow.classList.add(this.options.classActive);
+    }
+  }
+
+  // Handle Enter or Space keydown events for selecting <label> rows
   _handleKeydownChecked(evt) {
     const selectedRow = eventMatches(evt, this.options.selectorRow);
+    [...this.element.querySelectorAll(this.options.selectorRow)].forEach(row =>
+      row.classList.remove(this.options.classActive),
+    );
     if (selectedRow) {
+      selectedRow.classList.add(this.options.classActive);
       const input = this.element.querySelector(
@@ -62,2 +80,3 @@ `#${selectedRow.getAttribute('for')}.bx--structured-list-input`,
 
+  // Handle up and down keydown events for selecting <label> rows
   _handleKeydownArrow(evt) {
@@ -69,2 +88,3 @@ const selectedRow = eventMatches(evt, this.options.selectorRow);
       const rows = [...this.element.querySelectorAll(this.options.selectorRow)];
+      rows.forEach(row => row.classList.remove(this.options.classActive));
       const firstIndex = 0;
@@ -76,2 +96,3 @@ const nextIndex = this._nextIndex(rows, selectedRow, direction);
         case -1:
+          rows[lastIndex].classList.add(this.options.classActive);
           rows[lastIndex].focus();
@@ -81,2 +102,3 @@ this._handleInputChecked(lastIndex);
         case rows.length:
+          rows[firstIndex].classList.add(this.options.classActive);
           rows[firstIndex].focus();
@@ -86,2 +108,3 @@ this._handleInputChecked(firstIndex);
         default:
+          rows[nextIndex].classList.add(this.options.classActive);
           rows[nextIndex].focus();
@@ -100,2 +123,3 @@ this._handleInputChecked(nextIndex);
       '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row',
+    classActive: 'bx--structured-list-row--selected',
   };
@@ -102,0 +126,0 @@ }

umd/components/structured-list/structured-list.js

@@ -119,2 +119,5 @@ (function (global, factory) {
       });
+      _this.element.addEventListener('click', function (evt) {
+        _this._handleClick(evt);
+      });
       return _this;
@@ -149,6 +152,25 @@ }
     }, {
+      key: '_handleClick',
+      value: function _handleClick(evt) {
+        var _this2 = this;
+
+        var selectedRow = (0, _eventMatches2.default)(evt, this.options.selectorRow);
+        [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow))).forEach(function (row) {
+          return row.classList.remove(_this2.options.classActive);
+        });
+        if (selectedRow) {
+          selectedRow.classList.add(this.options.classActive);
+        }
+      }
+    }, {
       key: '_handleKeydownChecked',
       value: function _handleKeydownChecked(evt) {
+        var _this3 = this;
+
         var selectedRow = (0, _eventMatches2.default)(evt, this.options.selectorRow);
+        [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow))).forEach(function (row) {
+          return row.classList.remove(_this3.options.classActive);
+        });
         if (selectedRow) {
+          selectedRow.classList.add(this.options.classActive);
           var input = this.element.querySelector('#' + selectedRow.getAttribute('for') + '.bx--structured-list-input');
@@ -161,2 +183,4 @@ input.checked = true;
       value: function _handleKeydownArrow(evt) {
+        var _this4 = this;
+
         var selectedRow = (0, _eventMatches2.default)(evt, this.options.selectorRow);
@@ -167,2 +191,5 @@ var direction = this._direction(evt);
           var rows = [].concat(_toConsumableArray(this.element.querySelectorAll(this.options.selectorRow)));
+          rows.forEach(function (row) {
+            return row.classList.remove(_this4.options.classActive);
+          });
           var firstIndex = 0;
@@ -174,2 +201,3 @@ var nextIndex = this._nextIndex(rows, selectedRow, direction);
             case -1:
+              rows[lastIndex].classList.add(this.options.classActive);
               rows[lastIndex].focus();
@@ -179,2 +207,3 @@ this._handleInputChecked(lastIndex);
             case rows.length:
+              rows[firstIndex].classList.add(this.options.classActive);
               rows[firstIndex].focus();
@@ -184,2 +213,3 @@ this._handleInputChecked(firstIndex);
             default:
+              rows[nextIndex].classList.add(this.options.classActive);
               rows[nextIndex].focus();
@@ -199,5 +229,6 @@ this._handleInputChecked(nextIndex);
     selectorInit: '[data-structured-list]',
-    selectorRow: '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row'
+    selectorRow: '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row',
+    classActive: 'bx--structured-list-row--selected'
   };
   exports.default = StructuredList;
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2989215

increased by0.21%

Lines of code

32383

increased by0.32%

No dependency changes