fix(TextArea): take all space when tooltip set (#5445)

Author: matthprost

.changeset/great-showers-marry.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/form": patch
+"@ultraviolet/ui": patch
+---
+
+Fix `<TextArea />` when tooltip is set

packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`TextAreaField > should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-9 {
@@ -270,6 +271,7 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-13 {
@@ -503,6 +505,7 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-9 {

packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -88,6 +89,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -391,6 +393,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -399,6 +402,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -702,6 +706,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -710,6 +715,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -1024,6 +1030,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -1032,6 +1039,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -1380,6 +1388,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-9 {
@@ -1388,6 +1397,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-11 {
@@ -1674,6 +1684,7 @@ exports[`TextArea > should render correctly with basic props 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -1889,6 +1900,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -1897,6 +1909,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -2247,6 +2260,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -2255,6 +2269,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -2559,6 +2574,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -2567,6 +2583,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {
@@ -2871,6 +2888,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-5 {
@@ -2879,6 +2897,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .emotion-7 {

packages/ui/src/components/TextArea/index.tsx

@@ -25,6 +25,7 @@ const STATE_ICON_SIZE = 'small'
 const StyledTextAreaWrapper = styled.div`
   position: relative;
   display: flex;
+  width: 100%;
 `
 
 const StyledTextAreaAbsoluteStack = styled(Stack)`