Merge branch 'develop' into fix/DES-781-reset-opacity

Amsterdam · May 27, 2024 · f08b8a2 · f08b8a2
2 parents 6daf2c1 + b588d10
commit f08b8a2
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 4 deletions.
diff --git a/packages/react/src/SearchField/SearchFieldInput.test.tsx b/packages/react/src/SearchField/SearchFieldInput.test.tsx
@@ -71,4 +71,20 @@ describe('Search field input', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('renders bidirectional by default using `dir="auto"`', () => {
+    render(<SearchFieldInput />)
+
+    const component = screen.getByRole('searchbox', { name: 'Zoeken' })
+
+    expect(component).toHaveAttribute('dir', 'auto')
+  })
+
+  it('renders left-to-right by using `dir="ltr"`', () => {
+    render(<SearchFieldInput dir="ltr" />)
+
+    const component = screen.getByRole('searchbox', { name: 'Zoeken' })
+
+    expect(component).toHaveAttribute('dir', 'ltr')
+  })
 })
diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -14,7 +14,7 @@ type SearchFieldInputProps = {
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const SearchFieldInput = forwardRef(
-  ({ className, label = 'Zoeken', ...restProps }: SearchFieldInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+  ({ className, dir, label = 'Zoeken', ...restProps }: SearchFieldInputProps, ref: ForwardedRef<HTMLInputElement>) => {
     const id = useId()
 
     return (
@@ -26,6 +26,7 @@ export const SearchFieldInput = forwardRef(
           {...restProps}
           autoComplete="off"
           className={clsx('ams-search-field__input', className)}
+          dir={dir ?? 'auto'}
           enterKeyHint="search"
           id={id}
           ref={ref}

diff --git a/packages/react/src/TextArea/TextArea.test.tsx b/packages/react/src/TextArea/TextArea.test.tsx
@@ -103,4 +103,20 @@ describe('Text area', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('renders bidirectional by default using `dir="auto"`', () => {
+    render(<TextArea />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveAttribute('dir', 'auto')
+  })
+
+  it('renders left-to-right by using `dir="ltr"`', () => {
+    render(<TextArea dir="ltr" />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveAttribute('dir', 'ltr')
+  })
 })
diff --git a/packages/react/src/TextArea/TextArea.tsx b/packages/react/src/TextArea/TextArea.tsx
@@ -13,7 +13,7 @@ export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 }
 
 export const TextArea = forwardRef(
-  ({ className, resize, ...restProps }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => (
+  ({ className, dir, resize, ...restProps }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => (
     <textarea
       {...restProps}
       ref={ref}
@@ -23,6 +23,7 @@ export const TextArea = forwardRef(
         restProps.cols && 'ams-text-area--cols',
         className,
       )}
+      dir={dir ?? 'auto'}
     />
   ),
 )

diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx
@@ -73,4 +73,20 @@ describe('Text input', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('renders bidirectional by default using `dir="auto"`', () => {
+    render(<TextInput />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveAttribute('dir', 'auto')
+  })
+
+  it('renders left-to-right by using `dir="ltr"`', () => {
+    render(<TextInput dir="ltr" />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveAttribute('dir', 'ltr')
+  })
 })
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
@@ -10,8 +10,8 @@ import type { ForwardedRef, InputHTMLAttributes } from 'react'
 export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
 
 export const TextInput = forwardRef(
-  ({ className, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} className={clsx('ams-text-input', className)} ref={ref} type="text" />
+  ({ className, dir, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input {...restProps} className={clsx('ams-text-input', className)} dir={dir ?? 'auto'} ref={ref} type="text" />
   ),
 )