feat(ui): chonkify InputGroup

static/app/components/core/input/index.tsx

@@ -4,7 +4,7 @@ import type {Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {chonkInputStyles} from 'sentry/components/core/input/chonk';
+import {chonkInputStyles} from 'sentry/components/core/input/index.chonk';
 import type {FormSize} from 'sentry/utils/theme';
 
 export interface InputStylesProps {

static/app/components/core/input/inputGroup.chonk.tsx

@@ -0,0 +1,80 @@
+import {css, type DO_NOT_USE_ChonkTheme} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {Input} from 'sentry/components/core/input/index';
+import Textarea from 'sentry/components/forms/controls/textarea';
+import {space} from 'sentry/styles/space';
+import type {FormSize, StrictCSSObject} from 'sentry/utils/theme';
+import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
+
+export interface InputStyleProps {
+  leadingWidth?: number;
+  size?: FormSize;
+  trailingWidth?: number;
+}
+
+export const InputItemsWrap = styled('div')`
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: ${space(1)};
+
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const chonkItemsPadding = {
+  md: 8,
+  sm: 6,
+  xs: 4,
+} satisfies Record<FormSize, number>;
+
+const chonkInputStyles = ({
+  leadingWidth,
+  trailingWidth,
+  size = 'md',
+  theme,
+}: InputStyleProps & {theme: DO_NOT_USE_ChonkTheme}): StrictCSSObject => css`
+  ${leadingWidth &&
+  `
+    padding-left: calc(
+      ${theme.formPadding[size].paddingLeft}px
+      + ${chonkItemsPadding[size]}px
+      + ${leadingWidth}px
+    );
+  `}
+
+  ${trailingWidth &&
+  `
+    padding-right: calc(
+      ${theme.formPadding[size].paddingRight}px
+      + ${chonkItemsPadding[size]}px
+      + ${trailingWidth}px
+    );
+  `}
+`;
+
+export const ChonkStyledInput = chonkStyled(Input)<InputStyleProps>`
+  ${chonkInputStyles}
+`;
+
+export const ChonkStyledTextArea = chonkStyled(Textarea)<InputStyleProps>`
+  ${chonkInputStyles}
+`;
+
+export const ChonkStyledLeadingItemsWrap = chonkStyled(InputItemsWrap)<{
+  size: FormSize;
+  disablePointerEvents?: boolean;
+}>`
+    left: ${p => p.theme.formPadding[p.size].paddingLeft + 1}px;
+    ${p => p.disablePointerEvents && `pointer-events: none;`}
+  `;
+
+export const ChonkStyledTrailingItemsWrap = chonkStyled(InputItemsWrap)<{
+  size: FormSize;
+  disablePointerEvents?: boolean;
+}>`
+    right: ${p => p.theme.formPadding[p.size].paddingRight + 1}px;
+    ${p => p.disablePointerEvents && `pointer-events: none;`}
+  `;

static/app/components/core/input/inputGroup.stories.tsx

@@ -2,7 +2,6 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
-import {Input} from 'sentry/components/core/input/index';
 import JSXNode from 'sentry/components/stories/jsxNode';
 import Matrix from 'sentry/components/stories/matrix';
 import {IconAttachment, IconSearch, IconSettings} from 'sentry/icons';
@@ -21,15 +20,46 @@ export default storyBook('InputGroup', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <JSXNode name="Input" /> component comes in different sizes:
+          The <JSXNode name="InputGroup" /> component comes in different sizes:
         </p>
-        <InputGroup>
-          <InputGroup.LeadingItems disablePointerEvents>
-            <IconSearch />
-          </InputGroup.LeadingItems>
-          <InputGroup.Input placeholder="Search" />
-        </InputGroup>
-        <Input placeholder="hodl" />
+        <Grid>
+          <div>
+            <code>md (default)</code>
+            <InputGroup>
+              <InputGroup.LeadingItems disablePointerEvents>
+                <IconSearch />
+              </InputGroup.LeadingItems>
+              <InputGroup.Input size="md" placeholder="Search" />
+              <InputGroup.TrailingItems disablePointerEvents>
+                <IconAttachment />
+              </InputGroup.TrailingItems>
+            </InputGroup>
+          </div>
+          <div>
+            <code>sm</code>
+            <InputGroup>
+              <InputGroup.LeadingItems disablePointerEvents>
+                <IconSearch />
+              </InputGroup.LeadingItems>
+              <InputGroup.Input size="sm" placeholder="Search" />
+              <InputGroup.TrailingItems disablePointerEvents>
+                <IconAttachment />
+              </InputGroup.TrailingItems>
+            </InputGroup>
+          </div>
+          <div>
+            <code>xs</code>
+            <InputGroup>
+              <InputGroup.LeadingItems disablePointerEvents>
+                <IconSearch />
+              </InputGroup.LeadingItems>
+              <InputGroup.Input size="xs" placeholder="Search" />
+              <InputGroup.TrailingItems disablePointerEvents>
+                <IconAttachment />
+              </InputGroup.TrailingItems>
+            </InputGroup>
+          </div>
+        </Grid>
       </Fragment>
     );
   });

static/app/components/core/input/inputGroup.tsx

@@ -13,10 +13,18 @@ import styled from '@emotion/styled';
 
 import type {InputProps} from 'sentry/components/core/input';
 import {Input as _Input} from 'sentry/components/core/input';
+import {
+  ChonkStyledInput,
+  ChonkStyledLeadingItemsWrap,
+  ChonkStyledTextArea,
+  ChonkStyledTrailingItemsWrap,
+  InputItemsWrap,
+  type InputStyleProps,
+} from 'sentry/components/core/input/inputGroup.chonk';
 import type {TextAreaProps} from 'sentry/components/forms/controls/textarea';
 import _TextArea from 'sentry/components/forms/controls/textarea';
-import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';
+import {withChonk} from 'sentry/utils/theme/withChonk';
 
 interface InputContext {
   /**
@@ -207,23 +215,6 @@ export const InputGroupWrap = styled('div')<{disabled?: boolean}>`
   ${p => p.disabled && `color: ${p.theme.disabled};`};
 `;
 
-const InputItemsWrap = styled('div')`
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  gap: ${space(1)};
-
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-interface InputStyleProps {
-  leadingWidth?: number;
-  size?: FormSize;
-  trailingWidth?: number;
-}
-
 const getInputStyles = ({
   leadingWidth,
   trailingWidth,
@@ -247,26 +238,38 @@ const getInputStyles = ({
   `}
 `;
 
-const StyledInput = styled(_Input)<InputStyleProps>`
-  ${getInputStyles}
-`;
+const StyledInput = withChonk(
+  styled(_Input)<InputStyleProps>`
+    ${getInputStyles}
+  `,
+  ChonkStyledInput
+);
 
-const StyledTextArea = styled(_TextArea)<InputStyleProps>`
-  ${getInputStyles}
-`;
+const StyledTextArea = withChonk(
+  styled(_TextArea)<InputStyleProps>`
+    ${getInputStyles}
+  `,
+  ChonkStyledTextArea
+);
 
-const InputLeadingItemsWrap = styled(InputItemsWrap)<{
-  size: FormSize;
-  disablePointerEvents?: boolean;
-}>`
-  left: ${p => p.theme.formPadding[p.size].paddingLeft + 1}px;
-  ${p => p.disablePointerEvents && `pointer-events: none;`}
-`;
+const InputLeadingItemsWrap = withChonk(
+  styled(InputItemsWrap)<{
+    size: FormSize;
+    disablePointerEvents?: boolean;
+  }>`
+    left: ${p => p.theme.formPadding[p.size].paddingLeft + 1}px;
+    ${p => p.disablePointerEvents && `pointer-events: none;`}
+  `,
+  ChonkStyledLeadingItemsWrap
+);
 
-const InputTrailingItemsWrap = styled(InputItemsWrap)<{
-  size: FormSize;
-  disablePointerEvents?: boolean;
-}>`
-  right: ${p => p.theme.formPadding[p.size].paddingRight * 0.75 + 1}px;
-  ${p => p.disablePointerEvents && `pointer-events: none;`}
-`;
+const InputTrailingItemsWrap = withChonk(
+  styled(InputItemsWrap)<{
+    size: FormSize;
+    disablePointerEvents?: boolean;
+  }>`
+    right: ${p => p.theme.formPadding[p.size].paddingRight * 0.75 + 1}px;
+    ${p => p.disablePointerEvents && `pointer-events: none;`}
+  `,
+  ChonkStyledTrailingItemsWrap
+);