Storybook/sergeyro/expand loader

src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap

@@ -949,7 +949,7 @@ exports[`Combobox renders correctly with loading 1`] = `
  title="loading"
  >
  <svg
- className="circle-loader-spinner input-component__loader-svg"
+ className="input-component__loader-svg circle-loader-spinner"
  viewBox="0 0 50 50"
  >
  <circle

src/components/Loader/Loader.jsx

@@ -1,7 +1,9 @@
 import React, { forwardRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import "./Loader.scss";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
+import { LOADER_COLORS, LOADER_SIZES, LOADER_TYPES } from "components/Loader/LoaderConstants";
+import cx from "classnames";
+import styles from "./Loader.module.scss";
 
 const Loader = forwardRef(
  (
@@ -10,42 +12,82 @@ const Loader = forwardRef(
  svgClassName,
  className,
  size,
+ color,
+ type,
  id
  },
  ref
  ) => {
  const overrideClassName = backwardCompatibilityForProperties([className, svgClassName], "");
 
- const style = useMemo(() => {
+ const sizeStyle = useMemo(() => {
  if (typeof size === "number") {
  return { width: size, height: size };
  }
  return undefined;
  }, [size]);
 
  return (
- <div className="monday-loader-component" ref={ref} role="alert" title="loading" style={style} id={id}>
- <svg className={`circle-loader-spinner ${overrideClassName}`} viewBox="0 0 50 50">
- <circle className="circle-loader-spinner-path" cx="25" cy="25" r="20" fill="none" strokeWidth="5" />
+ <div
+ className={cx(styles.mondayLoaderComponent, "monday-loader-component")}
+ ref={ref}
+ role="alert"
+ title="loading"
+ style={sizeStyle}
+ id={id}
+ >
+ <svg
+ className={cx(styles.circleLoaderSpinner, overrideClassName, "circle-loader-spinner")}
+ viewBox="0 0 50 50"
+ color={color}
+ >
+ {type === Loader.types.WITH_BACKGROUND && (
+ <circle
+ className={styles.circleLoaderSpinnerBackground}
+ cx="25"
+ cy="25"
+ r="20"
+ fill="none"
+ strokeWidth="5"
+ />
+ )}
+ <circle
+ className={cx(styles.circleLoaderSpinnerPath, "circle-loader-spinner-path")}
+ cx="25"
+ cy="25"
+ r="20"
+ fill="none"
+ strokeWidth="5"
+ />
  </svg>
  </div>
  );
  }
 );
 
+Loader.colors = LOADER_COLORS;
+Loader.sizes = LOADER_SIZES;
+Loader.types = LOADER_TYPES;
+
 Loader.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
- /**
- * The containing box of the loader
- */
- size: PropTypes.number
+ size: PropTypes.oneOf([Loader.sizes.XS, Loader.sizes.SMALL, Loader.sizes.MEDIUM, Loader.sizes.LARGE]),
+ color: PropTypes.oneOf([
+ Loader.colors.PRIMARY,
+ Loader.colors.ON_PRIMARY,
+ Loader.colors.SECONDARY,
+ Loader.colors.DARK
+ ]),
+ type: PropTypes.oneOf([Loader.types.CASUAL, Loader.types.WITH_BACKGROUND])
 };
 
 Loader.defaultProps = {
  id: undefined,
  className: undefined,
- size: undefined
+ size: undefined,
+ color: undefined,
+ type: Loader.types.CASUAL
 };
 
 export default Loader;

src/components/Loader/Loader.scss → src/components/Loader/Loader.module.scss

@@ -1,19 +1,28 @@
-.monday-loader-component {
+.mondayLoaderComponent {
  position: relative;
  height: 100%;
  width: 100%;
 
- .circle-loader-spinner {
+ .circleLoaderSpinnerBackground {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -50%;
+ margin-left: -50%;
+ stroke: var(--primary-background-hover-color);
+ }
+
+ .circleLoaderSpinner {
  animation: rotate 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
+ stroke: currentColor;
+ stroke-linecap: round;
 
- .circle-loader-spinner-path {
- stroke: currentColor;
- stroke-linecap: round;
+ .circleLoaderSpinnerPath {
  animation: dash 1s infinite;
  }
  }

src/components/Loader/LoaderConstants.js

@@ -0,0 +1,18 @@
+export const LOADER_COLORS = {
+ PRIMARY: "var(--primary-color)",
+ SECONDARY: "var(--secondary-text-color)",
+ ON_PRIMARY: "var(--text-color-on-inverted)",
+ DARK: "var(--primary-text-color)"
+};
+
+export const LOADER_SIZES = {
+ XS: 16,
+ SMALL: 24,
+ MEDIUM: 40,
+ LARGE: 64
+};
+
+export const LOADER_TYPES = {
+ CASUAL: "casual",
+ WITH_BACKGROUND: "with-background"
+};

src/components/Loader/__stories__/Loader.stories.mdx

@@ -1,6 +1,17 @@
 import Loader from "../Loader";
-import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
 import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { StoryDescription } from "../../../storybook/components/story-description/story-description";
+import { Button, Combobox, DialogContentContainer, Flex } from "components";
+import { ComponentRules, RelatedComponents, Tip, UsageGuidelines } from "../../../storybook";
+import { Link } from "../../../storybook/components";
+import { useCallback, useState } from "react";
+import {
+ BUTTON,
+ PROGRESS_BAR,
+ SKELETON
+} from "../../../storybook/components/related-components/component-description-map";
+
 import "./Loader.stories.scss";
 
 <Meta title="Feedback/Loader" component={Loader} />
@@ -16,14 +27,18 @@ export const loaderTemplate = createComponentTemplate(Loader);
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
+- [Variants](#variants)
+- [Do’s and don’ts](#dos-and-donts)
+- [Use cases and examples](#use-cases-and-examples)
+- [Related components](#related-components)
 - [Feedback](#feedback)
 
 ## Overview
 
-Circle loading indication, a general non specific loader
+Circular loader indicates to user waiting state.
 
 <Canvas>
- <Story name="Overview" args={{ size: 40 }}>
+ <Story name="Overview" args={{ size: Loader.sizes.MEDIUM }}>
  {loaderTemplate.bind({})}
  </Story>
 </Canvas>
@@ -36,20 +51,181 @@ Circle loading indication, a general non specific loader
 
 <UsageGuidelines
  guidelines={[
- "Use loader component to indicate the user that a task is being performed",
- "If you expect that a task will be done within 200ms don't show a loader",
- "Minimize the loaders on the screen"
+ "Use this loader to load small parts of the system, not the whole pages.",
+ "Use sizes of loader in context to its position. The bigger the loading area gets, the bigger loader should be used.",
+ "Always place loader in context to the loading content."
  ]}
 />
 
-### States
+<Tip>
+ While loading content consider using
+ <Link href="/?path=/docs/feedback-skeleton--overview" size={Link.sizes.SMALL}>
+ Skeleton loading
+ </Link>
+</Tip>
+
+## Variants
+
+### Size variants
+
+<Canvas>
+ <Story name="Size variants">
+ <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+ <StoryDescription description="Xs" vertical align={Flex.align.START}>
+ <div className="monday-storybook-loader-size-variants-block">
+ <Loader size={Loader.sizes.XS} />
+ </div>
+ </StoryDescription>
+ <StoryDescription description="S" vertical align={Flex.align.START}>
+ <div className="monday-storybook-loader-size-variants-block">
+ <Loader size={Loader.sizes.SMALL} />
+ </div>
+ </StoryDescription>
+ <StoryDescription description="M" vertical align={Flex.align.START}>
+ <div className="monday-storybook-loader-size-variants-block">
+ <Loader size={Loader.sizes.MEDIUM} />
+ </div>
+ </StoryDescription>
+ <StoryDescription description="L" vertical align={Flex.align.START}>
+ <div className="monday-storybook-loader-size-variants-block">
+ <Loader size={Loader.sizes.LARGE} />
+ </div>
+ </StoryDescription>
+ </Flex>
+ </Story>
+</Canvas>
+
+### Color variants
+
+<Canvas>
+ <Story name="Color variants">
+ <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+ <StoryDescription description="Primary" vertical align={Flex.align.START}>
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.PRIMARY} />
+ </StoryDescription>
+ <StoryDescription description="Secondary" vertical align={Flex.align.START}>
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.SECONDARY} />
+ </StoryDescription>
+ <StoryDescription description="Dark" vertical align={Flex.align.START}>
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.DARK} />
+ </StoryDescription>
+ <StoryDescription description="OnPrimary" vertical align={Flex.align.START}>
+ <Flex direction={Flex.directions.ROW}>
+ <div className="monday-storybook-loader-on-primary-block color-black">
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+ </div>
+ <div className="monday-storybook-loader-on-primary-block color-negative">
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+ </div>
+ <div className="monday-storybook-loader-on-primary-block color-positive">
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+ </div>
+ <div className="monday-storybook-loader-on-primary-block color-primary">
+ <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+ </div>
+ </Flex>
+ </StoryDescription>
+ </Flex>
+ </Story>
+</Canvas>
 
-Color inheritance - the loader inherits its color from the `color` css attribute
+### Custom colors
+
+If there is a need for color customization, css `color` attribute of a parent component can be used.
 
 <Canvas>
- <Story name="Color">
- <div style={{ color: "var(--primary-color)" }}>
- <Loader size={40} />
+ <Story name="Custom colors">
+ <div style={{ color: "var(--color-dark-red)" }}>
+ <Loader size={Loader.sizes.MEDIUM} />
  </div>
  </Story>
 </Canvas>
+
+### Visual variants
+
+<Canvas>
+ <Story name="Visual variants">
+ <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+ <StoryDescription description="Casual" vertical align={Flex.align.START}>
+ <div align="left">
+ <Loader size={Loader.sizes.MEDIUM} type={Loader.types.CASUAL} />
+ </div>
+ </StoryDescription>
+ <StoryDescription
+ description="With background"
+ vertical
+ align={Flex.align.START}
+ headerStyle={{ width: "fitContent" }}
+ >
+ <div align="left">
+ <Loader size={Loader.sizes.MEDIUM} type={Loader.types.WITH_BACKGROUND} />
+ </div>
+ </StoryDescription>
+ </Flex>
+ </Story>
+</Canvas>
+
+## Do’s and Don’ts
+
+<ComponentRules
+ rules={[
+ {
+ positive: {
+ component: (
+ <Flex direction={Flex.directions.ROW}>
+ <div className="monday-storybook-loader-dos-and-donts-heading">H1 heading component</div>
+ <Loader size={Loader.sizes.SMALL} type={Loader.types.WITH_BACKGROUND} />
+ </Flex>
+ ),
+ description: "Place loader in context to the loading content and keep its size proportional to the content."
+ },
+ negative: {
+ component: (
+ <Flex direction={Flex.directions.ROW}>
+ <div className="monday-storybook-loader-dos-and-donts-heading">H1 heading component</div>
+ <Loader size={Loader.sizes.LARGE} type={Loader.types.WITH_BACKGROUND} />
+ </Flex>
+ ),
+ description: "Don’t leave the size visually unmaintained."
+ }
+ }
+ ]}
+/>
+
+## Use cases and examples
+
+### Loader in text field
+
+Use loader in search field while filtering results.
+
+<Canvas>
+ <Story name="Loader in text field">
+ <DialogContentContainer>
+ <Combobox loading placeholder="Board name" />
+ </DialogContentContainer>
+ </Story>
+</Canvas>
+
+### Loader in button
+
+Indicate the loading status in button if content or an action is loading.
+
+<Canvas>
+ <Story name="Loader in button">
+ {() => {
+ const [loading, setLoading] = useState(false);
+ const onClick = useCallback(() => {
+ setLoading(true);
+ }, [setLoading]);
+ return (
+ <Button loading={loading} onClick={onClick}>
+ Click here for loading
+ </Button>
+ );
+ }}
+ </Story>
+</Canvas>
+
+## Related components
+
+<RelatedComponents componentsNames={[SKELETON, PROGRESS_BAR, BUTTON]} />