fix(forms): InputGroup toggle button stacking (#1778)

Author: jzempel

packages/forms/demo/inputGroup.stories.mdx

@@ -1,5 +1,13 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
-import { InputGroup, Input, Field, Label, Hint, Message } from '@zendeskgarden/react-forms';
+import {
+  InputGroup,
+  Input,
+  Field,
+  Label,
+  Hint,
+  Message,
+  VALIDATION
+} from '@zendeskgarden/react-forms';
 import { InputGroupStory } from './stories/InputGroupStory';
 import { INPUT_GROUP_ITEMS as ITEMS } from './stories/data';
 import { commonArgs, commonArgTypes } from './stories/common';
@@ -32,7 +40,14 @@ import README from '../README.md';
       isNeutral: { table: { category: 'Button' } },
       isPrimary: { control: 'boolean', table: { category: 'Button' } },
       isDanger: { control: 'boolean', table: { category: 'Button' } },
-      readOnly: { control: 'boolean', table: { category: 'Input' } }
+      isToggle: { control: 'boolean', name: 'ToggleButton', table: { category: 'Button' } },
+      readOnly: { control: 'boolean', table: { category: 'Input' } },
+      inputValidation: {
+        control: 'radio',
+        name: 'validation',
+        options: VALIDATION,
+        table: { category: 'Input' }
+      }
     }}
     parameters={{
       design: {

packages/forms/demo/stories/InputGroupStory.tsx

@@ -5,23 +5,49 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
-import { Story } from '@storybook/react';
-import { IInputGroupProps, Input, InputGroup } from '@zendeskgarden/react-forms';
+import React, { PropsWithChildren, useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { IInputGroupProps, IInputProps, Input, InputGroup } from '@zendeskgarden/react-forms';
 import { FieldStory, IFieldArgs } from './FieldStory';
 import { IInputGroupItem } from './types';
-import { Button } from '@zendeskgarden/react-buttons';
+import { Button, IButtonProps, ToggleButton } from '@zendeskgarden/react-buttons';
+
+interface IGroupButtonProps extends PropsWithChildren {
+  disabled?: boolean;
+  isNeutral: boolean;
+  isPrimary?: boolean;
+  isDanger?: boolean;
+  isToggle?: boolean;
+  size?: IButtonProps['size'];
+}
+
+const GroupButton = ({ isToggle, ...props }: IGroupButtonProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return isToggle ? (
+    <ToggleButton
+      focusInset
+      {...props}
+      isPressed={isPressed}
+      onClick={() => setIsPressed(!isPressed)}
+    />
+  ) : (
+    <Button focusInset {...props} />
+  );
+};
 
 interface IArgs extends IInputGroupProps, IFieldArgs {
   items: IInputGroupItem[];
   disabled?: boolean;
   isNeutral: boolean;
   isPrimary?: boolean;
   isDanger?: boolean;
+  isToggle?: boolean;
   readOnly?: boolean;
+  inputValidation?: IInputProps['validation'];
 }
 
-export const InputGroupStory: Story<IArgs> = ({
+export const InputGroupStory: StoryFn<IArgs> = ({
   label,
   isLabelRegular,
   isLabelHidden,
@@ -35,7 +61,9 @@ export const InputGroupStory: Story<IArgs> = ({
   isNeutral,
   isPrimary,
   isDanger,
+  isToggle,
   readOnly,
+  inputValidation,
   ...args
 }) => (
   <FieldStory
@@ -52,24 +80,25 @@ export const InputGroupStory: Story<IArgs> = ({
     <InputGroup {...args}>
       {items.map((item, index) =>
         item.isButton ? (
-          <Button
+          <GroupButton
             key={index}
-            focusInset
             disabled={disabled}
             isNeutral={isNeutral}
             isPrimary={isPrimary}
             isDanger={isDanger}
+            isToggle={isToggle}
             size={args.isCompact ? 'small' : undefined}
           >
             {item.text}
-          </Button>
+          </GroupButton>
         ) : (
           <Input
             key={index}
             placeholder={item.text}
             readOnly={readOnly}
             disabled={disabled}
             isCompact={args.isCompact}
+            validation={inputValidation}
           />
         )
       )}

packages/forms/src/styled/input-group/StyledInputGroup.ts

@@ -78,7 +78,9 @@ const itemStyles = (props: ThemeProps<DefaultTheme>) => {
     & > ${StyledTextInput}[data-garden-focus-visible],
     & > button[data-garden-focus-visible],
     & > ${StyledTextInput}:active,
-    & > button:active {
+    & > button:active,
+    & > button[aria-pressed='true'],
+    & > button[aria-pressed='mixed'] {
       z-index: 1;
     }