[base-ui][TextareaAutosize] Add border-box to demo (#40646)

mui · Jan 19, 2024 · c5bc62a · c5bc62a
1 parent 4b0edc9
commit c5bc62a
Show file tree

Hide file tree

Showing 20 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
 />
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/...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"
 />