feat(ui): chonkify textArea (#86471)

static/app/components/button.tsx

@@ -469,8 +469,8 @@ const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProp
   const borderStyles = !translucentBorder
     ? {}
     : {
-        height: formStyles.height - 2,
-        minHeight: formStyles.minHeight - 2,
+        height: `calc(${formStyles.height} - 2px)`,
+        minHeight: `calc(${formStyles.minHeight} - 2px)`,
         paddingTop: buttonPadding.paddingTop - 1,
         paddingBottom: buttonPadding.paddingBottom - 1,
         margin: 1,

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

@@ -4,6 +4,8 @@ import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
 import {Input, type InputStylesProps} from 'sentry/components/core/input';
+import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
+import {withChonk} from 'sentry/utils/theme/withChonk';
 
 export interface TextAreaProps
   extends Omit<
@@ -27,24 +29,22 @@ export interface TextAreaProps
 }
 
 const TextAreaControl = forwardRef(function TextAreaControl(
-  {autosize, rows, maxRows, size: _size, ...p}: TextAreaProps,
+  {autosize, rows = 3, maxRows, size: _size, ...p}: TextAreaProps,
   ref: React.Ref<HTMLTextAreaElement>
 ) {
   return autosize ? (
-    <TextareaAutosize {...p} ref={ref} rows={rows ? rows : 2} maxRows={maxRows} />
+    <TextareaAutosize {...p} ref={ref} rows={rows} maxRows={maxRows} />
   ) : (
-    <textarea ref={ref} {...p} />
+    <textarea ref={ref} {...p} rows={rows} />
   );
 });
 
 TextAreaControl.displayName = 'TextAreaControl';
 
-export const TextArea = styled(Input.withComponent(TextAreaControl), {
-  shouldForwardProp: (p: string) =>
-    ['autosize', 'rows', 'maxRows'].includes(p) || isPropValid(p),
+const StyledTextArea = styled(Input.withComponent(TextAreaControl), {
+  shouldForwardProp: (p: string) => ['autosize', 'maxRows'].includes(p) || isPropValid(p),
 })`
   line-height: ${p => p.theme.text.lineHeightBody};
-
   /** Allow react-textarea-autosize to freely control height based on props. */
   ${p =>
     p.autosize &&
@@ -53,3 +53,22 @@ export const TextArea = styled(Input.withComponent(TextAreaControl), {
       min-height: unset;
     `}
 ` as unknown as typeof TextAreaControl;
+
+export const TextArea = withChonk(
+  StyledTextArea,
+  chonkStyled(StyledTextArea)`
+    /* re-set height to let it be determined by the rows prop */
+    height: unset;
+    /* this calculation reduces padding to account for the line-height, which ensures text is still correctly centered. */
+    ${({theme, size = 'md'}) => `padding-top: calc(
+      (${theme.form[size].height} -
+        (${theme.form[size].fontSize} * ${theme.text.lineHeightBody})
+      ) / 2
+    )`};
+    ${({theme, size = 'md'}) => `padding-bottom: calc(
+      (${theme.form[size].height} -
+        (${theme.form[size].fontSize} * ${theme.text.lineHeightBody})
+      ) / 2
+    )`};
+`
+);

static/app/components/deprecatedSmartSearchBar/index.tsx

@@ -2222,7 +2222,7 @@ export type {Props as SmartSearchBarProps};
 export {DeprecatedSmartSearchBar};
 
 const Container = styled('div')<{inputHasFocus: boolean}>`
-  min-height: ${p => p.theme.form.md.height}px;
+  min-height: ${p => p.theme.form.md.height};
   border: ${p =>
     p.inputHasFocus ? `1px solid ${p.theme.focusBorder}` : `1px solid ${p.theme.border}`};
   box-shadow: ${p =>

static/app/components/organizations/pageFilterBar.tsx

@@ -10,7 +10,7 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>`
   display: flex;
   position: relative;
   border-radius: ${p => p.theme.borderRadius};
-  height: ${p => p.theme.form.md.height}px;
+  height: ${p => p.theme.form.md.height};
   ${p =>
     p.condensed &&
     `

static/app/components/tabs/tab.tsx

@@ -305,7 +305,7 @@ const innerWrapStyles = ({
   align-items: center;
   position: relative;
   height: calc(
-    ${theme.form.sm.height}px + ${orientation === 'horizontal' ? space(0.75) : '0px'}
+    ${theme.form.sm.height} + ${orientation === 'horizontal' ? space(0.75) : '0px'}
   );
   border-radius: ${theme.borderRadius};
   transform: translateY(1px);

static/app/utils/theme/theme.chonk.tsx

@@ -27,20 +27,20 @@ const formTheme: FormTheme = {
    */
   form: {
     md: {
-      height: 32,
-      minHeight: 32,
+      height: '32px',
+      minHeight: '32px',
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     sm: {
-      height: 28,
-      minHeight: 28,
+      height: '28px',
+      minHeight: '28px',
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     xs: {
-      height: 24,
-      minHeight: 24,
+      height: '24px',
+      minHeight: '24px',
       fontSize: '0.75rem',
       lineHeight: '0.875rem',
     },

static/app/utils/theme/theme.tsx

@@ -807,9 +807,9 @@ export type FormTheme = {
   form: {
     [key in FormSize]: {
       fontSize: string;
-      height: number;
+      height: string;
       lineHeight: string;
-      minHeight: number;
+      minHeight: string;
     };
   };
   formPadding: {
@@ -834,20 +834,20 @@ const formTheme: FormTheme = {
    */
   form: {
     md: {
-      height: 38,
-      minHeight: 38,
+      height: '38px',
+      minHeight: '38px',
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     sm: {
-      height: 32,
-      minHeight: 32,
+      height: '32px',
+      minHeight: '32px',
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     xs: {
-      height: 26,
-      minHeight: 26,
+      height: '26px',
+      minHeight: '26px',
       fontSize: '0.75rem',
       lineHeight: '0.875rem',
     },

static/app/views/dashboards/widgetBuilder/buildSteps/groupByStep/queryField.tsx

@@ -78,7 +78,7 @@ export function QueryField({
 }
 
 const DragAndReorderButton = styled(Button)`
-  height: ${p => p.theme.form.md.height}px;
+  height: ${p => p.theme.form.md.height};
 `;
 
 const QueryFieldWrapper = styled('div')`

static/app/views/dashboards/widgetBuilder/components/common/sortableFieldWrapper.tsx

@@ -65,7 +65,7 @@ function SortableVisualizeFieldWrapper({
 export default SortableVisualizeFieldWrapper;
 
 const DragAndReorderButton = styled(Button)<{isDragging: boolean}>`
-  height: ${p => p.theme.form.md.height}px;
+  height: ${p => p.theme.form.md.height};
 
   ${p => p.isDragging && p.theme.visuallyHidden}
 `;

static/app/views/dashboards/widgetBuilder/components/visualize/visualizeGhostField.tsx

@@ -240,5 +240,5 @@ const Ghost = styled('div')`
 `;
 
 const DragAndReorderButton = styled(Button)`
-  height: ${p => p.theme.form.md.height}px;
+  height: ${p => p.theme.form.md.height};
 `;