ref(textarea): Improve Textarea content alignment (#24336)

docs-ui/components/form-fields.stories.js

@@ -143,7 +143,7 @@ export const _TextareaField = ({autosize, rows}) => (
 _TextareaField.storyName = 'TextareaField';
 _TextareaField.args = {
   autosize: true,
-  rows: 2,
+  rows: 1,
 };
 
 export const __BooleanField = () => (

src/sentry/static/sentry/app/components/modals/debugFileSourceModal.tsx

@@ -164,6 +164,7 @@ const gcsFields: FieldMap = {
     multiline: true,
     autosize: true,
     maxRows: 5,
+    rows: 3,
     label: t('Private Key'),
     placeholder: '-----BEGIN PRIVATE KEY-----\n[PRIVATE-KEY]\n-----END PRIVATE KEY-----',
     help: tct('The service account key. Credentials can be managed on the [link].', {

src/sentry/static/sentry/app/data/forms/cspReports.tsx

@@ -27,6 +27,7 @@ const formGroups: JsonFormObject[] = [
         type: 'string',
         multiline: true,
         autosize: true,
+        rows: 4,
         placeholder: 'e.g.\nfile://*\n*.example.com\nexample.com',
         label: t('Additional ignored sources'),
         help: t(

src/sentry/static/sentry/app/data/forms/inboundFilters.tsx

@@ -24,6 +24,7 @@ const formGroups: JsonFormObject[] = [
         type: 'string',
         multiline: true,
         autosize: true,
+        rows: 1,
         maxRows: 10,
 
         placeholder: 'e.g. 127.0.0.1 or 10.0.0.0/8',
@@ -50,6 +51,7 @@ export const customFilterFields: Field[] = [
     multiline: true,
     autosize: true,
     maxRows: 10,
+    rows: 1,
 
     placeholder: 'e.g. 1.* or [!3].[0-9].*',
     label: t('Releases'),
@@ -68,6 +70,7 @@ export const customFilterFields: Field[] = [
     multiline: true,
     autosize: true,
     maxRows: 10,
+    rows: 1,
 
     placeholder: 'e.g. TypeError* or *: integer division or modulo by zero',
     label: t('Error Message'),

src/sentry/static/sentry/app/data/forms/organizationSecurityAndPrivacyGroups.tsx

@@ -130,6 +130,7 @@ export default [
         multiline: true,
         autosize: true,
         maxRows: 10,
+        rows: 1,
         placeholder: 'e.g. email',
         label: t('Global Sensitive Fields'),
         help: t(
@@ -147,6 +148,7 @@ export default [
         multiline: true,
         autosize: true,
         maxRows: 10,
+        rows: 1,
         placeholder: t('e.g. business-email'),
         label: t('Global Safe Fields'),
         help: t(

src/sentry/static/sentry/app/data/forms/projectGeneralSettings.tsx

@@ -116,6 +116,7 @@ export const fields: Record<string, Field> = {
     multiline: true,
     autosize: true,
     maxRows: 10,
+    rows: 1,
     placeholder: t('https://example.com or example.com'),
     label: t('Allowed Domains'),
     help: t('Separate multiple entries with a newline'),

src/sentry/static/sentry/app/data/forms/projectSecurityAndPrivacyGroups.tsx

@@ -112,6 +112,7 @@ export default [
         multiline: true,
         autosize: true,
         maxRows: 10,
+        rows: 1,
         placeholder: t('email'),
         label: t('Additional Sensitive Fields'),
         help: t(
@@ -126,6 +127,7 @@ export default [
         multiline: true,
         autosize: true,
         maxRows: 10,
+        rows: 1,
         placeholder: t('business-email'),
         label: t('Safe Fields'),
         help: t(

src/sentry/static/sentry/app/data/forms/sentryApplication.tsx

@@ -70,6 +70,7 @@ const getPublicFormFields = (): Field[] => [
     type: 'textarea',
     label: 'Schema',
     autosize: true,
+    rows: 1,
     help: tct(
       'Schema for your UI components. Click [schema_docs:here] for documentation.',
       {
@@ -104,6 +105,7 @@ const getPublicFormFields = (): Field[] => [
     type: 'textarea',
     label: 'Overview',
     autosize: true,
+    rows: 1,
     help: 'Description of your Integration and its functionality.',
   },
   {

src/sentry/static/sentry/app/views/settings/components/forms/controls/textarea.tsx

@@ -28,7 +28,7 @@ const TextAreaControl = React.forwardRef(function TextAreaControl(
   ref: React.Ref<HTMLTextAreaElement>
 ) {
   return autosize ? (
-    <TextareaAutosize async ref={ref} rows={rows ? rows : 2} maxRows={maxRows} {...p} />
+    <TextareaAutosize {...p} async ref={ref} rows={rows ? rows : 2} maxRows={maxRows} />
   ) : (
     <textarea ref={ref} {...p} />
   );
@@ -41,8 +41,15 @@ const propFilter = (p: string) =>
 
 const TextArea = styled(TextAreaControl, {shouldForwardProp: propFilter})`
   ${inputStyles};
-  padding: ${space(1)};
-  line-height: 1.3em;
+  min-height: 40px;
+  padding: calc(${space(1)} - 1px) ${space(1)};
+  line-height: 1.5em;
+  ${p =>
+    p.autosize &&
+    `
+      padding: calc(${space(1)} - 2px) ${space(1)};
+      line-height: 1.6em;
+    `}
 `;
 
 export default TextArea;

src/sentry/static/sentry/app/views/settings/organizationRelay/modals/form.tsx

@@ -112,6 +112,7 @@ const Form = ({
           onChange={handleChange('description')}
           value={values.description}
           disabled={disables.description}
+          autosize
         />
       </Field>
     </form>