Update docs and demos

Author: mj12albert

docs/data/material/components/chips/AvatarChips.js

@@ -4,8 +4,8 @@ import Stack from '@mui/material/Stack';
 export default function BasicChips() {
   return (
     <Stack direction="row" spacing={1}>
-      <Chip label="Chip Filled" />
-      <Chip label="Chip Outlined" variant="outlined" />
+      <Chip label="Filled" />
+      <Chip label="Outlined" variant="outlined" />
     </Stack>
   );
 }

docs/data/material/components/chips/AvatarChips.tsx

@@ -4,8 +4,8 @@ import Stack from '@mui/material/Stack';
 export default function BasicChips() {
   return (
     <Stack direction="row" spacing={1}>
-      <Chip label="Chip Filled" />
-      <Chip label="Chip Outlined" variant="outlined" />
+      <Chip label="Filled" />
+      <Chip label="Outlined" variant="outlined" />
     </Stack>
   );
 }

docs/data/material/components/chips/AvatarChips.tsx.preview

@@ -1,2 +1,2 @@
-<Chip label="Chip Filled" />
-<Chip label="Chip Outlined" variant="outlined" />
+<Chip label="Filled" />
+<Chip label="Outlined" variant="outlined" />

docs/data/material/components/chips/BasicChips.js

@@ -0,0 +1,24 @@
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import ScheduleIcon from '@mui/icons-material/Schedule';
+import DoneIcon from '@mui/icons-material/Done';
+
+export default function ChipAdornments() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip
+        label="Maya Johnson"
+        color="primary"
+        startAdornment={<Avatar>M</Avatar>}
+      />
+      <Chip
+        label="In progress"
+        variant="outlined"
+        color="secondary"
+        startAdornment={<ScheduleIcon />}
+      />
+      <Chip label="Completed" color="success" endAdornment={<DoneIcon />} />
+    </Stack>
+  );
+}

docs/data/material/components/chips/BasicChips.tsx

@@ -0,0 +1,24 @@
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import ScheduleIcon from '@mui/icons-material/Schedule';
+import DoneIcon from '@mui/icons-material/Done';
+
+export default function ChipAdornments() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip
+        label="Maya Johnson"
+        color="primary"
+        startAdornment={<Avatar>M</Avatar>}
+      />
+      <Chip
+        label="In progress"
+        variant="outlined"
+        color="secondary"
+        startAdornment={<ScheduleIcon />}
+      />
+      <Chip label="Completed" color="success" endAdornment={<DoneIcon />} />
+    </Stack>
+  );
+}

docs/data/material/components/chips/BasicChips.tsx.preview

@@ -0,0 +1,12 @@
+<Chip
+  label="Maya Johnson"
+  color="primary"
+  startAdornment={<Avatar>M</Avatar>}
+/>
+<Chip
+  label="In progress"
+  variant="outlined"
+  color="secondary"
+  startAdornment={<ScheduleIcon />}
+/>
+<Chip label="Completed" color="success" endAdornment={<DoneIcon />} />

docs/data/material/components/chips/ChipAdornments.js

@@ -0,0 +1,24 @@
+import Chip from '@mui/material/Chip';
+import ChipButton from '@mui/material/ChipButton';
+import Stack from '@mui/material/Stack';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import LoopIcon from '@mui/icons-material/Loop';
+
+export default function ChipButtons() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip
+        label="Assign"
+        startAdornment={<PersonAddIcon />}
+        action={<ChipButton onClick={() => {}} />}
+      />
+      <Chip
+        label="Reset"
+        variant="outlined"
+        color="primary"
+        endAdornment={<LoopIcon />}
+        action={<ChipButton onClick={() => {}} />}
+      />
+    </Stack>
+  );
+}