feat(TextInput): Convert TextInput (Part 2) - Update CSS to use data …

…attributes (#5257)

* feat(TextInput): Remove width props from TextInput

* type fixes

* Revert "Revert "feat(TextInput): Update TextInput to use data attributes for …"

This reverts commit c424c36.

* lint fix

* remove unused imports

* fix type error and add test

* Update to deprecate props

* Fix media styling

* revert back to get

* revert more gets

* Properly mark props as deprecated

.changeset/real-fans-tap.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert TextInput to use data attributes

packages/react/src/Select/Select.tsx

@@ -5,6 +5,8 @@ import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+
 import classes from './Select.module.css'
 
 export type SelectProps = Omit<
@@ -167,7 +169,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       </TextInputWrapper>
     )
   },
-)
+) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
   <option {...props} />

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -13,7 +13,7 @@ import Token from '../Token/Token'
 import type {TokenSizeKeys} from '../Token/TokenBase'
 
 import type {TextInputSizes} from '../internal/components/TextInputWrapper'
-import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
+import TextInputWrapper from '../internal/components/TextInputWrapper'
 import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 import {useFeatureFlag} from '../FeatureFlags'
@@ -271,8 +271,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
       sx={{
-        paddingLeft: textInputHorizPadding,
-        py: `calc(${textInputHorizPadding} / 2)`,
+        paddingLeft: '12px',
+        py: `calc(12px / 2)`,
         ...(block
           ? {
               display: 'flex',

packages/react/src/__tests__/Select.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {Select} from '..'
 import {render} from '@testing-library/react'
 import {FeatureFlags} from '../FeatureFlags'
+import userEvent from '@testing-library/user-event'
 
 describe('Select', () => {
   it('should support `className` on the outermost element', () => {
@@ -155,4 +156,31 @@ describe('Select', () => {
     expect(select).toHaveAttribute('disabled')
     expect(select).toHaveAttribute('disabled')
   })
+
+  it('trigger changes event when option selected', async () => {
+    const {getByLabelText} = render(
+      <>
+        <label htmlFor="default">Choice</label>
+        <Select
+          id="default"
+          onChange={e => {
+            expect(e.currentTarget.value).toBe('one')
+          }}
+        >
+          <Select.Option value="one">Choice one</Select.Option>
+          <Select.Option value="two">Choice two</Select.Option>
+          <Select.Option value="three">Choice three</Select.Option>
+          <Select.Option value="four">Choice four</Select.Option>
+          <Select.Option value="five">Choice five</Select.Option>
+          <Select.Option value="six">Choice six</Select.Option>
+        </Select>
+      </>,
+    )
+
+    const select = getByLabelText('Choice')
+
+    expect(select).toBeDefined()
+
+    await userEvent.selectOptions(select, 'one')
+  })
 })

packages/react/src/__tests__/Textarea.test.tsx

@@ -84,11 +84,11 @@ describe('Textarea', () => {
       width: '100%',
       display: 'flex',
     }
-    const defaultStyles = renderStyles(<Textarea block />)
-    const blockStyles = renderStyles(<Textarea />)
+    const defaultStyles = renderStyles(<Textarea />)
+    const blockStyles = renderStyles(<Textarea block />)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).toEqual(expect.objectContaining(expectedStyles))
   })
 
   it('renders default resize values correctly', () => {