Merge pull request #4889 from GeekyAnts/fix/input-example

fix: input width

Author: surajahmed

example/storybook/stories/components/primitives/Input/Basic.tsx

@@ -4,7 +4,7 @@ import { Input, Box } from 'native-base';
 export const Example = () => {
   return (
     <Box alignItems="center">
-      <Input mx="3" placeholder="Input" w="75%" maxWidth="300px" />
+      <Input mx="3" placeholder="Input" w="100%" />
     </Box>
   );
 };

example/storybook/stories/components/primitives/Input/Controlled.tsx

@@ -8,8 +8,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         value={value}
-        w="75%"
-        maxW="300px"
+        w="100%"
         onChangeText={handleChange}
         placeholder="Value Controlled Input"
       />

example/storybook/stories/components/primitives/Input/Masked.tsx

@@ -9,8 +9,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         type={show ? 'text' : 'password'}
-        w="75%"
-        maxW="300px"
+        w="100%"
         py="0"
         InputRightElement={
           <Button

example/storybook/stories/components/primitives/Input/Size.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 
 export const Example = () => {
   return (
-    <Center>
-      <Stack mt={3} space={4} w="75%" maxW="300px">
-        <Input size="xs" placeholder="xs Input" />
-        <Input size="sm" placeholder="sm Input" />
-        <Input size="md" placeholder="md Input" />
-        <Input size="lg" placeholder="lg Input" />
-        <Input size="xl" placeholder="xl Input" />
-        <Input size="2xl" placeholder="2xl Input" />
-      </Stack>
-    </Center>
+    <Stack space={4} w="75%" maxW="300px">
+      <Input size="xs" placeholder="xs Input" />
+      <Input size="sm" placeholder="sm Input" />
+      <Input size="md" placeholder="md Input" />
+      <Input size="lg" placeholder="lg Input" />
+      <Input size="xl" placeholder="xl Input" />
+      <Input size="2xl" placeholder="2xl Input" />
+    </Stack>
   );
 };

example/storybook/stories/components/primitives/Input/Variant.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 export const Example = () => {
   return (
-    <Stack space={4} w="75%">
+    <Stack space={4} w="75%" maxW="300px">
       <Input variant="outline" placeholder="Outline" />
       <Input variant="filled" placeholder="Filled" />
       <Input variant="underlined" placeholder="Underlined" />