From c5bc62ad67ca47cbfed6a786238a6c5a9bb02ce7 Mon Sep 17 00:00:00 2001
From: young <97073795+ANUGLYPLUGIN@users.noreply.github.com>
Date: Sat, 20 Jan 2024 01:07:04 +0800
Subject: [PATCH] [base-ui][TextareaAutosize] Add border-box to demo (#40646)

---
 docs/data/base/components/textarea-autosize/EmptyTextarea.js    | 1 +
 docs/data/base/components/textarea-autosize/EmptyTextarea.tsx   | 1 +
 .../data/base/components/textarea-autosize/MaxHeightTextarea.js | 1 +
 .../base/components/textarea-autosize/MaxHeightTextarea.tsx     | 1 +
 .../data/base/components/textarea-autosize/MinHeightTextarea.js | 1 +
 .../base/components/textarea-autosize/MinHeightTextarea.tsx     | 1 +
 .../components/textarea-autosize/UnstyledTextarea/css/index.js  | 1 +
 .../components/textarea-autosize/UnstyledTextarea/css/index.tsx | 1 +
 .../textarea-autosize/UnstyledTextarea/system/index.js          | 1 +
 .../textarea-autosize/UnstyledTextarea/system/index.tsx         | 1 +
 .../textarea-autosize/UnstyledTextarea/tailwind/index.js        | 2 +-
 .../textarea-autosize/UnstyledTextarea/tailwind/index.tsx       | 2 +-
 .../UnstyledTextarea/tailwind/index.tsx.preview                 | 2 +-
 .../textarea-autosize/UnstyledTextareaIntroduction/css/index.js | 1 +
 .../UnstyledTextareaIntroduction/css/index.tsx                  | 1 +
 .../UnstyledTextareaIntroduction/system/index.js                | 1 +
 .../UnstyledTextareaIntroduction/system/index.tsx               | 1 +
 .../UnstyledTextareaIntroduction/tailwind/index.js              | 2 +-
 .../UnstyledTextareaIntroduction/tailwind/index.tsx             | 2 +-
 .../UnstyledTextareaIntroduction/tailwind/index.tsx.preview     | 2 +-
 20 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
index 0b4d410b78b157..6f4adc9941067d 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
@@ -27,6 +27,7 @@ export default function EmptyTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
index 0b4d410b78b157..6f4adc9941067d 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
@@ -27,6 +27,7 @@ export default function EmptyTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
index f3423480f17356..94b8511fa2a176 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
@@ -27,6 +27,7 @@ export default function MaxHeightTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
index f3423480f17356..94b8511fa2a176 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
@@ -27,6 +27,7 @@ export default function MaxHeightTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
index d241bf3985ad83..ed21fd8b460277 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
@@ -27,6 +27,7 @@ export default function MinHeightTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
index d241bf3985ad83..ed21fd8b460277 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
@@ -27,6 +27,7 @@ export default function MinHeightTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
index 3315ed8fd72393..440547ea287079 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
@@ -53,6 +53,7 @@ function Styles() {
     <style>
       {`
       .CustomTextarea {
+        box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
index 3315ed8fd72393..440547ea287079 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
@@ -53,6 +53,7 @@ function Styles() {
     <style>
       {`
       .CustomTextarea {
+        box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
index d6e31ea1f2b85a..770ddcce916367 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
@@ -27,6 +27,7 @@ export default function EmptyTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
index d6e31ea1f2b85a..770ddcce916367 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
@@ -27,6 +27,7 @@ export default function EmptyTextarea() {
 
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
+    box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
index 94495580bf6d75..754ff5fe778af0 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
index 94495580bf6d75..754ff5fe778af0 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
index dd72ce76f5df63..e6152d5f7eca92 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
 <TextareaAutosize
-  className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+  className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
   aria-label="Demo input"
   placeholder="Empty"
 />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
index 3aa49c68177932..1759a7e92e5d75 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
@@ -53,6 +53,7 @@ function Styles() {
     <style>
       {`
       .CustomTextareaIntrocudtion {
+        box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
index 3aa49c68177932..1759a7e92e5d75 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
@@ -53,6 +53,7 @@ function Styles() {
     <style>
       {`
       .CustomTextareaIntrocudtion {
+        box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
index 0c89e5e0be6ea6..da4cc78174e798 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
@@ -30,6 +30,7 @@ const grey = {
 
 const TextareaAutosize = styled(BaseTextareaAutosize)(
   ({ theme }) => `
+  box-sizing: border-box;
   width: 320px;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
index 0c89e5e0be6ea6..da4cc78174e798 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
@@ -30,6 +30,7 @@ const grey = {
 
 const TextareaAutosize = styled(BaseTextareaAutosize)(
   ({ theme }) => `
+  box-sizing: border-box;
   width: 320px;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
index faa57d8d4e344b..f0fc8da86f98f8 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
@@ -14,7 +14,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="empty textarea"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
index faa57d8d4e344b..f0fc8da86f98f8 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
         aria-label="empty textarea"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
index 7507ca10f8168e..94f09f2d61e707 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
 <TextareaAutosize
-  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
   aria-label="empty textarea"
   placeholder="Empty"
 />
\ No newline at end of file