@spectrum-css/colorslider - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+<a name="1.0.0-beta.3"></a>
+# 1.0.0-beta.3
+🗓 2020-09-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/colorslider@1.0.0-beta.2...@spectrum-css/colorslider@1.0.0-beta.3)
+
+### 🐛 Bug fixes
+
+* wip fix more components ([b74dbb8](https://github.com/adobe/spectrum-css/commit/b74dbb8))
+
+
+
+
+
 <a name="1.0.0-beta.2"></a>
@@ -8,0 +20,0 @@ # 1.0.0-beta.2

dist/docs/js/enhancement.js

@@ -50,4 +50,3 @@ /*
         input.value = event.defaultValue;
-      }
-      else {
+      } else {
         var value = parseInt(input.value, 10);
@@ -76,4 +75,3 @@ var rating = event.target.closest('.spectrum-Rating');
       textfield.classList.add(focusClass);
-    }
-    else {
+    } else {
       textfield.classList.remove('is-keyboardFocused');
@@ -96,3 +94,3 @@ textfield.classList.remove('is-focused');
     if (textfield) {
-      setFocus(textfield, event.target,false);
+      setFocus(textfield, event.target, false);
     }
@@ -108,4 +106,3 @@ });
       inputgroup.classList.add(focusClass);
-    }
-    else {
+    } else {
       inputgroup.classList.remove('is-keyboardFocused');
@@ -139,4 +136,3 @@ inputgroup.classList.remove('is-focused');
       stepper.classList.add(focusClass);
-    }
-    else {
+    } else {
       stepper.classList.remove('is-keyboardFocused');
@@ -164,13 +160,13 @@ stepper.classList.remove('is-focused');
 
-// Dropdown
+// Picker
 (function() {
-  var openDropdown = null;
+  var openPicker = null;
 
-  function toggleOpen(dropdown, force) {
-    var isOpen = force !== undefined ? force : !dropdown.classList.contains('is-open');
-    var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
-    var popover = dropdown.querySelector('.spectrum-Dropdown-popover');
+  function toggleOpen(picker, force) {
+    var isOpen = force !== undefined ? force : !picker.classList.contains('is-open');
+    var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
+    var popover = picker.querySelector('.spectrum-Picker-popover');
 
-    dropdown[isOpen ? 'setAttribute' : 'removeAttribute']('aria-expanded', 'true');
-    dropdown.classList[isOpen ? 'add' : 'remove']('is-open');
+    picker[isOpen ? 'setAttribute' : 'removeAttribute']('aria-expanded', 'true');
+    picker.classList[isOpen ? 'add' : 'remove']('is-open');
     fieldButton.classList[isOpen ? 'add' : 'remove']('is-selected');
@@ -184,10 +180,10 @@
     if (isOpen) {
-      openDropdown = dropdown;
+      openPicker = picker;
     }
   }
 
-  function closeAndFocusDropdown(dropdown) {
-    if (dropdown) {
-      toggleOpen(dropdown, false);
-      var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
+  function closeAndFocusPicker(picker) {
+    if (picker) {
+      toggleOpen(picker, false);
+      var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
       if (fieldButton) {
@@ -209,21 +205,16 @@ fieldButton.focus();
           newItemIndex = menuItemIndex + 1 < items.length ? menuItemIndex + 1 : 0;
-        }
-        else if (event.key === 'ArrowUp') {
+        } else if (event.key === 'ArrowUp') {
           newItemIndex = menuItemIndex - 1 >= 0 ? menuItemIndex - 1 : items.length - 1;
-        }
-        else if (event.key === 'Home') {
+        } else if (event.key === 'Home') {
           newItemIndex = 0;
-        }
-        else if (event.key === 'End') {
+        } else if (event.key === 'End') {
           newItemIndex = items.length - 1;
-        }
-        else if (event.key === 'Escape') {
-          var dropdown = event.target.closest('.spectrum-Dropdown');
-          closeAndFocusDropdown(dropdown);
-        }
-        else if (event.key === 'Enter') {
+        } else if (event.key === 'Escape') {
+          var picker = event.target.closest('.spectrum-Picker');
+          closeAndFocusPicker(picker);
+        } else if (event.key === 'Enter') {
           handleMenuChange(menu, menuItem);
 
-          var dropdown = event.target.closest('.spectrum-Dropdown');
-          closeAndFocusDropdown(dropdown);
+          var picker = event.target.closest('.spectrum-Picker');
+          closeAndFocusPicker(picker);
           event.preventDefault();
@@ -238,8 +229,7 @@ }
       }
-    }
-    else {
+    } else {
       if (event.key === 'ArrowDown') {
-        var dropdown = event.target.closest('.spectrum-Dropdown');
-        if (dropdown) {
-          var menu = dropdown.querySelector('.spectrum-Menu');
+        var picker = event.target.closest('.spectrum-Picker');
+        if (picker) {
+          var menu = picker.querySelector('.spectrum-Menu');
           if (menu) {
@@ -257,5 +247,5 @@ var menuItem = menu.querySelector('.spectrum-Menu-item');
 
-  function setDropdownValue(dropdown, value, label) {
-    var menu = dropdown.querySelector('.spectrum-Menu');
-    var menuItem = dropdown.querySelector('.spectrum-Menu-item[value="'+value+'"]');
+  function setPickerValue(picker, value, label) {
+    var menu = picker.querySelector('.spectrum-Menu');
+    var menuItem = picker.querySelector('.spectrum-Menu-item[value="' + value + '"]');
 
@@ -280,8 +270,8 @@ if (menuItem) {
 
-    dropdown.setAttribute('value', value);
-    var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
+    picker.setAttribute('value', value);
+    var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
     if (fieldButton && label) {
-      var dropdownLabel = fieldButton.querySelector('.spectrum-Dropdown-label');
-      if (dropdownLabel) {
-        dropdownLabel.innerHTML = label;
+      var pickerLabel = fieldButton.querySelector('.spectrum-Picker-label');
+      if (pickerLabel) {
+        pickerLabel.innerHTML = label;
       }
@@ -298,3 +288,3 @@ }
 
-    dropdown.dispatchEvent(event);
+    picker.dispatchEvent(event);
   }
@@ -307,6 +297,6 @@
 
-    var dropdown = menu.closest('.spectrum-Dropdown');
-    if (dropdown) {
-      toggleOpen(dropdown, false);
-      setDropdownValue(dropdown, value, label);
+    var picker = menu.closest('.spectrum-Picker');
+    if (picker) {
+      toggleOpen(picker, false);
+      setPickerValue(picker, value, label);
     }
@@ -316,15 +306,15 @@ }
   window.addEventListener('click', function(event) {
-    var dropdown = event.target.closest('.spectrum-Dropdown');
+    var picker = event.target.closest('.spectrum-Picker');
 
-    if (dropdown) {
-      toggleOpen(dropdown);
+    if (picker) {
+      toggleOpen(picker);
 
       var menuItem = event.target.closest('.spectrum-Menu-item');
       if (menuItem) {
-        var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
+        var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
         var menuLabel = menuItem.querySelector('.spectrum-Menu-itemLabel');
         if (menuLabel) {
-          var dropdownLabel = fieldButton.querySelector('.spectrum-Dropdown-label');
-          if (dropdownLabel) {
-            dropdownLabel.innerHTML = menuLabel.innerHTML;
+          var pickerLabel = fieldButton.querySelector('.spectrum-Picker-label');
+          if (pickerLabel) {
+            pickerLabel.innerHTML = menuLabel.innerHTML;
 
@@ -336,6 +326,5 @@ event.stopPropagation();
       }
-    }
-    else {
-      if (openDropdown) {
-        toggleOpen(openDropdown, false);
+    } else {
+      if (openPicker) {
+        toggleOpen(openPicker, false);
       }
@@ -345,3 +334,3 @@ }
 
-  window.setDropdownValue = setDropdownValue;
+  window.setPickerValue = setPickerValue;
 }());
@@ -377,4 +366,3 @@
     event.preventDefault();
-  }
-  else if ((el = event.target.closest('.spectrum-TreeView-itemLink')) !== null) {
+  } else if ((el = event.target.closest('.spectrum-TreeView-itemLink')) !== null) {
     if (!(event.shiftKey || event.metaKey)) {
@@ -441,3 +429,3 @@ // Remove other selected items
   if (classList.contains('spectrum-InputGroup-input') ||
-      classList.contains('spectrum-FieldButton')) {
+    classList.contains('spectrum-FieldButton')) {
     closestSelector = '.spectrum-InputGroup';
@@ -448,4 +436,3 @@ }
     closestSelector = '.spectrum-Slider-handle';
-  }
-  else {
+  } else {
     return;
@@ -504,3 +491,3 @@ }
 
-    var x = Math.max(Math.min(e.x-sliderOffsetLeft, sliderOffsetWidth), 0);
+    var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
     var percent = (x / sliderOffsetWidth) * 100;
@@ -518,4 +505,3 @@
       }
-    }
-    else {
+    } else {
       if (percent > parseFloat(leftHandle.style[toggleRTL('left', 'right')])) {
@@ -602,3 +588,3 @@ handle.style[toggleRTL('left', 'right')] = percent + '%';
 
-    var x = Math.max(Math.min(e.x-sliderOffsetLeft, sliderOffsetWidth), 0);
+    var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
     var percent = (x / sliderOffsetWidth) * 100;
@@ -637,4 +623,3 @@
         leftBuffer.style.width = Math.min(bufferMaxWidth, actualMiddle) + 'px';
-      }
-      else {
+      } else {
         leftBuffer.style.width = percent + '%';
@@ -652,4 +637,3 @@ rightBuffer.style.width = 'auto';
         fill.classList.add('spectrum-Slider-fill--right');
-      }
-      else {
+      } else {
         fill.classList.remove('spectrum-Slider-fill--right');
@@ -734,3 +718,3 @@ }
     var deg = percent * 0.01 * (max - min) + min;
-    handle.style.transform = 'rotate('+ deg + 'deg'+')';
+    handle.style.transform = 'rotate(' + deg + 'deg' + ')';
   }
@@ -751,3 +735,3 @@
   // Support wrapped dialogs
-  var innerDialog = dialog.querySelector('.spectrum-Dialog');
+  var innerDialog = dialog.querySelector('.spectrum-Modal');
   if (innerDialog) {
@@ -761,5 +745,6 @@ innerDialog.classList.add('is-open');
   dialog.classList.remove('is-open');
+  console.log(dialog);
 
   // Support wrapped dialogs
-  var innerDialog = dialog.querySelector('.spectrum-Dialog');
+  var innerDialog = dialog.querySelector('.spectrum-Modal');
   if (innerDialog) {
@@ -771,3 +756,3 @@ innerDialog.classList.remove('is-open');
     dialog.classList.remove('spectrum-CSSExample-dialog');
-  }, 10);
+  }, 130);
 }
@@ -798,11 +783,10 @@
   var angle;
-  if(value > 0 && value <= 50) {
-    angle = -180 + (value/50 * 180);
-    submask1.style.transform = 'rotate('+angle+'deg)';
+  if (value > 0 && value <= 50) {
+    angle = -180 + (value / 50 * 180);
+    submask1.style.transform = 'rotate(' + angle + 'deg)';
     submask2.style.transform = 'rotate(-180deg)';
-  }
-  else if (value > 50) {
-    angle = -180 + (value-50)/50 * 180;
+  } else if (value > 50) {
+    angle = -180 + (value - 50) / 50 * 180;
     submask1.style.transform = 'rotate(0deg)';
-    submask2.style.transform = 'rotate('+angle+'deg)';
+    submask2.style.transform = 'rotate(' + angle + 'deg)';
   }
@@ -809,0 +793,0 @@ }

dist/docs/js/site.js

@@ -188,9 +188,9 @@ /*
         case 'scale':
-          setDropdownValue(scaleDropdown, event.value);
+          setPickerValue(scalePicker, event.value);
           break;
         case 'theme':
-          setDropdownValue(themeDropdown, event.value);
+          setPickerValue(themePicker, event.value);
           break;
         case 'direction':
-          setDropdownValue(directionDropdown, event.value);
+          setPickerValue(directionPicker, event.value);
           break;
@@ -212,4 +212,4 @@ }
     }
-    if (scaleDropdown) {
-      setDropdownValue(scaleDropdown, switcher.scale);
+    if (scalePicker) {
+      setPickerValue(scalePicker, switcher.scale);
     }
@@ -231,17 +231,17 @@ }
 
-  let scaleDropdown = document.querySelector('#switcher-scale');
-  let themeDropdown = document.querySelector('#switcher-theme');
-  let directionDropdown = document.querySelector('#switcher-direction');
-  window.addEventListener('PageFastLoaded', function updateScaleDropdowns() {
-    scaleDropdown = document.querySelector('#switcher-scale');
-    themeDropdown = document.querySelector('#switcher-theme');
-    directionDropdown = document.querySelector('#switcher-direction');
-    if (scaleDropdown) {
-      setDropdownValue(scaleDropdown, switcher.scale);
+  let scalePicker = document.querySelector('#switcher-scale');
+  let themePicker = document.querySelector('#switcher-theme');
+  let directionPicker = document.querySelector('#switcher-direction');
+  window.addEventListener('PageFastLoaded', function updateScalePickers() {
+    scalePicker = document.querySelector('#switcher-scale');
+    themePicker = document.querySelector('#switcher-theme');
+    directionPicker = document.querySelector('#switcher-direction');
+    if (scalePicker) {
+      setPickerValue(scalePicker, switcher.scale);
     }
-    if (themeDropdown) {
-      setDropdownValue(themeDropdown, switcher.theme);
+    if (themePicker) {
+      setPickerValue(themePicker, switcher.theme);
     }
-    if (directionDropdown) {
-      setDropdownValue(directionDropdown, switcher.direction);
+    if (directionPicker) {
+      setPickerValue(directionPicker, switcher.direction);
     }
@@ -272,4 +272,6 @@ });
     overlay.removeEventListener('click', hideSideBar);
-    sideBar.classList.remove('is-open');
     overlay.classList.remove('is-open');
+    if (sideBar) {
+      sideBar.classList.remove('is-open');
+    }
     if (window.siteSearch) {
@@ -289,4 +291,4 @@ window.siteSearch.hideResults();
 
-  // Search isn't supported on IE 11
-  if (typeof Search !== 'undefined') {
+  // Search isn't supported on IE 11 and sideBar will not be exist in test mode
+  if (typeof Search !== 'undefined' && document.querySelector('#site-search')) {
     window.siteSearch = new Search(document.querySelector('#site-search'))
@@ -293,0 +295,0 @@ }

package.json

 {
   "name": "@spectrum-css/colorslider",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "The Spectrum CSS Color Slider component",
@@ -20,7 +20,7 @@ "license": "Apache-2.0",
     "@spectrum-css/colorhandle": "^1.0.0-beta",
-    "@spectrum-css/vars": "^2.0.0"
+    "@spectrum-css/vars": "^3.0.0-beta.0"
   },
   "devDependencies": {
-    "@spectrum-css/colorhandle": "^1.0.0-beta.1",
-    "@spectrum-css/component-builder": "^1.2.0",
+    "@spectrum-css/colorhandle": "^1.0.0-beta.2",
+    "@spectrum-css/component-builder": "^1.2.1-beta.0",
     "@spectrum-css/vars": "^2.3.0",
@@ -33,3 +33,3 @@ "gulp": "^4.0.0"
   "homepage": "https://opensource.adobe.com/spectrum-css/",
-  "gitHead": "32d3fe05d2d69c2b0502cd7358cf818f1c4dc85e"
+  "gitHead": "049ff4d1b4c0890616dc67876dc7419fa046172a"
 }

No alert changes

Worsened metrics

Total package byte prevSize

2527047

decreased by-0.23%

Number of package files

53

decreased by-5.36%

Lines of code

5554

decreased by-5.83%

No dependency changes