V0.2.0 release fixes

**AutoComplete** Fix arrow key navigation. **Button** Use boolean props instead of type. **Page** remove container margin. **Tooltip** Update background color and add story. **Tag** Remove cursor = pointer if no `onClick` props is present. **List** Add densed prop. **Input** remove border color change on hover if disabled. **TextArea** update font. **Pagination** Fix anamoly when page number is zero. **Text** Add `textAllign` prop. **DatePicker** should not show current date if value is null. **Drawer** Add closing animation. **Input** Update design for disabled. **Modal** Add responsive design. **Drawer** Add responsive design. **Menu** Update design and functionality. **Calendar** Update design. **Sidebar** Update design.
sha-el · Dec 7, 2020 · 3c4b01a · 3c4b01a
1 parent 0b9c0f1
commit 3c4b01a
Show file tree

Hide file tree

Showing 54 changed files with 1,281 additions and 784 deletions.
diff --git a/src/components/AutoComplete/AutoComplete.stories.tsx b/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -29,6 +29,7 @@ export const Single: Story<SingleAutoComplete<string>> = () => {
       value={value}
       displayValue={(e) => e as string}
       onChange={(e: string) => update(e)}
+      hint="Select an alter ego"
     />
   );
 };

diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
@@ -12,6 +12,8 @@ import { lightText } from '../../helpers/color';
 import { Skeleton } from '../Loading';
 
 export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State<T>> {
+  dataActualLength = 0;
+
   constructor(props) {
     super(props);
 
@@ -20,6 +22,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       data: [],
       open: false,
       loading: false,
+      selected: -1,
     };
   }
 
@@ -41,33 +44,43 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       items = await items;
       this.setState({ loading: false });
     }
