Minor flex fixes (#84)

* Fix row gutter styles * Minor fixes * Use dynamic zIndex assignment. * Update *CardHeader* to use *h6* for header. * Modal opening and closing animation fix. * Popover add classname for child element. * Fix Calendar error * Add suggested changes * Add global margin and padding. * Add close button with datepicker if timepicker is also there. * Add fix-width for Datepicker popup. * Fix list styles * Add padding & margin and some style fix * Fix failing test cases. * Use SurfaceProp interface and fix linter errors. * Update flex-box in Components. Use margin and padding props. * Minor design fixes Co-authored-by: Prateek Shourya <[email protected]>
sha-el · May 29, 2021 · 1c06818 · 1c06818
1 parent e03ec95
commit 1c06818
Show file tree

Hide file tree

Showing 20 changed files with 452 additions and 1,076 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.1.5",
+    "@emotion/react": "^11.4.0",
     "color": "^3.1.3",
     "csstips": "^1.2.0",
     "debounce": "^1.2.0",
@@ -41,13 +41,13 @@
     "@babel/preset-react": "^7.10.4",
     "@emotion/eslint-plugin": "^11.2.0",
     "@sambego/storybook-state": "^2.0.1",
-    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-contexts": "^5.3.21",
-    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/cli": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/cli": "^6.2.9",
+    "@storybook/react": "^6.2.9",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.3",
     "@types/color": "^3.0.1",
@@ -71,13 +71,12 @@
     "lint-staged": "^10.2.13",
     "prettier": "^2.0.5",
     "react": "^17.0.2",
-    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "source-map-loader": "^1.0.2",
     "stylelint": "^13.6.1",
     "ts-jest": "^26.3.0",
-    "typescript": "^4.2.4"
+    "typescript": "4.2.4"
   },
   "browserslist": [
     "last 2 versions",

diff --git a/src/components/AutoComplete/AutoComplete.stories.tsx b/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -72,7 +72,7 @@ export const AsyncFetch: Story = () => {
       }
       uniqueIdentifier={(e) => String(e.id)}
       listDisplayProp={(e) => (
-        <Row gutter={[0, 20]}>
+        <Row gutter={[0, 50]}>
           <Col flex="0 1 50px">
             <img width="100%" src={e.avatar} />
           </Col>

diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
@@ -71,7 +71,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       <Skeleton
         isLoading={loading}
         render={() => (
-          <List densed style={{ maxHeight: '300px', overflowY: 'auto' }}>
+          <List elevation={0} padding={0} densed style={{ maxHeight: '300px', overflowY: 'auto' }}>
             {filteredData?.map((v, i) => (
               <ListItem
                 key={uniqueIdentifier(v)}
@@ -250,13 +250,14 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
 
     return (
       <Popover
-        trigger={['onClick', 'onFocus']}
+        trigger={['onClick']}
         position="bottom"
         content={this.displayList()}
         onVisibleChange={(v) => this.onOpen(v)}
         visible={open}
         expand
         hideArrow
+        padding={0}
         style={{ child: { display: 'block' } }}
       >
         <div>{inputElem}</div>

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { nestedAccess } from './../../helpers';
 import { Row, Col } from './../../index';
-import { Card, CardBody } from '../Card';
+import { Card } from '../Card';
 import Color from 'color';
 import { Button } from '../Button';
 import { Tooltip } from '../Tooltip';
@@ -189,54 +189,52 @@ export const Calendar: React.FC<CalendarProps> = (props) => {
 
   return (
     <Card elevation={props.elevation} padding={props.padding} margin={props.margin} border={props.border}>
-      <CardBody>
-        <Row gutter={[10, 10]} justifyContent="flex-end">
-          <Col flex="0 1 auto">
-            <Menu
-              height="300px"
-              trigger="onClick"
-              anchor={
-                <Button primary displayBlock flat>
-                  {months[date.getMonth()]}
-                </Button>
-              }
-            >
-              {months.map((v) => (
-                <MenuItem active={v === months[date.getMonth()]} onClick={() => monthChange(v)} key={v}>
-                  {v}
-                </MenuItem>
-              ))}
-            </Menu>
-          </Col>
-          <Col flex="0 1 auto">
-            <Menu
-              height="300px"
-              trigger="onClick"
-              anchor={
-                <Button primary displayBlock flat>
-                  {date.getFullYear()}
-                </Button>
-              }
-            >
-              {arrayBetween(1980, 2030).map((v) => (
-                <MenuItem active={v === date.getFullYear()} onClick={() => yearChange(v)} key={v}>
-                  {v}
-                </MenuItem>
-              ))}
-            </Menu>
+      <Row gutter={[10, 10]} justifyContent="flex-end">
+        <Col flex="0 1 auto">
+          <Menu
+            height="300px"
+            trigger="onClick"
+            anchor={
+              <Button primary displayBlock flat>
+                {months[date.getMonth()]}
+              </Button>
+            }
+          >
+            {months.map((v) => (
+              <MenuItem active={v === months[date.getMonth()]} onClick={() => monthChange(v)} key={v}>
+                {v}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Col>
+        <Col flex="0 1 auto">
+          <Menu
+            height="300px"
+            trigger="onClick"
+            anchor={
+              <Button primary displayBlock flat>
+                {date.getFullYear()}
+              </Button>
+            }
+          >
+            {arrayBetween(1980, 2030).map((v) => (
+              <MenuItem active={v === date.getFullYear()} onClick={() => yearChange(v)} key={v}>
+                {v}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Col>
+      </Row>
+      <Row>
+        {weeks.map((v) => (
+          <Col span={24 / 7} key={v}>
+            <Text fontWeight={600} textAlign="center" variant="p" color="light">
+              {v.slice(0, 3)}
+            </Text>
           </Col>
-        </Row>
-        <Row>
-          {weeks.map((v) => (
-            <Col span={24 / 7} key={v}>
-              <Text fontWeight={600} textAlign="center" variant="p" color="light">
-                {v.slice(0, 3)}
-              </Text>
-            </Col>
-          ))}
-        </Row>
-        <Row>{getdateArray()}</Row>
-      </CardBody>
+        ))}
+      </Row>
+      <Row>{getdateArray()}</Row>
     </Card>
   );
 };

diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
-import { Card, CardHeader, CardBody, CardMedia, Button } from '../..';
+import { Card, CardHeader, CardMedia, Button } from '../..';
 import { IoMdOptions } from 'react-icons/io';
 import { CardProps } from './Card';
 
 export default {
   title: 'Display/Card',
   component: Card,
-  subcomponents: { CardHeader, CardBody, CardMedia },
+  subcomponents: { CardHeader, CardMedia },
   argTypes: {
     // backgroundColor: { control: 'color' },
   },
@@ -21,11 +21,9 @@ HeaderAndBody.args = {
   children: (
     <>
       <CardHeader subtitle="Do you Know Lorem Ipsum?">Lorem Ipsum</CardHeader>
-      <CardBody>
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard
-        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
-        specimen book.
-      </CardBody>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy
+      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
+      book.
     </>
   ),
 };
@@ -38,11 +36,9 @@ CardMediaAndBody.args = {
       <CardHeader subtitle="Do you Know Lorem Ipsum?" action={<Button flat icon={<IoMdOptions />} />}>
         Lorem Ipsum
       </CardHeader>
-      <CardBody>
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard
-        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
-        specimen book.
-      </CardBody>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy
+      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
+      book.
     </>
   ),
 };
diff --git a/src/components/Card/CardBody.tsx b/src/components/Card/CardBody.tsx
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
@@ -1,4 +1,3 @@
 export { Card } from './Card';
 export { CardHeader } from './CardHeader';
-export { CardBody } from './CardBody';
 export { CardMedia } from './CardMedia';
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -27,6 +27,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props) => {
   return (
     <>
       <Popover
+        padding={0}
         content={
           <Row>
             <Col span={24}>
@@ -64,7 +65,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props) => {
         onVisibleChange={updateVisible}
         style={{ child: { display: 'block' }, content: { width: '400px' } }}
         hideArrow
-        trigger={['onClick', 'onFocus']}
+        trigger={['onClick']}
       >
         <Input
           {...rest}

diff --git a/src/components/Input/BaseInputComponent.tsx b/src/components/Input/BaseInputComponent.tsx
@@ -99,7 +99,7 @@ export const BaseInputComponent = React.forwardRef<
             {before}
           </Col>
         )}
-        <Col flex="1" style={{ width: '0', overflow: 'hidden' }}>
+        <Col flex="1" style={{ overflow: 'hidden' }}>
           {React.cloneElement(children, {
             className: css.input,
             required,

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -38,7 +38,7 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
   } = props;
 
   const theme = useTheme();
-  const css = listStyle(theme.background);
+  const css = listStyle(theme.background, !!onClick);
 
   const Element: React.FC<unknown> = (p) =>
     React.cloneElement(element || <li />, {

diff --git a/src/components/List/style.ts b/src/components/List/style.ts
@@ -27,10 +27,10 @@ export const list = (background: string, border: number, theme: Theme) =>
     },
   });
 
-export const listItem = (background: string) =>
+export const listItem = (background: string, clickable: boolean) =>
   css({
     transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    cursor: 'pointer',
+    cursor: clickable && 'pointer',
     listStyle: 'none',
     overflow: 'hidden',
     padding: '6px 8px 6px 9px',

diff --git a/src/components/Loading/Skeleton.tsx b/src/components/Loading/Skeleton.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Card, CardBody } from '../Card';
+import { Card } from '../Card';
 import { skeletonStyle as style } from './style';
 import { useTheme } from '../Theme/Theme';
+import { SurfaceProps } from '../../typings/surface';
 
 export const Skeleton: React.FunctionComponent<SkeletonProps> = (props) => {
   const { isLoading, render = () => <div /> } = props;
@@ -10,47 +11,45 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = (props) => {
     const theme = useTheme();
 
     return (
-      <Card>
-        <CardBody>
-          <div className={style(theme)}>
-            <div className="skeleton">
-              <div className="skeleton-content">
-                <div className="skeleton-header">
-                  <div className="skeleton-line" style={{ width: '60%' }} />
-                </div>
-                <div className="skeleton-text">
-                  <div className="skeleton-line" style={{ width: '90%' }} />
-                  <div className="skeleton-line" style={{ width: '100%' }} />
-                  <div className="skeleton-line" style={{ width: '35%' }} />
-                </div>
-                <div className="skeleton-header">
-                  <div className="skeleton-line" style={{ width: '60%' }} />
-                </div>
-                <div className="skeleton-text">
-                  <div className="skeleton-line" style={{ width: '90%' }} />
-                  <div className="skeleton-line" style={{ width: '100%' }} />
-                  <div className="skeleton-line" style={{ width: '35%' }} />
-                </div>
-                <div className="skeleton-header">
-                  <div className="skeleton-line" style={{ width: '60%' }} />
-                </div>
-                <div className="skeleton-text">
-                  <div className="skeleton-line" style={{ width: '90%' }} />
-                  <div className="skeleton-line" style={{ width: '100%' }} />
-                  <div className="skeleton-line" style={{ width: '35%' }} />
-                </div>
+      <Card elevation={props.elevation} border={props.border} padding={props.padding} margin={props.margin}>
+        <div className={style(theme)}>
+          <div className="skeleton">
+            <div className="skeleton-content">
+              <div className="skeleton-header">
+                <div className="skeleton-line" style={{ width: '60%' }} />
+              </div>
+              <div className="skeleton-text">
+                <div className="skeleton-line" style={{ width: '90%' }} />
+                <div className="skeleton-line" style={{ width: '100%' }} />
+                <div className="skeleton-line" style={{ width: '35%' }} />
+              </div>
+              <div className="skeleton-header">
+                <div className="skeleton-line" style={{ width: '60%' }} />
+              </div>
+              <div className="skeleton-text">
+                <div className="skeleton-line" style={{ width: '90%' }} />
+                <div className="skeleton-line" style={{ width: '100%' }} />
+                <div className="skeleton-line" style={{ width: '35%' }} />
+              </div>
+              <div className="skeleton-header">
+                <div className="skeleton-line" style={{ width: '60%' }} />
+              </div>
+              <div className="skeleton-text">
+                <div className="skeleton-line" style={{ width: '90%' }} />
+                <div className="skeleton-line" style={{ width: '100%' }} />
+                <div className="skeleton-line" style={{ width: '35%' }} />
               </div>
             </div>
           </div>
-        </CardBody>
+        </div>
       </Card>
     );
   }
 
   return render && render();
 };
 
-export interface SkeletonProps {
+export interface SkeletonProps extends SurfaceProps {
   isLoading?: boolean;
   render?: () => React.ReactElement;
 }