@xqmsg/ui-core 0.16.5 → 0.16.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.5",
+  "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/StackedCheckbox/StackedCheckbox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from '@chakra-ui/react';
+import { Checkbox, Text } from '@chakra-ui/react';
 import { SelectFieldProps } from '../InputTypes';
 
 export interface StackedCheckboxProps extends SelectFieldProps {
@@ -12,14 +12,22 @@ export interface StackedCheckboxProps extends SelectFieldProps {
 const StackedCheckbox = React.forwardRef<
   HTMLInputElement,
   StackedCheckboxProps
->(({ value, label, defaultValue }, _ref) => {
+>(({ value, label, onChange }, _ref) => {
+  if (value === null) return null;
+
   return (
     <Checkbox
       ref={_ref}
       value={String(value)}
-      defaultChecked={Boolean(defaultValue)}
+      defaultChecked={Boolean(value)}
+      defaultValue={value}
+      onChange={e => {
+        if (onChange) return onChange(e.target.checked as any);
+      }}
     >
-      {label}
+      <Text fontSize="13px" alignSelf="center">
+        {label}
+      </Text>
     </Checkbox>
   );
 });

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/components/input/index.tsx

@@ -166,7 +166,6 @@ export function Input<T extends FieldValues>({
             onChange={onChange}
             onBlur={onBlur}
             ref={ref}
-            disabled={disabled}
             value={value}
             defaultValue={defaultValue}
             label={label as string}
@@ -244,9 +243,13 @@ export function Input<T extends FieldValues>({
           id={name}
           isInvalid={isInvalid}
           position="relative"
-          py={label || helperText || isInvalid ? 6 : 0}
+          py={
+            (label || helperText || isInvalid) && inputType !== 'checkbox'
+              ? 6
+              : 0
+          }
         >
-          {label && (
+          {label && inputType !== 'checkbox' && (
             <Label
               tooltipText={tooltipText}
               label={label}

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',
   };
 }