@spectrum-css/colorslider - npm Package Compare versions

Comparing version 1.0.0-beta.4 to 1.0.0-beta.5

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+<a name="1.0.0-beta.5"></a>
+# 1.0.0-beta.5
+🗓 2020-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/colorslider@1.0.0-beta.4...@spectrum-css/colorslider@1.0.0-beta.5)
+
+### 🐛 Bug fixes
+
+* support high contrast mode in color components ([d4c05cb](https://github.com/adobe/spectrum-css/commit/d4c05cb))
+
+
+
+
+
 <a name="1.0.0-beta.4"></a>
@@ -8,0 +20,0 @@ # 1.0.0-beta.4

dist/docs/js/enhancement.js

@@ -161,15 +161,20 @@ /*
     var isOpen = force !== undefined ? force : !picker.classList.contains('is-open');
-    var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
-    var popover = picker.querySelector('.spectrum-Picker-popover');
+    var popover = getPopoverForPicker(picker);
 
     picker[isOpen ? 'setAttribute' : 'removeAttribute']('aria-expanded', 'true');
     picker.classList[isOpen ? 'add' : 'remove']('is-open');
-    fieldButton.classList[isOpen ? 'add' : 'remove']('is-selected');
+    picker.classList[isOpen ? 'add' : 'remove']('is-selected');
 
     if (popover) {
       popover.style.zIndex = 1;
+      var rect = picker.getBoundingClientRect();
+      popover.style.top = rect.bottom + 'px';
       popover.classList[isOpen ? 'add' : 'remove']('is-open');
+      popover.querySelector('.spectrum-Menu-item').focus();
     }
 
     if (isOpen) {
+      if (openPicker && openPicker !== picker) {
+        toggleOpen(openPicker, false);
+      }
       openPicker = picker;
@@ -182,6 +187,3 @@ }
       toggleOpen(picker, false);
-      var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
-      if (fieldButton) {
-        fieldButton.focus();
-      }
+      picker.focus();
     }
@@ -212,4 +214,3 @@ }
 
-          var picker = event.target.closest('.spectrum-Picker');
-          closeAndFocusPicker(picker);
+          closeAndFocusPicker(getPickerForMenu(menu));
           event.preventDefault();
@@ -228,10 +229,3 @@ }
         if (picker) {
-          var menu = picker.querySelector('.spectrum-Menu');
-          if (menu) {
-            var menuItem = menu.querySelector('.spectrum-Menu-item');
-            if (menuItem) {
-              event.preventDefault();
-              menuItem.focus();
-            }
-          }
+          toggleOpen(picker, true);
         }
@@ -243,4 +237,4 @@ }
   function setPickerValue(picker, value, label) {
-    var menu = picker.querySelector('.spectrum-Menu');
-    var menuItem = picker.querySelector('.spectrum-Menu-item[value="' + value + '"]');
+    var menu = picker.nextElementSibling.querySelector('.spectrum-Menu');
+    var menuItem = menu.querySelector('.spectrum-Menu-item[value="' + value + '"]');
 
@@ -266,3 +260,3 @@ if (menuItem) {
     picker.setAttribute('value', value);
-    var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
+    var fieldButton = picker;
     if (fieldButton && label) {
@@ -286,2 +280,11 @@ var pickerLabel = fieldButton.querySelector('.spectrum-Picker-label');
 
+  function getPickerForMenu(menuOrMenuItem) {
+    var popover = menuOrMenuItem.closest('.spectrum-Popover');
+    return popover && popover.previousElementSibling && popover.previousElementSibling.matches('.spectrum-Picker') ? popover.previousElementSibling : null;
+  }
+
+  function getPopoverForPicker(picker) {
+    return picker && picker.nextElementSibling && picker.nextElementSibling.matches('.spectrum-Popover') ? picker.nextElementSibling : null;
+  }
+
   function handleMenuChange(menu, menuItem) {
@@ -292,3 +295,3 @@ var value = menuItem.getAttribute('value');
 
-    var picker = menu.closest('.spectrum-Picker');
+    var picker = getPickerForMenu(menu);
     if (picker) {
@@ -301,13 +304,17 @@ toggleOpen(picker, false);
   window.addEventListener('click', function(event) {
+    var menu = event.target.closest('.spectrum-Menu');
+
     var picker = event.target.closest('.spectrum-Picker');
-
     if (picker) {
       toggleOpen(picker);
+    }
+    else if (menu) {
+      var popover = menu.closest('.spectrum-Popover');
+      picker = popover.previousElementSibling && popover.previousElementSibling.matches('.spectrum-Picker') ? popover.previousElementSibling : null;
 
       var menuItem = event.target.closest('.spectrum-Menu-item');
       if (menuItem) {
-        var fieldButton = picker.querySelector('.spectrum-Picker-trigger');
         var menuLabel = menuItem.querySelector('.spectrum-Menu-itemLabel');
         if (menuLabel) {
-          var pickerLabel = fieldButton.querySelector('.spectrum-Picker-label');
+          var pickerLabel = picker.querySelector('.spectrum-Picker-label');
           if (pickerLabel) {
@@ -321,3 +328,4 @@ pickerLabel.innerHTML = menuLabel.innerHTML;
       }
-    } else {
+    }
+    else {
       if (openPicker) {
@@ -422,3 +430,3 @@ toggleOpen(openPicker, false);
   if (classList.contains('spectrum-InputGroup-input') ||
-    classList.contains('spectrum-FieldButton')) {
+    classList.contains('spectrum-ActionButton spectrum-ActionButton--sizeM')) {
     closestSelector = '.spectrum-InputGroup';
@@ -567,3 +575,5 @@ }
     window.addEventListener('mousemove', onMouseMove);
-    document.body.classList.add('u-isGrabbing');
+    handle.classList.add('is-dragged');
+    // to move by merely clicking on the track
+    onMouseMove(e);
   }
@@ -573,3 +583,3 @@ function onMouseUp(e, sliderHandle) {
     window.removeEventListener('mousemove', onMouseMove);
-    document.body.classList.remove('u-isGrabbing');
+    handle.classList.remove('is-dragged');
   }
@@ -576,0 +586,0 @@ function onMouseMove(e, sliderHandle) {

package.json

 {
   "name": "@spectrum-css/colorslider",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "The Spectrum CSS Color Slider component",
@@ -20,8 +20,8 @@ "license": "Apache-2.0",
     "@spectrum-css/colorhandle": "^1.0.0-beta",
-    "@spectrum-css/vars": "^2.3.0"
+    "@spectrum-css/vars": "^3.0.0-beta.1"
   },
   "devDependencies": {
-    "@spectrum-css/colorhandle": "^1.0.0-beta.3",
-    "@spectrum-css/component-builder": "^2.0.0-beta.0",
-    "@spectrum-css/vars": "^2.3.0",
+    "@spectrum-css/colorhandle": "^1.0.0-beta.4",
+    "@spectrum-css/component-builder": "^2.0.0-beta.1",
+    "@spectrum-css/vars": "^3.0.0-beta.2",
     "gulp": "^4.0.0"
@@ -33,3 +33,3 @@ },
   "homepage": "https://opensource.adobe.com/spectrum-css/",
-  "gitHead": "90d7cf94f07e5bbc1705c23f62b6c7c3f163194c"
+  "gitHead": "731aeab0a10355dc274efd19d64a58fe71b2ef87"
 }

No alert changes

Worsened metrics

Total package byte prevSize

2517936

-14.48%

Number of package files

42

-31.15%

Lines of code

5232

-53.94%

No dependency changes