chore(number-field): resolved conflicts

adobe · Sep 21, 2023 · 1f861d7 · 1f861d7
2 parents 0dc2bd5 + f587ae3
commit 1f861d7
Show file tree

Hide file tree

Showing 28 changed files with 272 additions and 464 deletions.
diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
@@ -552,7 +552,6 @@ governing permissions and limitations under the License.
         var(--spectrum-actionbutton-font-size)
     );
     overflow: hidden;
-    pointer-events: none;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -621,11 +620,9 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css
@@ -43,12 +43,6 @@ governing permissions and limitations under the License.
 ::slotted(*) {
     flex-shrink: 0;
 }
-::slotted(.focus-visible) {
-    z-index: 3;
-}
-::slotted(:focus-visible) {
-    z-index: 3;
-}
 :host(:not([vertical]):not([compact])) ::slotted(*) {
     flex-shrink: 0;
 }
@@ -145,10 +139,10 @@ governing permissions and limitations under the License.
 :host([compact]:not([quiet])) ::slotted(:hover) {
     z-index: 2;
 }
-:host([compact]:not([quiet])) ::slotted(.focus-visible) {
+:host([compact]:not([quiet]).focus-visible) ::slotted(*) {
     z-index: 3;
 }
-:host([compact]:not([quiet])) ::slotted(:focus-visible) {
+:host([compact]:not([quiet]):focus-visible) ::slotted(*) {
     z-index: 3;
 }
 :host([compact]:not([quiet])[vertical]) {

diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
@@ -372,11 +372,9 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
@@ -303,8 +303,8 @@ governing permissions and limitations under the License.
 :host([indeterminate]) #input:checked + #box #checkmark {
     display: none;
 }
-:host([indeterminate]) #box #partialCheckmark,
-:host([indeterminate]) #input:checked + #box #partialCheckmark {
+:host([indeterminate]) #box .spectrum-Icon#partialCheckmark,
+:host([indeterminate]) #input:checked + #box .spectrum-Icon#partialCheckmark {
     display: block;
     opacity: 1;
     transform: scale(1);

diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css
@@ -172,11 +172,28 @@ governing permissions and limitations under the License.
         --highcontrast-closebutton-focus-indicator-color: ButtonText;
     }
     :host(.focus-visible):after {
+        border-radius: 100%;
+        box-shadow: 0 0 0
+            var(
+                --mod-closebutton-focus-indicator-thickness,
+                var(--spectrum-closebutton-focus-indicator-thickness)
+            )
+            var(
+                --highcontrast-closebutton-focus-indicator-color,
+                var(
+                    --mod-closebutton-focus-indicator-color,
+                    var(--spectrum-closebutton-focus-indicator-color)
+                )
+            );
+        content: '';
+        display: block;
         forced-color-adjust: none;
+        inset: 0;
         margin: var(
             --mod-closebutton-focus-indicator-gap,
             var(--spectrum-closebutton-focus-indicator-gap)
         );
+        position: absolute;
         transition: opacity
                 var(
                     --mod-closebutton-animation-duration,
@@ -191,11 +208,28 @@ governing permissions and limitations under the License.
                 ease-out;
     }
     :host(:focus-visible):after {
+        border-radius: 100%;
+        box-shadow: 0 0 0
+            var(
+                --mod-closebutton-focus-indicator-thickness,
+                var(--spectrum-closebutton-focus-indicator-thickness)
+            )
+            var(
+                --highcontrast-closebutton-focus-indicator-color,
+                var(
+                    --mod-closebutton-focus-indicator-color,
+                    var(--spectrum-closebutton-focus-indicator-color)
+                )
+            );
+        content: '';
+        display: block;
         forced-color-adjust: none;
+        inset: 0;
         margin: var(
             --mod-closebutton-focus-indicator-gap,
             var(--spectrum-closebutton-focus-indicator-gap)
         );
+        position: absolute;
         transition: opacity
                 var(
                     --mod-closebutton-animation-duration,
@@ -273,11 +307,9 @@ governing permissions and limitations under the License.
 }
 :host(.focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(:focus-visible) {
     box-shadow: none;
-    outline: none;
 }
 :host(.focus-visible):after {
     box-shadow: 0 0 0

diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css
@@ -22,6 +22,7 @@ governing permissions and limitations under the License.
     flex-direction: row;
 }
 .group {
+    align-items: top;
     display: flex;
     flex-flow: column wrap;
 }

diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css
@@ -56,12 +56,6 @@ governing permissions and limitations under the License.
         --spectrum-transparent-white-300
     );
     --spectrum-progressbar-fill-color-white: var(--spectrum-white);
-    --spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
-    --spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
-    --spectrum-meter-inline-size: var(--spectrum-meter-default-width);
-    --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
-    --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
-    --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
 }
 :host([size='s']) {
     --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
@@ -103,46 +97,13 @@ governing permissions and limitations under the License.
         --spectrum-component-top-to-text-300
     );
 }
-:host {
-    --spectrum-progressbar-size-default: var(
-        --mod-meter-inline-size,
-        var(--spectrum-meter-inline-size)
-    );
-    --spectrum-progressbar-max-size: var(
-        --mod-meter-max-width,
-        var(--spectrum-meter-max-width)
-    );
-    --spectrum-progressbar-min-size: var(
-        --mod-meter-min-width,
-        var(--spectrum-meter-min-width)
-    );
-}
-:host([variant='positive']) .fill {
-    background-color: var(
-        --highcontrast-progressbar-fill-color,
-        var(
-            --mod-progressbar-fill-color-positive,
-            var(--spectrum-progressbar-fill-color-positive)
-        )
-    );
-}
-:host([variant='notice']) .fill {
-    background-color: var(
-        --highcontrast-progressbar-fill-color,
-        var(
-            --mod-progressbar-fill-color-notice,
-            var(--spectrum-progressbar-fill-color-notice)
-        )
-    );
-}
-:host([variant='negative']) .fill {
-    background-color: var(
-        --highcontrast-progressbar-fill-color,
-        var(
-            --mod-progressbar-fill-color-negative,
-            var(--spectrum-progressbar-fill-color-negative)
-        )
-    );
+@media (forced-colors: active) {
+    .track {
+        --highcontrast-progressbar-fill-color: ButtonText;
+        --highcontrast-progressbar-track-color: ButtonFace;
+        border: 1px solid ButtonText;
+        forced-color-adjust: none;
+    }
 }
 :host {
     align-items: center;
@@ -210,32 +171,60 @@ governing permissions and limitations under the License.
     );
 }
 .track {
-    background-color: var(
+    background: var(
         --highcontrast-progressbar-track-color,
         var(
             --mod-progressbar-track-color,
             var(--spectrum-progressbar-track-color)
         )
     );
+    block-size: var(
+        --mod-progressbar-thickness,
+        var(--spectrum-progressbar-thickness)
+    );
     border-radius: var(--spectrum-progressbar-corner-radius);
     inline-size: 100%;
     overflow: hidden;
 }
-.fill,
-.track {
-    block-size: var(
-        --mod-progressbar-thickness,
-        var(--spectrum-progressbar-thickness)
+:host([variant='positive']) .fill {
+    background: var(
+        --highcontrast-progressbar-fill-color,
+        var(
+            --mod-progressbar-fill-color-positive,
+            var(--spectrum-progressbar-fill-color-positive)
+        )
+    );
+}
+:host([variant='notice']) .fill {
+    background: var(
+        --highcontrast-progressbar-fill-color,
+        var(
+            --mod-progressbar-fill-color-notice,
+            var(--spectrum-progressbar-fill-color-notice)
+        )
+    );
+}
+:host([variant='negative']) .fill {
+    background: var(
+        --highcontrast-progressbar-fill-color,
+        var(
+            --mod-progressbar-fill-color-negative,
+            var(--spectrum-progressbar-fill-color-negative)
+        )
     );
 }
 .fill {
-    background-color: var(
+    background: var(
         --highcontrast-progressbar-fill-color,
         var(
             --mod-progressbar-fill-color,
             var(--spectrum-progressbar-fill-color)
         )
     );
+    block-size: var(
+        --mod-progressbar-thickness,
+        var(--spectrum-progressbar-thickness)
+    );
     border: none;
     transition: width 1s;
 }
@@ -281,7 +270,7 @@ governing permissions and limitations under the License.
     text-align: end;
 }
 :host([static='white']) .fill {
-    background-color: var(
+    background: var(
         --mod-progressbar-fill-color-white,
         var(--spectrum-progressbar-fill-color-white)
     );
@@ -356,11 +345,3 @@ governing permissions and limitations under the License.
         );
     }
 }
-@media (forced-colors: active) {
-    .track {
-        --highcontrast-progressbar-fill-color: ButtonText;
-        --highcontrast-progressbar-track-color: ButtonFace;
-        border: 1px solid ButtonText;
-        forced-color-adjust: none;
-    }
-}
diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css
@@ -31,15 +31,13 @@ governing permissions and limitations under the License.
     --spectrum-dialog-confirm-exit-animation-delay: 0s;
     --spectrum-dialog-fullscreen-margin: 32px;
     --spectrum-dialog-max-height: 90vh;
-    --spectrum-dialog-max-width: 90%;
 }
 .modal {
     border-radius: var(
         --spectrum-dialog-confirm-border-radius,
         var(--spectrum-alias-component-border-radius)
     );
     max-height: var(--spectrum-dialog-max-height);
-    max-width: var(--spectrum-dialog-max-width);
     outline: none;
     overflow: hidden;
     pointer-events: auto;
@@ -130,5 +128,8 @@ governing permissions and limitations under the License.
     transform: none;
 }
 .modal {
-    background: var(--spectrum-gray-100);
+    background: var(
+        --spectrum-dialog-confirm-background-color,
+        var(--spectrum-alias-background-color-default)
+    );
 }
diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -438,9 +438,9 @@ describe('NumberField', () => {
             await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
             await sendKeys({ type: '1' }); // Visible text: 1EUR 45.007
             await sendKeys({ press: 'Enter' }); // Visible text: EUR 145.01
-            expect(el.value).to.equal(145.007);
+            expect(el.value).to.equal(145.01); // element value will update on pressing enter
             expect(inputSpy.calledWith(145.007), 'second input').to.be.true;
-            expect(changeSpy.calledWith(145.007), 'change').to.be.true;
+            expect(changeSpy.calledWith(145.01), 'change').to.be.true;
         });
         it('one input/one change for each Arrow*', async () => {
             el.focus();
@@ -751,7 +751,7 @@ describe('NumberField', () => {
             await sendKeys({ press: 'Enter' });
             await elementUpdated(el);
             expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(10);
+            expect(lastChangeValue, 'last change value').to.equal(0); // onchange won't be triggered unless the value actually changes in the input
             expect(el.formattedValue).to.equal('10');
             expect(el.valueAsString).to.equal('10');
             expect(el.value).to.equal(10);
@@ -811,7 +811,7 @@ describe('NumberField', () => {
             await sendKeys({ press: 'Enter' });
             await elementUpdated(el);
             expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(10);
+            expect(lastChangeValue, 'last change value').to.equal(0);
             expect(el.formattedValue).to.equal('10');
             expect(el.valueAsString).to.equal('10');
             expect(el.value).to.equal(10);