added display as grid (#37146)

mui · May 9, 2023 · e916b0f · e916b0f
1 parent 3ed1f0b
commit e916b0f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 34 deletions.
diff --git a/docs/data/joy/components/input/InputSlotProps.js b/docs/data/joy/components/input/InputSlotProps.js
@@ -1,18 +1,32 @@
 import * as React from 'react';
 import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
 
 export default function InputSlotProps() {
+  const inputRef = React.useRef(null);
   return (
-    <Input
-      type="number"
-      defaultValue={2.5}
-      slotProps={{
-        input: {
-          min: 1,
-          max: 5,
-          step: 0.1,
-        },
-      }}
-    />
+    <Stack spacing={1.5} sx={{ minWidth: 300 }}>
+      <Input
+        type="number"
+        defaultValue={2.5}
+        slotProps={{
+          input: {
+            ref: inputRef,
+            min: 1,
+            max: 5,
+            step: 0.1,
+          },
+        }}
+      />
+      <Input
+        type="date"
+        slotProps={{
+          input: {
+            min: '2018-06-07T00:00',
+            max: '2018-06-14T00:00',
+          },
+        }}
+      />
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx b/docs/data/joy/components/input/InputSlotProps.tsx
@@ -1,18 +1,32 @@
 import * as React from 'react';
 import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
 
 export default function InputSlotProps() {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
   return (
-    <Input
-      type="number"
-      defaultValue={2.5}
-      slotProps={{
-        input: {
-          min: 1,
-          max: 5,
-          step: 0.1,
-        },
-      }}
-    />
+    <Stack spacing={1.5} sx={{ minWidth: 300 }}>
+      <Input
+        type="number"
+        defaultValue={2.5}
+        slotProps={{
+          input: {
+            ref: inputRef,
+            min: 1,
+            max: 5,
+            step: 0.1,
+          },
+        }}
+      />
+      <Input
+        type="date"
+        slotProps={{
+          input: {
+            min: '2018-06-07T00:00',
+            max: '2018-06-14T00:00',
+          },
+        }}
+      />
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx.preview b/docs/data/joy/components/input/InputSlotProps.tsx.preview
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -139,7 +139,6 @@ export const StyledInputHtml = styled('input')<{ ownerState: InputOwnerState }>(
     outline: 0, // remove the native input outline
     padding: 0, // remove the native input padding
     flex: 1,
-    alignSelf: 'stretch',
     color: 'inherit',
     backgroundColor: 'transparent',
     fontFamily: 'inherit',