fix(ui): change ShareButton icon (#245)

fix: add `span`s below tooltip to ensure icon stay round fix: do not show placeholder text when in readOnly mode
graasp · Feb 20, 2023 · 8877111 · 8877111
1 parent 1347609
commit 8877111
Show file tree

Hide file tree

Showing 17 changed files with 315 additions and 268 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -15,4 +15,5 @@ module.exports = {
   features: {
     interactionsDebugger: true, // 👈 Enable playback controls
   },
+  staticDirs: ['./public'],
 };
diff --git a/.storybook/public/favicon.ico b/.storybook/public/favicon.ico
diff --git a/package.json b/package.json
@@ -69,9 +69,9 @@
     "uuid": "9.0.0"
   },
   "peerDependencies": {
-    "@emotion/react": "~11.10.5",
-    "@emotion/styled": "~11.10.5",
-    "@mui/icons-material": "~5.11.0",
+    "@emotion/react": "~11.10.6",
+    "@emotion/styled": "~11.10.6",
+    "@mui/icons-material": "~5.11.9",
     "@mui/lab": "~5.0.0-alpha.120",
     "@mui/material": "~5.11.9",
     "ag-grid-community": "28.1.1",
@@ -93,22 +93,22 @@
     "@babel/core": "7.18.9",
     "@babel/plugin-proposal-optional-chaining": "7.17.12",
     "@babel/preset-env": "7.18.2",
-    "@babel/preset-typescript": "7.17.12",
-    "@commitlint/cli": "17.4.3",
-    "@commitlint/config-conventional": "17.4.3",
-    "@emotion/react": "11.10.5",
-    "@emotion/styled": "11.10.5",
+    "@babel/preset-typescript": "7.18.6",
+    "@commitlint/cli": "17.4.4",
+    "@commitlint/config-conventional": "17.4.4",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
     "@mdx-js/react": "1.6.22",
-    "@mui/icons-material": "5.11.0",
+    "@mui/icons-material": "5.11.9",
     "@mui/lab": "5.0.0-alpha.120",
     "@mui/material": "5.11.9",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.0",
+    "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@rollup/plugin-typescript": "8.5.0",
+    "@rollup/plugin-typescript": "11.0.0",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-coverage": "0.0.7",
+    "@storybook/addon-coverage": "0.0.8",
     "@storybook/addon-docs": "6.5.16",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-interactions": "6.5.16",

diff --git a/src/ItemFlag/ItemFlagButton.tsx b/src/ItemFlag/ItemFlagButton.tsx
@@ -25,9 +25,11 @@ export const ItemFlagButton: FC<ItemFlagButtonProps> = ({
 
   return (
     <Tooltip title={tooltip}>
-      <IconButton color={buttonColor} onClick={openItemFlagDialog}>
-        <ReportIcon fontSize={iconSize} />
-      </IconButton>
+      <span>
+        <IconButton color={buttonColor} onClick={openItemFlagDialog}>
+          <ReportIcon fontSize={iconSize} />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/TextEditor/TextEditor.tsx b/src/TextEditor/TextEditor.tsx
@@ -124,7 +124,7 @@ const TextEditor: FC<TextEditorProps> = ({
       <Div edit={edit} maxHeight={maxHeight}>
         <ReactQuill
           id={id}
-          placeholder={placeholderText}
+          placeholder={edit ? placeholderText : ''}
           readOnly={!edit}
           theme='snow'
           value={content}

diff --git a/src/buttons/ChatboxButton/ChatboxButton.tsx b/src/buttons/ChatboxButton/ChatboxButton.tsx
@@ -14,9 +14,11 @@ export type Props = {
 const ChatboxButton: FC<Props> = ({ tooltip, id, onClick, size }) => {
   return (
     <Tooltip title={tooltip}>
-      <IconButton id={id} onClick={onClick} size={size}>
-        <ForumIcon />
-      </IconButton>
+      <span>
+        <IconButton id={id} onClick={onClick} size={size}>
+          <ForumIcon />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/buttons/CopyButton/CopyButton.tsx b/src/buttons/CopyButton/CopyButton.tsx
@@ -40,15 +40,17 @@ const CopyButton: FC<Props> = ({
     default:
       return (
         <Tooltip title={text}>
-          <IconButton
-            id={id}
-            color={color}
-            className={iconClassName}
-            aria-label={text}
-            onClick={onClick}
-          >
-            <FilterNone />
-          </IconButton>
+          <span>
+            <IconButton
+              id={id}
+              color={color}
+              className={iconClassName}
+              aria-label={text}
+              onClick={onClick}
+            >
+              <FilterNone />
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/DeleteButton/DeleteButton.tsx b/src/buttons/DeleteButton/DeleteButton.tsx
@@ -39,15 +39,17 @@ const DeleteButton: FC<Props> = ({
     default:
       return (
         <Tooltip title={text}>
-          <IconButton
-            id={id}
-            color={color}
-            className={className}
-            aria-label={text}
-            onClick={onClick}
-          >
-            <DeleteIcon />
-          </IconButton>
+          <span>
+            <IconButton
+              id={id}
+              color={color}
+              className={className}
+              aria-label={text}
+              onClick={onClick}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/DownloadButton/DownloadButton.tsx b/src/buttons/DownloadButton/DownloadButton.tsx
@@ -54,9 +54,11 @@ const DownloadButton: FC<DownloadButtonProps> = ({
     default:
       return (
         <Tooltip title={title} placement={placement}>
-          <IconButton onClick={handleDownload} aria-label={ariaLabel}>
-            <GetAppIcon />
-          </IconButton>
+          <span>
+            <IconButton onClick={handleDownload} aria-label={ariaLabel}>
+              <GetAppIcon />
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/EditButton/EditButton.tsx b/src/buttons/EditButton/EditButton.tsx
@@ -23,15 +23,17 @@ const EditButton: FC<Props> = ({
 }) => {
   return (
     <Tooltip title={tooltip}>
-      <IconButton
-        id={id}
-        aria-label={ariaLabel}
-        className={className}
-        onClick={onClick}
-        size={size}
-      >
-        <EditIcon />
-      </IconButton>
+      <span>
+        <IconButton
+          id={id}
+          aria-label={ariaLabel}
+          className={className}
+          onClick={onClick}
+          size={size}
+        >
+          <EditIcon />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/buttons/FavoriteButton/FavoriteButton.tsx b/src/buttons/FavoriteButton/FavoriteButton.tsx
@@ -73,13 +73,15 @@ const FavoriteButton: FC<FavoriteButtonProps> = ({
     default:
       return (
         <Tooltip title={tooltipText}>
-          <IconButton
-            aria-label={ariaLabel}
-            sx={{ color: iconColor, ...sx }}
-            onClick={onClick}
-          >
-            {icon}
-          </IconButton>
+          <span>
+            <IconButton
+              aria-label={ariaLabel}
+              sx={{ color: iconColor, ...sx }}
+              onClick={onClick}
+            >
+              {icon}
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/LikeButton/LikeButton.tsx b/src/buttons/LikeButton/LikeButton.tsx
@@ -47,18 +47,20 @@ const LikeButton: FC<LikeButtonProps> = ({
 }) => {
   return (
     <Tooltip title={isLiked ? tooltipUnlike : tooltipLike}>
-      <IconButton
-        aria-label={ariaLabel}
-        sx={sx}
-        color={color}
-        onClick={isLiked ? handleUnlike : handleLike}
-      >
-        {isLiked ? (
-          <FavoriteIcon fontSize={size} />
-        ) : (
-          <FavoriteBorderIcon fontSize={size} />
-        )}
-      </IconButton>
+      <span>
+        <IconButton
+          aria-label={ariaLabel}
+          sx={sx}
+          color={color}
+          onClick={isLiked ? handleUnlike : handleLike}
+        >
+          {isLiked ? (
+            <FavoriteIcon fontSize={size} />
+          ) : (
+            <FavoriteBorderIcon fontSize={size} />
+          )}
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/buttons/MoveButton/MoveButton.tsx b/src/buttons/MoveButton/MoveButton.tsx
@@ -44,16 +44,18 @@ const MoveButton: FC<MoveButtonProps> = ({
     default:
       return (
         <Tooltip title={text}>
-          <IconButton
-            size={size}
-            id={id}
-            color={color}
-            className={iconClassName}
-            aria-label={text}
-            onClick={onClick}
-          >
-            <OpenWith />
-          </IconButton>
+          <span>
+            <IconButton
+              size={size}
+              id={id}
+              color={color}
+              className={iconClassName}
+              aria-label={text}
+              onClick={onClick}
+            >
+              <OpenWith />
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/PinButton/PinButton.tsx b/src/buttons/PinButton/PinButton.tsx
@@ -48,14 +48,16 @@ const PinButton: FC<PinButtonProps> = ({
     case BUTTON_TYPES.ICON_BUTTON:
       return (
         <Tooltip title={text}>
-          <IconButton
-            size={size}
-            aria-label={text}
-            className={iconClassName}
-            onClick={onClick}
-          >
-            {icon}
-          </IconButton>
+          <span>
+            <IconButton
+              size={size}
+              aria-label={text}
+              className={iconClassName}
+              onClick={onClick}
+            >
+              {icon}
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/buttons/ShareButton/ShareButton.stories.tsx b/src/buttons/ShareButton/ShareButton.stories.tsx
@@ -0,0 +1,33 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import React from 'react';
+
+import { TABLE_CATEGORIES } from '../../utils/storybook';
+import ShareButton from './ShareButton';
+
+export default {
+  title: 'Buttons/ShareButton',
+  component: ShareButton,
+
+  argTypes: {
+    size: {
+      table: {
+        category: TABLE_CATEGORIES.MUI,
+      },
+    },
+  },
+} as ComponentMeta<typeof ShareButton>;
+
+const Template: ComponentStory<typeof ShareButton> = (args) => (
+  <ShareButton {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  open: false,
+};
+
+export const SharingOpen = Template.bind({});
+SharingOpen.args = {
+  open: true,
+};
diff --git a/src/buttons/ShareButton/ShareButton.tsx b/src/buttons/ShareButton/ShareButton.tsx
@@ -1,5 +1,5 @@
 import CloseIcon from '@mui/icons-material/Close';
-import ShareIcon from '@mui/icons-material/Share';
+import Groups from '@mui/icons-material/Groups';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -26,15 +26,17 @@ const ShareButton: FC<Props> = ({
 }) => {
   return (
     <Tooltip title={tooltip}>
-      <IconButton
-        aria-label={ariaLabel ?? tooltip}
-        className={className}
-        onClick={onClick}
-        id={id}
-        size={size}
-      >
-        {open ? <CloseIcon /> : <ShareIcon />}
-      </IconButton>
+      <span>
+        <IconButton
+          aria-label={ariaLabel ?? tooltip}
+          className={className}
+          onClick={onClick}
+          id={id}
+          size={size}
+        >
+          {open ? <CloseIcon /> : <Groups />}
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };