@festo-ui/react 7.2.0-dev.422 → 7.2.0-dev.426

package/node/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -7,11 +7,12 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Popover = _interopRequireDefault(require("../popover/Popover"));
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PopoverMenu(_ref) {
   let {
-    icon,
+    children,
     menu,
     className,
     ...props
@@ -35,8 +36,8 @@ function PopoverMenu(_ref) {
         type: "button",
         className: "fwe-btn fwe-btn-link fwe-dark",
         onClick: e => handleClick(e, item),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: `fwe-icon fwe-mr-0 ${item.icon}`
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+          icon: item.icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: item.text
         })]
@@ -53,11 +54,8 @@ function PopoverMenu(_ref) {
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
-        "data-testid": "fwe-popover-menu-button",
-        className: "fwe-btn fwe-btn-link fwe-dark origin",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: `fwe-icon fwe-mr-0 ${icon}`
-        })
+        className: "menu-button",
+        children: children
       })
     })
   });

package/node/lib/components/tab/Tabs.js

@@ -8,6 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
 var _useTabScroll = _interopRequireDefault(require("./useTabScroll"));
+var _IconWrapper = _interopRequireDefault(require("../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -148,8 +149,8 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                   role: "tab",
                   "aria-controls": id,
                   "aria-selected": active,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                    className: `fwe-icon ${icon}`
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+                    icon: icon
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                     children: name
                   })]

package/node/lib/forms/color-picker/ColorPicker.js

@@ -9,6 +9,8 @@ var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ColorHelper = _interopRequireDefault(require("./ColorHelper"));
 var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _checkSmall = _interopRequireDefault(require("../../components/icons/check-small"));
+var _collapse = _interopRequireDefault(require("../../components/icons/collapse"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -376,8 +378,8 @@ function ColorPicker(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "fwe-input-type",
             children: inputType
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "fwe-icon fwe-icon-arrows-collapse"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, {
+            className: "fwe-ml-s"
           })]
         }), selectOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fwe-popover",
@@ -386,17 +388,13 @@ function ColorPicker(_ref) {
               'fwe-selected': inputType === 'HEX'
             }),
             onClick: () => onChangeType('HEX'),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "fwe-icon fwe-icon-menu-check"
-            }), " HEX"]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {}), " HEX"]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _classnames.default)('fwe-type-item', {
               'fwe-selected': inputType === 'RGB'
             }),
             onClick: () => onChangeType('RGB'),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "fwe-icon fwe-icon-menu-check"
-            }), " RGB"]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {}), " RGB"]
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -521,8 +519,8 @@ function ColorPicker(_ref) {
             fill: "url(#bwsquare2px)",
             strokeWidth: "0"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: (0, _classnames.default)('fwe-icon fwe-icon-menu-check', {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {
+          className: (0, _classnames.default)({
             'fwe-color-text': !innerColor
           })
         })]
@@ -536,9 +534,7 @@ function ColorPicker(_ref) {
             background: colorItem
           },
           onClick: () => updateColorRgb(colorItem.toUpperCase()),
-          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "fwe-icon fwe-icon-menu-check"
-          })
+          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkSmall.default, {})
         }, colorItem);
       })]
     })]

package/node/lib/forms/segment/segment-control/SegmentControl.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _IconWrapper = _interopRequireDefault(require("../../../components/icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -19,20 +20,15 @@ function SegmentControl(props) {
     value,
     icon,
     onChange,
-    iconOnly,
     id,
-    className
+    className,
+    iconOnly
   } = props;
   const componentId = (0, _react.useRef)(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
   let viewMode = 'text';
   if (icon) {
     viewMode = iconOnly ? 'icon' : 'icon-text';
   }
-  const prefix = 'fwe-icon-';
-  let innerIcon = icon;
-  if (icon && icon.indexOf(prefix) === -1) {
-    innerIcon = prefix + icon;
-  }
   const handleChange = event => {
     if (onChange) {
       onChange(event, value);
@@ -55,15 +51,16 @@ function SegmentControl(props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "fwe-sr-only",
           children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          "aria-hidden": "true",
-          className: (0, _classnames.default)('fwe-icon', innerIcon)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+          icon: icon
         })]
       }), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          "aria-hidden": "true",
-          className: (0, _classnames.default)('fwe-icon', innerIcon)
-        }), label]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+          icon: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-ml-xxs",
+          children: label
+        })]
       })]
     })]
   });

package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js

@@ -10,6 +10,8 @@ var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef"));
 var _LinkButton = _interopRequireDefault(require("../../../components/link-button/LinkButton"));
 var _TimePickerInput = _interopRequireDefault(require("./TimePickerInput"));
 var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside"));
+var _collapse = _interopRequireDefault(require("../../../components/icons/collapse"));
+var _expand = _interopRequireDefault(require("../../../components/icons/expand"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -149,10 +151,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "hour up",
             className: "fwe-dark",
             onClick: () => handleHourIncrement(1),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expand.default, {})
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "aria-label": "hours value",
             min: min,
@@ -164,10 +164,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "hour down",
             className: "fwe-dark",
             onClick: () => handleHourIncrement(-1),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, {})
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fwe-timepicker-spinners-minutes",
@@ -175,10 +173,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "minute up",
             className: "fwe-dark",
             onClick: () => handleMinuteIncrement(innerMinuteStepSize),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expand.default, {})
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "aria-label": "minutes value",
             min: min,
@@ -189,10 +185,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "minute down",
             className: "fwe-dark",
             onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, {})
           })]
         }), showSeconds && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fwe-timepicker-spinners-seconds",
@@ -200,10 +194,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "seconds up",
             className: "fwe-dark",
             onClick: () => handleSecondIncrement(1),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-expand"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expand.default, {})
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerInput.default, {
             "aria-label": "seconds value",
             min: min,
@@ -214,10 +206,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             "aria-label": "minute down",
             className: "fwe-dark",
             onClick: () => handleSecondIncrement(-1),
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              "aria-hidden": true,
-              className: "fwe-icon fwe-icon-arrows-collapse"
-            })
+            iconOnly: true,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, {})
           })]
         })]
       }), timeFormat === '12' && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "7.2.0-dev.422",
+  "version": "7.2.0-dev.426",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "exports": {

package/lib/components/chips/chip/DeleteIcon.d.ts

@@ -1,2 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-export default function DeleteIcon(props: ComponentPropsWithoutRef<'i'>): JSX.Element;

package/lib/components/chips/chip/DeleteIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function DeleteIcon(props) {
-  return /*#__PURE__*/_jsx("i", {
-    ...props,
-    className: "fwe-icon fwe-icon-menu-close"
-  });
-}

package/node/lib/components/chips/chip/DeleteIcon.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DeleteIcon;
-var _jsxRuntime = require("react/jsx-runtime");
-function DeleteIcon(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-    ...props,
-    className: "fwe-icon fwe-icon-menu-close"
-  });
-}