+    this.dataActualLength = items.length;
     this.setState({ data: items });
   };
 
   onOpen = (open: boolean) => {
     if (this.props.disabled) {
       return;
     }
+    if (!open) {
+      return this.setState({ open, selected: -1, search: '' });
+    }
     open && this.fetchData();
     this.setState({ open });
   };
 
   displayList = () => {
-    const { data, search, loading } = this.state;
+    const { data, search, loading, selected } = this.state;
     const { listDisplayProp, uniqueIdentifier, searchValue } = this.props;
 
+    const filteredData = data?.filter((v) => searchValue(v).toLowerCase().includes(search.toLowerCase()));
+
+    this.dataActualLength = filteredData.length;
+
     return (
       <Skeleton
         isLoading={loading}
         render={() => (
-          <List style={{ maxHeight: '300px', overflowY: 'auto' }}>
-            {data
-              .filter((v) => searchValue(v).toLowerCase().includes(search))
-              .map((v) => (
-                <ListItem key={uniqueIdentifier(v)} selected={this.isItemSelected(v)} onClick={() => this.onChange(v)}>
-                  {listDisplayProp(v)}
-                </ListItem>
-              ))}
+          <List densed style={{ maxHeight: '300px', overflowY: 'auto' }}>
+            {filteredData?.map((v, i) => (
+              <ListItem
+                key={uniqueIdentifier(v)}
+                selected={this.isItemSelected(v) || selected === i}
+                onClick={() => this.onChange(v)}
+              >
+                {listDisplayProp(v)}
+              </ListItem>
+            ))}
           </List>
         )}
       />
@@ -166,7 +179,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     this.setState({ search }, this.fetchData);
   };
 
-  onChange = (selected: AutoCompleteProps<T>['value']) => {
+  onChange = (selected: T) => {
     const { mode, value, onChange, uniqueIdentifier } = this.props;
     if (mode === 'single') {
       onChange(selected as never);
@@ -185,13 +198,37 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     this.setState({ search: '' });
   };
 
-  onKeyUp = (e: React.KeyboardEvent) => {
-    switch (e.which) {
-      case 27: {
-        return this.onOpen(false);
+  onKeyDown = (e: React.KeyboardEvent) => {
+    const { data, selected, open } = this.state;
+    switch (e.key) {
+      case 'ArrowDown': {
+        if (!open) {
+          return this.onOpen(true);
+        }
+
+        if (selected === this.dataActualLength - 1) {
+          return this.setState({ selected: -1 });
+        }
+
+        return this.setState({ selected: selected + 1 });
       }
-      case 9: {
-        return this.onOpen(true);
+      case 'ArrowUp': {
+        if (!open) {
+          return this.onOpen(true);
+        }
+
+        if (selected === -1) {
+          return this.setState({ selected: this.dataActualLength - 1 });
+        }
+
+        return this.setState({ selected: selected - 1 });
+      }
+      case 'Enter': {
+        if (selected === -1) {
+          return;
+        }
+
+        return this.onChange(data[selected]);
       }
     }
   };
@@ -209,7 +246,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       value: this.displayValue(),
       before: this.renderBefore(),
       onChange: (e) => this.onSearch(e.target.value),
-      onKeyUp: this.onKeyUp,
+      onKeyDown: this.onKeyDown,
       required,
       disabled: this.props.disabled,
     });
@@ -269,4 +306,5 @@ interface State<T> {
   data: T[];
   open: boolean;
   loading: boolean;
+  selected: number;
 }
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -3,7 +3,8 @@ import { Story, Meta } from '@storybook/react';
 
 import { MdHome, MdNavigateNext } from 'react-icons/md';
 import { Breadcrumb, BreadcrumbProps } from './Breadcrumb';
-import { MenuItemGroup, MenuItem } from '../Menu';
+import { MenuItem, Menu } from '../Menu';
+import { Button } from '../Button';
 
 export default {
   title: 'Navigation/Breadcrumb',
@@ -27,8 +28,8 @@ Icons.args = {
   paths: [() => <a href="#">Home</a>, () => <a href="#">Breadcrumb</a>],
 };
 
-export const Menu = Template.bind({});
-Menu.args = {
+export const WithMenu = Template.bind({});
+WithMenu.args = {
   seperator: '>',
   paths: [
     () => (
@@ -37,9 +38,9 @@ Menu.args = {
       </a>
     ),
     () => (
-      <MenuItemGroup title="hello" inline={false}>
-        <MenuItem name="1">Option 1</MenuItem>
-      </MenuItemGroup>
+      <Menu anchor={<Button flat>Options</Button>}>
+        <MenuItem>Option 1</MenuItem>
+      </Menu>
     ),
   ],
 };
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -17,16 +17,16 @@ export default {
 const BlockTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args}>Default</Button>
-    <Button {...args} type="primary">
+    <Button {...args} primary>
       Primary
     </Button>
-    <Button {...args} type="secondary">
+    <Button {...args} secondary>
       Secondary
     </Button>
-    <Button {...args} type="danger">
+    <Button {...args} danger>
       Danger
     </Button>
-    <Button {...args} type="link">
+    <Button {...args} link>
       Link
     </Button>
   </>
@@ -35,16 +35,16 @@ const BlockTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
 const MixedTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args}>Default</Button>
-    <Button {...args} type="primary">
+    <Button {...args} primary>
       Primary
     </Button>
-    <Button {...args} outline type="secondary">
+    <Button {...args} outline secondary>
       Secondary
     </Button>
-    <Button {...args} flat type="danger">
+    <Button {...args} flat danger>
       Danger
     </Button>
-    <Button {...args} type="link">
+    <Button {...args} link>
       Link
     </Button>
   </>
@@ -53,11 +53,11 @@ const MixedTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
 const CircleTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args} shape="circle" />
-    <Button {...args} type="primary" shape="circle" />
-    <Button {...args} type="secondary" outline shape="circle" />
-    <Button {...args} type="secondary" flat shape="circle" />
-    <Button {...args} type="danger" disabled shape="circle" />
-    <Button {...args} type="link" shape="circle" />
+    <Button {...args} primary shape="circle" />
+    <Button {...args} secondary outline shape="circle" />
+    <Button {...args} secondary flat shape="circle" />
+    <Button {...args} danger disabled shape="circle" />
+    <Button {...args} link shape="circle" />
   </>
 );
 
@@ -98,11 +98,16 @@ Loading.args = {
   loading: true,
 };
 
+export const Size = MixedTemplate.bind({});
+Size.args = {
+  size: 'big',
+};
+
 export const Group = () => (
   <ButtonGroup>
     <Button>Default</Button>
-    <Button type="primary">Primary</Button>
-    <Button type="secondary">Secondary</Button>
-    <Button type="danger">Danger</Button>
+    <Button primary>Primary</Button>
+    <Button secondary>Secondary</Button>
+    <Button danger>Danger</Button>
   </ButtonGroup>
 );