@xqmsg/ui-core 0.16.6 → 0.16.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.6",
+  "version": "0.16.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/Input.stories.tsx

@@ -5,6 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
+import { Flex, Grid, GridItem } from '@chakra-ui/react';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -98,7 +99,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   return (
     <Form formHandler={formHandler}>
-      <Input
+      {/* <Input
         {...args}
         inputType="multi-select"
         setValue={form.setValue}
@@ -141,7 +142,57 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop6"
         inputType="switch"
         setValue={form.setValue}
-      />
+      /> */}
+      <Flex
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Grid templateColumns="repeat(8, 1fr)">
+          <GridItem colSpan={1} pr="10px">
+            <Input
+              label="Long example label"
+              inputType="text"
+              isRequired
+              name={`actions`}
+              ariaLabel="{actionInput.ariaLabel}"
+              control={form.control}
+              setValue={form.setValue}
+              defaultValue="{actionInput.defaultValue}"
+              setError={form.setError}
+              clearErrors={form.clearErrors}
+            />
+          </GridItem>
+          <GridItem colSpan={1} pr="10px">
+            <Input
+              label="hi"
+              inputType="text"
+              isRequired
+              setValue={form.setValue}
+              name={`actions.`}
+              ariaLabel="{adminInput.ariaLabel}"
+              control={form.control}
+              defaultValue="{adminInput.defaultValue}"
+              setError={form.setError}
+              clearErrors={form.clearErrors}
+            />
+          </GridItem>
+          <GridItem colSpan={6} pr="10px">
+            <Input
+              inputType="text"
+              isRequired
+              setValue={form.setValue}
+              name={`action`}
+              ariaLabel="{messageInput.ariaLabel}"
+              control={form.control}
+              defaultValue="{messageInput.defaultValue}"
+              setError={form.setError}
+              clearErrors={form.clearErrors}
+              maxLength={140}
+            />
+          </GridItem>
+        </Grid>
+      </Flex>
     </Form>
   );
 };
@@ -150,6 +201,9 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Input Label',
   inputType: 'text',
+  helperText:
+    '         M1 4.33325H15.1667M11 7.66659H16M11 10.9999H16M8.08333 7.66659H8.5M8.08333 10.9999H8.5',
+
   options: [
     { value: 'section_header', label: 'Section 1', sortValue: 0 },
     {

package/src/components/input/components/label/index.tsx

@@ -18,7 +18,7 @@ export const Label: React.FC<LabelProps> = ({
   label,
 }) => {
   return (
-    <FormLabel display="flex" alignItems="center">
+    <FormLabel display="flex">
       {label}
       {isRequired && (
         <Box ml={1} color={colors.label.error}>

package/src/theme/components/form.ts

@@ -11,11 +11,9 @@ function baseStyleRequiredIndicator() {
 
 function baseStyleHelperText() {
   return {
-    position: 'absolute',
-    color: colors.label.secondary.light,
     mt: 1,
     ml: 1,
-    bottom: 0,
+    color: colors.label.secondary.light,
     fontSize: '13px',
   };
 }