Fix/orr/icon ref (#131)

* update button group and icons * fix icon ref * remove redundent useButton Props * remove console.log * some lint fixes
mondaycom · May 25, 2021 · ff75b40 · ff75b40
1 parent 227d394
commit ff75b40
Show file tree

Hide file tree

Showing 162 changed files with 574 additions and 495 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
     "deploy-storybook": "storybook-to-ghpages",
     "link-local": "npm link && npm start",
     "plop": "plop",
-    "build-react-icons": "svg2react-icon --keep-colors node_modules/monday-ui-style/src/Icons src/components/Icon/Icons",
+    "build-react-icons-base": "svg2react-icon --keep-colors node_modules/monday-ui-style/src/Icons src/components/Icon/Icons",
+    "build-react-icons": "npm run build-react-icons-base && npm run add-ref-to-icons",
+    "add-ref-to-icons": "node ./scripts/add-forward-ref-icons.js",
     "fix-lint": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx}\"",
     "eslint": "eslint ./src",
     "eslint-fix": "eslint ./src --fix"

diff --git a/scripts/add-forward-ref-icons.js b/scripts/add-forward-ref-icons.js
@@ -0,0 +1,44 @@
+var fs = require("fs");
+
+const startReplaceOrigin = "({size, ...props}) => (";
+const startReplaceReplaced = " React.forwardRef(({size, ...props}, ref) => (";
+const replaceRefOrigin = "{...props}>";
+const replaceRefReplaced = "{...props} ref={ref}>";
+const endReplaceOrigin = ");";
+const endReplaceReplaced = "));";
+
+function readFiles(dirname, onFileContent, onError) {
+  fs.readdir(dirname, function(err, filenames) {
+    if (err) {
+      onError(err);
+      return;
+    }
+    filenames.forEach(function(filename) {
+      fs.readFile(dirname + filename, "utf-8", function(err, content) {
+        if (err) {
+          onError(err);
+          return;
+        }
+        onFileContent(filename, content);
+      });
+    });
+  });
+}
+const dirName = "src/components/Icon/Icons/components/";
+readFiles(
+  dirName,
+  function(filename, content) {
+    console.log("optimizing:: ", filename);
+    const newContent = content
+      .replace(replaceRefOrigin, replaceRefReplaced)
+      .replace(startReplaceOrigin, startReplaceReplaced)
+      .replace(endReplaceOrigin, endReplaceReplaced);
+
+    fs.writeFile(`${dirName}/${filename}`, newContent, "utf8", function(err) {
+      if (err) return console.log(err);
+    });
+  },
+  function(err) {
+    throw err;
+  }
+);
diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx
@@ -9,7 +9,25 @@ import { ButtonWrapper } from "./ButtonWrapper";
 import "./ButtonGroup.scss";
 
 const ButtonGroup = forwardRef(
-  ({ componentClassName, options, name, disabled, value, onSelect, size, kind, groupAriaLabel, tooltipPosition, tooltipHideDelay, tooltipShowDelay, tooltipContainerSelector, tooltipMoveBy}, ref) => {
+  (
+    {
+      componentClassName,
+      options,
+      name,
+      disabled,
+      value,
+      onSelect,
+      size,
+      kind,
+      groupAriaLabel,
+      tooltipPosition,
+      tooltipHideDelay,
+      tooltipShowDelay,
+      tooltipContainerSelector,
+      tooltipMoveBy
+    },
+    ref
+  ) => {
     const inputRef = useRef();
     const [valueState, setValueState] = useState(value);
     const prevValue = usePrevious(value);
@@ -33,7 +51,7 @@ const ButtonGroup = forwardRef(
     }, [options, valueState]);
 
     const Buttons = useMemo(() => {
-      return options.map(option => {
+      return options.map((option, index) => {
         const isSelected = option.value === valueState;
         return (
           <ButtonWrapper
@@ -42,8 +60,9 @@ const ButtonGroup = forwardRef(
             onClick={() => onClick(option)}
             rightIcon={option.icon}
             leftIcon={option.leftIcon}
-            disabled={disabled || option.disabled}
             active={isSelected}
+            rightFlat={index !== options.length - 1}
+            leftFlat={index !== 0}
             kind={Button.kinds.TERTIARY}
             preventClickAnimation
             ariaLabel={option.ariaLabel}
@@ -53,13 +72,28 @@ const ButtonGroup = forwardRef(
             tooltipShowDelay={tooltipShowDelay}
             tooltipContainerSelector={tooltipContainerSelector}
             tooltipMoveBy={tooltipMoveBy}
-            className={cx(`${baseClassName}__option-text`, { selected: isSelected, disabled })}
+            className={cx(`${baseClassName}__option-text`, {
+              selected: isSelected,
+              disabled,
+              "button-disabled": option.disabled
+            })}
           >
             {option.text}
           </ButtonWrapper>
         );
       });
-    }, [options, disabled, onClick, size, valueState, tooltipPosition, tooltipHideDelay, tooltipShowDelay, tooltipContainerSelector, tooltipMoveBy]);
+    }, [
+      options,
+      disabled,
+      onClick,
+      size,
+      valueState,
+      tooltipPosition,
+      tooltipHideDelay,
+      tooltipShowDelay,
+      tooltipContainerSelector,
+      tooltipMoveBy
+    ]);
 
     // Effects
     useEffect(() => {
@@ -74,7 +108,12 @@ const ButtonGroup = forwardRef(
         className={cx(baseClassName, componentClassName, `${baseClassName}--kind-${kind}`, { disabled })}
         ref={mergedRef}
       >
-        <div role="group" aria-label={groupAriaLabel} className={cx(`${baseClassName}__buttons-container`)}>
+        <div
+          role="group"
+          aria-label={groupAriaLabel}
+          className={cx(`${baseClassName}__buttons-container`)}
+          aria-disabled={disabled}
+        >
           {Buttons}
         </div>
         {selectedOption && selectedOption.subText && (
@@ -118,4 +157,4 @@ ButtonGroup.propTypes = {
   tooltipMoveBy: PropTypes.object
 };
 
-export default ButtonGroup;
+export default ButtonGroup;
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
@@ -2,7 +2,6 @@
 @import "../../styles/themes.scss";
 @import "../../styles/typography.scss";
 
-
 .monday-style-button-group-component {
   display: flex;
   flex-direction: column;
@@ -17,29 +16,17 @@
     justify-content: center;
 
     .monday-style-button {
-      border: 1px solid;
-      border-radius: 0;
       @include theme-prop(background-color, primary-background-color);
       @include theme-prop(border-color, ui-border-color);
-      margin-left: -1px;
-
-      &:first-child {
-        border-radius: $border-radius-small 0 0 $border-radius-small;
-        margin-left: 0;
-      }
-      &:last-child {
-        border-radius: 0 $border-radius-small $border-radius-small 0;
-      }
-
       &--color {
         &-primary {
           &-active {
+            z-index: 20;
             &:hover {
               @include theme-prop(background-color, primary-selected-color);
             }
             @include theme-prop(background-color, primary-selected-color);
             @include theme-prop(border-color, primary-color);
-            z-index: 10;
           }
         }
       }
@@ -49,6 +36,7 @@
     &:not(.disabled) {
       @include theme-prop(color, primary-text-color);
       &.selected {
+        z-index: 10;
         @include theme-prop(color, primary-text-color);
       }
     }
@@ -69,4 +57,16 @@
   &.disabled {
     cursor: not-allowed;
   }
+
+  .disabled {
+    cursor: not-allowed;
+    background-color: var(--disabled-background-color);
+    opacity: 0.5;
+  }
+
+  .button-disabled {
+    background-color: var(--disabled-background-color);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
diff --git a/src/components/ButtonGroup/__stories__/buttonGroup.stories.js b/src/components/ButtonGroup/__stories__/buttonGroup.stories.js
@@ -4,6 +4,9 @@ import ButtonGroup from "../ButtonGroup";
 import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
 import { FakeXMLHttpRequest } from "sinon";
 import DescriptionLabel from "../../storybook-helpers/description-label/description-label";
+import TextSmall from "../../Icon/Icons/components/TextSmall";
+import Doc from "../../Icon/Icons/components/Doc";
+import { Bolt } from "../../Icon/Icons";
 
 export const Sandbox = () => (
   <div

diff --git a/src/components/Chips/Chips.jsx b/src/components/Chips/Chips.jsx
@@ -1,6 +1,5 @@
 import React, { useRef, forwardRef, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
-import { useButton } from "@react-aria/button";
 import cx from "classnames";
 import Icon from "../Icon/Icon";
 import useMergeRefs from "../../hooks/useMergeRefs";
@@ -29,11 +28,6 @@ const Chips = forwardRef(
       }
     }, [id, onDelete]);
 
-    const { buttonProps } = useButton({
-      onPress: onDeleteCallback,
-      elementType: "span"
-    });
-
     return (
       <div
         ref={mergedRef}
@@ -63,14 +57,15 @@ const Chips = forwardRef(
           />
         ) : null}
         {!readOnly && !disabled && (
-          <span
+          <Icon
             aria-label={`Remove ${label}`}
-            {...buttonProps}
             className="chip-icon close"
-            style={{ height: iconSize }}
-          >
-            <Icon iconType={Icon.type.SVG} clickable={false} icon={CloseSmall} iconSize={iconSize} />
-          </span>
+            iconType={Icon.type.SVG}
+            clickable
+            icon={CloseSmall}
+            iconSize={iconSize}
+            onClick={onDeleteCallback}
+          />
         )}
       </div>
     );

diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -38,10 +38,11 @@ const Icon = forwardRef(
       return null;
     }
 
-    if (iconType === ICON_TYPES.SVG || typeof icon === "function") {
+    if (iconType === ICON_TYPES.SVG || typeof icon === "function" || typeof icon === "object") {
       const IconComponent = icon;
       return (
         <IconComponent
+          ref={mergedRef}
           aria-hidden={clickable ? ariaHidden : "true"}
           aria-label={iconLabel}
           size={iconSize.toString()}

diff --git a/src/components/Icon/Icons/components/API.js b/src/components/Icon/Icons/components/API.js
diff --git a/src/components/Icon/Icons/components/Activity.js b/src/components/Icon/Icons/components/Activity.js
diff --git a/src/components/Icon/Icons/components/Add.js b/src/components/Icon/Icons/components/Add.js
@@ -2,12 +2,12 @@
 /* tslint:disable */
 import PropTypes from 'prop-types';
 import React from 'react';
-const Add = ({size, ...props}) => (
-  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+const Add =  React.forwardRef(({size, ...props}, ref) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props} ref={ref}>
     <path d="M10.75 3C10.75 2.58579 10.4142 2.25 10 2.25C9.58579 2.25 9.25 2.58579 9.25 3V9.25H3C2.58579 9.25 2.25 9.58579 2.25 10C2.25 10.4142 2.58579 10.75 3 10.75H9.25V17C9.25 17.4142 9.58579 17.75 10 17.75C10.4142 17.75 10.75 17.4142 10.75 17V10.75H17C17.4142 10.75 17.75 10.4142 17.75 10C17.75 9.58579 17.4142 9.25 17 9.25H10.75V3Z"
       fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
   </svg>
-);
+));
 Add.displayName = 'Add';
 Add.propTypes = {
   size: PropTypes.string

diff --git a/src/components/Icon/Icons/components/AddSmall.js b/src/components/Icon/Icons/components/AddSmall.js
@@ -2,12 +2,12 @@
 /* tslint:disable */
 import PropTypes from 'prop-types';
 import React from 'react';
-const AddSmall = ({size, ...props}) => (
-  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+const AddSmall =  React.forwardRef(({size, ...props}, ref) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props} ref={ref}>
     <path d="M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z"
       fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
   </svg>
-);
+));
 AddSmall.displayName = 'AddSmall';
 AddSmall.propTypes = {
   size: PropTypes.string

diff --git a/src/components/Icon/Icons/components/AddUpdate.js b/src/components/Icon/Icons/components/AddUpdate.js