add css and tailwind demo for textarea component

mui · Sep 18, 2023 · 4ac55e3 · 4ac55e3
1 parent 9e38522
commit 4ac55e3
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 1 deletion.
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextareaIntrocudtion"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntrocudtion {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntrocudtion:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntrocudtion:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntrocudtion:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextareaIntrocudtion"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntrocudtion {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntrocudtion:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntrocudtion:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntrocudtion:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/...data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview b/...data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
@@ -0,0 +1,8 @@
+<React.Fragment>
+  <TextareaAutosize
+    className="CustomTextareaIntrocudtion"
+    aria-label="empty textarea"
+    placeholder="Empty"
+  />
+  <Styles />
+</React.Fragment>
diff --git a/...-autosize/UnstyledTextareaIntroduction.js → ...tyledTextareaIntroduction/system/index.js b/...-autosize/UnstyledTextareaIntroduction.js → ...tyledTextareaIntroduction/system/index.js
diff --git a/...autosize/UnstyledTextareaIntroduction.tsx → ...yledTextareaIntroduction/system/index.tsx b/...autosize/UnstyledTextareaIntroduction.tsx → ...yledTextareaIntroduction/system/index.tsx
diff --git a/.../UnstyledTextareaIntroduction.tsx.preview → ...areaIntroduction/system/index.tsx.preview b/.../UnstyledTextareaIntroduction.tsx.preview → ...areaIntroduction/system/index.tsx.preview
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  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"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  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"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/...base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/...base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
@@ -0,0 +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"
+  aria-label="empty textarea"
+  placeholder="Empty"
+/>
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -19,7 +19,7 @@ Textarea Autosize is a utility component that replaces the native `<textarea>` H
 
 The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.
 
-{{"demo": "UnstyledTextareaIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+{{"demo": "UnstyledTextareaIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Component