feat(Icons): Moved some icons from outline to solid

packages/components/src/form/ListInput/ListInput.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';
 import { findIndex, isFunction, map } from 'lodash';
-import { AddCircleIcon } from '@bubbles-ui/icons/outline';
+import { AddCircleIcon } from '@bubbles-ui/icons/solid';
 import { useId } from '@mantine/hooks';
 import { Box } from '../../layout';
 import { ListInputStyles } from './ListInput.styles';

packages/components/src/form/MultiSelect/MultiSelect.js

@@ -99,7 +99,7 @@ const MultiSelect = forwardRef(
 
     // TODO: MEGATODO Por culpa de maxSelectedValues hemos tenido que repintar el MultiSelect de mantine.
     React.useEffect(() => {
-      if (!value || !value.length) {
+      if (!value?.length) {
         setShow(false);
         setTimeout(() => {
           setShow(true);

packages/components/src/form/MultiSelect/MultiSelect.stories.js

@@ -3,7 +3,7 @@ import { StarIcon } from '@bubbles-ui/icons/solid';
 import { RemoveIcon } from '@bubbles-ui/icons/outline';
 import { Stack, Box } from '../../layout';
 import { UserDisplayItem } from '../../informative';
-import { ActionButton } from '../../form';
+import { ActionButton } from '../ActionButton';
 import { MultiSelect } from './MultiSelect';
 import {
   MULTI_SELECT_DEFAULT_PROPS,
@@ -34,19 +34,17 @@ export default {
 };
 
 const Template = ({ children, data, useValueComponent, onChange, showIcon, ...props }) => {
-  const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => {
+  const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => (
     // return <UserDisplayItem name={label} size="xs" />;
-    return (
-      <Stack sx={(theme) => ({ paddingRight: theme.spacing[1] })}>
-        <UserDisplayItem name={label} size="xs" />
-        {onRemove ? (
-          <Box>
-            <ActionButton icon={<RemoveIcon />} onClick={() => onRemove(value)} />
-          </Box>
-        ) : null}
-      </Stack>
-    );
-  });
+    <Stack sx={(theme) => ({ paddingRight: theme.spacing[1] })}>
+      <UserDisplayItem name={label} size="xs" />
+      {onRemove ? (
+        <Box>
+          <ActionButton icon={<RemoveIcon />} onClick={() => onRemove(value)} />
+        </Box>
+      ) : null}
+    </Stack>
+  ));
 
   const [state, setState] = useState([]);
   const [value, setValue] = useState([]);
@@ -102,6 +100,7 @@ Playground.args = {
       value: 'Homer Simpson',
       description: 'Overweight, lazy, and often ignorant',
       group: 'Group 1',
+      disabled: true,
     },
     {
       image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png',

packages/components/src/form/TableInput/TableInputRow.js

@@ -1,9 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { get, isFunction } from 'lodash';
-import { CheckIcon, DeleteBinIcon, DeleteIcon, EditWriteIcon } from '@bubbles-ui/icons/solid';
+import {
+  CheckIcon,
+  DeleteBinIcon,
+  DeleteIcon,
+  EditWriteIcon,
+  AddCircleIcon,
+} from '@bubbles-ui/icons/solid';
 import { Controller, useForm } from 'react-hook-form';
-import { SortDragIcon, AddCircleIcon } from '@bubbles-ui/icons/outline';
+import { SortDragIcon } from '@bubbles-ui/icons/outline';
 import { Draggable } from 'react-beautiful-dnd';
 import { Box } from '../../layout/Box';
 import { TableCell } from '../../informative/Table/TableCell/TableCell';
@@ -155,7 +161,10 @@ const TableInputRow = ({
                 {getColumCellValue(cell)}
               </td>
             ))}
-            <td style={{ textAlign: 'right', textWrap: 'nowrap' }} className={cx(tableClasses.td, classes.actionCell)}>
+            <td
+              style={{ textAlign: 'right', textWrap: 'nowrap' }}
+              className={cx(tableClasses.td, classes.actionCell)}
+            >
               {editing ? (
                 <>
                   <ActionButton

packages/components/src/form/TagsInput/TagsInput.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
 import { isEmpty, isFunction, isString, trim, uniq } from 'lodash';
 import PropTypes from 'prop-types';
-import { AddCircleIcon } from '@bubbles-ui/icons/outline/';
+import { AddCircleIcon } from '@bubbles-ui/icons/solid/';
 import { useId, useMergedRef } from '@mantine/hooks';
 import { Box } from '../../layout/Box';
 import { Stack } from '../../layout/Stack';

packages/components/src/layout/TotalLayout/TotalLayoutHeader/crossIcon.js

@@ -1,14 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const CrossIcon = () => (
-  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+const CrossIcon = ({ width = 16, height = 16 }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M6.85231 7.80307C7.11486 8.06563 7.54053 8.06563 7.80308 7.80309C8.06563 7.54054 8.06563 7.11485 7.80308 6.8523L4.95077 4.00001L7.8031 1.14768C8.06563 0.885124 8.06563 0.459462 7.8031 0.196908C7.54055 -0.0656256 7.11486 -0.0656462 6.85233 0.196908L4 3.04924L1.14769 0.196908C0.885132 -0.0656256 0.459449 -0.0656256 0.196915 0.196908C-0.0656385 0.459462 -0.0656385 0.885124 0.196915 1.14768L3.04923 4.00001L0.196915 6.8523C-0.065618 7.11485 -0.065618 7.54052 0.196915 7.80307C0.459469 8.06563 0.885153 8.06563 1.14769 7.80307L4 4.95078L6.85231 7.80307Z"
-      fill="#0C1F22"
+      d="M3.18431 2.87293C3.10733 2.89043 3.04249 2.92672 2.98436 2.98486C2.93684 3.03238 2.90704 3.07914 2.88542 3.14011C2.86861 3.18754 2.86726 3.19745 2.86728 3.27238C2.86731 3.34439 2.86911 3.35875 2.88353 3.40184C2.89245 3.42851 2.9108 3.46766 2.92431 3.48884C2.94279 3.51782 3.50304 4.08167 5.18486 5.76388L7.42085 8.00038L5.18486 10.2369C3.50304 11.9191 2.94279 12.4829 2.92431 12.5119C2.9108 12.5331 2.89247 12.5722 2.88359 12.5989C2.86943 12.6414 2.86739 12.657 2.8672 12.7254C2.86702 12.7846 2.86963 12.812 2.87801 12.8394C2.91985 12.9757 3.02454 13.0804 3.16088 13.1222C3.18821 13.1306 3.21565 13.1332 3.27488 13.1331C3.34321 13.1329 3.35888 13.1308 3.40135 13.1167C3.42801 13.1078 3.46716 13.0894 3.48835 13.0759C3.51733 13.0575 4.08117 12.4972 5.76338 10.8154L7.99988 8.5794L10.2364 10.8154C11.9186 12.4972 12.4824 13.0575 12.5114 13.0759C12.5326 13.0894 12.5717 13.1078 12.5984 13.1167C12.6409 13.1308 12.6565 13.1329 12.7249 13.1331C12.7841 13.1332 12.8115 13.1306 12.8389 13.1222C12.9752 13.0804 13.0799 12.9757 13.1217 12.8394C13.1301 12.812 13.1327 12.7846 13.1326 12.7254C13.1324 12.657 13.1303 12.6414 13.1162 12.5989C13.1073 12.5722 13.089 12.5331 13.0754 12.5119C13.057 12.4829 12.4967 11.9191 10.8149 10.2369L8.5789 8.00038L10.8149 5.76388C12.4967 4.08167 13.057 3.51782 13.0754 3.48884C13.089 3.46766 13.1073 3.42851 13.1162 3.40184C13.1303 3.35938 13.1324 3.34371 13.1326 3.27538C13.1327 3.21615 13.1301 3.18871 13.1217 3.16138C13.0799 3.02504 12.9752 2.92034 12.8389 2.87851C12.8115 2.87012 12.7841 2.86752 12.7249 2.86769C12.6565 2.86789 12.6409 2.86993 12.5984 2.88409C12.5717 2.89297 12.5326 2.9113 12.5114 2.92481C12.4824 2.94329 11.9186 3.50354 10.2364 5.18536L7.99988 7.42135L5.76338 5.18536C4.08117 3.50354 3.51733 2.94329 3.48835 2.92481C3.42982 2.8875 3.36644 2.86922 3.28688 2.8667C3.24484 2.86538 3.2076 2.86764 3.18431 2.87293Z"
+      fill="currentColor"
     />
   </svg>
 );
+CrossIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
 
 export default CrossIcon;

packages/components/src/navigation/Tree/NodeRenderer.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isString } from 'lodash';
-import { AddCircleIcon } from '@bubbles-ui/icons/outline';
+import { AddCircleIcon } from '@bubbles-ui/icons/solid';
 import { useDragOver } from '@leemonade/react-dnd-treeview';
 import { Box } from '../../layout/Box';
 import { Button } from '../../form/Button';

packages/components/src/overlay/Dropdown/Item/Item.constants.js

@@ -1,10 +1,13 @@
 import PropTypes from 'prop-types';
 
-export const ITEM_DEFAULT_PROPS = {};
+export const ITEM_DEFAULT_PROPS = {
+  disabled: false,
+};
 export const ITEM_PROP_TYPES = {
   label: PropTypes.string,
   image: PropTypes.string,
   icon: PropTypes.node,
   dataSelected: PropTypes.bool,
   group: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  disabled: PropTypes.bool,
 };

packages/components/src/overlay/Dropdown/Item/Item.js

@@ -10,10 +10,21 @@ import { ITEM_DEFAULT_PROPS, ITEM_PROP_TYPES } from './Item.constants';
 
 const Item = forwardRef(
   (
-    { icon, image, label, group, value, className, 'data-selected': dataSelected, ...props },
+    {
+      icon,
+      image,
+      label,
+      group,
+      value,
+      disabled,
+      className,
+      'data-selected': dataSelected,
+      ...props
+    },
     ref,
   ) => {
-    const { classes } = ItemStyles({ group }, { name: 'Item' });
+    const { classes } = ItemStyles({ group, disabled }, { name: 'Item' });
+
     return (
       <Box className={classes.root} ref={ref} {...props}>
         {image && <Avatar size="sm" image={image} />}

packages/components/src/overlay/Dropdown/Item/Item.styles.js

@@ -1,42 +1,50 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem } from '../../../theme.mixins';
 
-export const ItemStyles = createStyles((theme, { group }) => {
+const ItemStyles = createStyles((theme, { group, disabled }) => {
   const dropdownTheme = theme.other.dropdown;
+
   return {
     root: {
       display: 'flex',
       alignItems: 'center',
       padding: dropdownTheme.spacing.padding.md,
       gap: dropdownTheme.spacing.gap,
       borderRadius: dropdownTheme.border.radius,
-      backgroundColor: dropdownTheme.background.color.default,
+      backgroundColor: disabled
+        ? theme.other.global.background.color.disabled
+        : dropdownTheme.background.color.default,
       '&[data-hovered]': {
-        backgroundColor: dropdownTheme.background.color.hover
+        backgroundColor: !disabled && dropdownTheme.background.color.hover,
       },
       '&:hover': {
-        backgroundColor: dropdownTheme.background.color.hover
+        backgroundColor: !disabled && dropdownTheme.background.color.hover,
       },
       '&:active': {
-        backgroundColor: dropdownTheme.background.color.down
+        backgroundColor: !disabled && dropdownTheme.background.color.down,
       },
-      cursor: 'pointer'
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      pointerEvents: disabled ? 'none' : 'auto',
+      filter: disabled ? 'grayscale(1)' : 'none',
+      opacity: disabled ? 0.5 : 1,
     },
     label: {
       ...dropdownTheme.content.typo,
       color: dropdownTheme.content.color.default,
-      flex: 1
+      flex: 1,
     },
     iconWrapper: {
       position: 'relative',
       minWidth: pxToRem(16),
       minHeight: pxToRem(16),
-      color: dropdownTheme.content.color.default
+      color: dropdownTheme.content.color.default,
       // minHeight: theme.other.global.icon.size.md,
       // minWidth: theme.other.global.icon.size.md,
     },
     check: {
-      color: theme.other.global.content.color.positive.default
-    }
+      color: theme.other.global.content.color.positive.default,
+    },
   };
 });
+
+export { ItemStyles };

packages/icons/solid/esm/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ActivitiesIcon } from './ActivitiesIcon'
+export { default as AddCircleIcon } from './AddCircleIcon'
 export { default as AddCommentIcon } from './AddCommentIcon'
 export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon'
 export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon'
@@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon'
 export { default as UnlockIcon } from './UnlockIcon'
 export { default as UserGroupIcon } from './UserGroupIcon'
 export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon'
+export { default as ViewOffIcon } from './ViewOffIcon'
 export { default as VolumeControlDownIcon } from './VolumeControlDownIcon'
 export { default as VolumeControlFullIcon } from './VolumeControlFullIcon'
 export { default as VolumeControlLowIcon } from './VolumeControlLowIcon'

packages/icons/solid/esm/index.js

@@ -1,4 +1,5 @@
 export { default as ActivitiesIcon } from './ActivitiesIcon.js'
+export { default as AddCircleIcon } from './AddCircleIcon.js'
 export { default as AddCommentIcon } from './AddCommentIcon.js'
 export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon.js'
 export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon.js'
@@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon.js'
 export { default as UnlockIcon } from './UnlockIcon.js'
 export { default as UserGroupIcon } from './UserGroupIcon.js'
 export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon.js'
+export { default as ViewOffIcon } from './ViewOffIcon.js'
 export { default as VolumeControlDownIcon } from './VolumeControlDownIcon.js'
 export { default as VolumeControlFullIcon } from './VolumeControlFullIcon.js'
 export { default as VolumeControlLowIcon } from './VolumeControlLowIcon.js'

packages/icons/solid/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ActivitiesIcon } from './ActivitiesIcon'
+export { default as AddCircleIcon } from './AddCircleIcon'
 export { default as AddCommentIcon } from './AddCommentIcon'
 export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon'
 export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon'
@@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon'
 export { default as UnlockIcon } from './UnlockIcon'
 export { default as UserGroupIcon } from './UserGroupIcon'
 export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon'
+export { default as ViewOffIcon } from './ViewOffIcon'
 export { default as VolumeControlDownIcon } from './VolumeControlDownIcon'
 export { default as VolumeControlFullIcon } from './VolumeControlFullIcon'
 export { default as VolumeControlLowIcon } from './VolumeControlLowIcon'

packages/icons/solid/index.js

@@ -1,4 +1,5 @@
 module.exports.ActivitiesIcon = require("./ActivitiesIcon.js")
+module.exports.AddCircleIcon = require("./AddCircleIcon.js")
 module.exports.AddCommentIcon = require("./AddCommentIcon.js")
 module.exports.AlertInformationCircleIcon = require("./AlertInformationCircleIcon.js")
 module.exports.AlertWarningTriangleIcon = require("./AlertWarningTriangleIcon.js")
@@ -159,6 +160,7 @@ module.exports.TwitterIcon = require("./TwitterIcon.js")
 module.exports.UnlockIcon = require("./UnlockIcon.js")
 module.exports.UserGroupIcon = require("./UserGroupIcon.js")
 module.exports.VideoEditCcTitlesIcon = require("./VideoEditCcTitlesIcon.js")
+module.exports.ViewOffIcon = require("./ViewOffIcon.js")
 module.exports.VolumeControlDownIcon = require("./VolumeControlDownIcon.js")
 module.exports.VolumeControlFullIcon = require("./VolumeControlFullIcon.js")
 module.exports.VolumeControlLowIcon = require("./VolumeControlLowIcon.js")