action group button missing border (#2710)

* fix: actiongroup button missing its right norder

* use z-index to show the right borders

Co-authored-by: vadlakun <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 3 people

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -42,6 +42,7 @@ governing permissions and limitations under the License.
 
 
 .spectrum-ActionGroup {
+  isolation: isolate;
   display: flex;
   flex-wrap: wrap;
   --column-gap: var(--spectrum-actionbuttongroup-text-button-gap-x);
@@ -111,6 +112,10 @@ governing permissions and limitations under the License.
         border-end-end-radius: var(--spectrum-actionbutton-border-radius);
       }
 
+      &.spectrum-ActionGroup-item--isDisabled {
+        z-index: -1;
+      }
+
       &.is-selected {
         z-index: 1;
       }

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -309,7 +309,8 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, staticColor,
                 {
                   'is-selected': isSelected,
                   'is-hovered': isHovered,
-                  'spectrum-ActionGroup-item--iconOnly': hideButtonText
+                  'spectrum-ActionGroup-item--iconOnly': hideButtonText,
+                  'spectrum-ActionGroup-item--isDisabled': isDisabled
                 },
                 classNames(
                   buttonStyles,