@indico-data/design-system 2.45.3 → 2.45.5

package/README.md

@@ -108,8 +108,10 @@ Do not manually release Permafrost to npm, as it may cause issues with the Seman
 We support registering custom SVG icons (indicons) alongside the ones provided by Font Awesome. To add a new icon, add its SVG to the `indicons` object in `src/components/icons/indicons.ts`.
 
 Not all SVGs can be valid Font Awesome icons. All custom SVGs must:
+
 1. Have a `viewBox` attribute with `width` and `height` values;
-    - While not required, a `viewBox` of `"0 0 100 100"` means it will render consistently with other Indicons and Font Awesome icons.
+   - While not required, a `viewBox` of `"0 0 100 100"` means it will render consistently with other Indicons and Font Awesome icons.
+   - At a minimum, please ensure that the svg `path` reasonably fills the viewbox dimensions. Use an [SVG path editor](https://yqnn.github.io/svg-path-editor/) as needed.
 2. Have the `xmlns` and `fill` attributes set to `"http://www.w3.org/2000/svg"` and `"currentColor"` respectively.
 3. For monotone icons, one (1) `path` element with the `d` attribute set to a valid SVG path, **OR**
 4. For duotone icons, two (2) `path` elements each with a `d` attribute, and where the "bottom" / primary layer is has an opacity of `"1.0"` and the "top" / secondary layer has an opacity of `"0.4"`. Opacity is just the method by which Font Awesome distinguishs between layers internally; the styling is meant to be overriden through the custom CSS.
@@ -122,6 +124,10 @@ To ease with meeting those requirements, we recommended passing exported SVGs th
 
 If an Indicon does not meet the requirements above, registration will fail.
 
+## Rectifying Badly-Sized Icons
+
+As of January 7, 2025, we have observed inconsistencies in the sizing of certain icons within this design system. If you intend to use an icon and find that it appears improperly sized within its parent container, we recommend utilizing an [SVG path editor](https://yqnn.github.io/svg-path-editor/) to adjust and scale the path accordingly, ensuring it fully occupies the viewbox of the surrounding SVG.
+
 ## Theming Addon Documentation
 
 ### Addon - Themes

package/lib/index.esm.js

@@ -153,7 +153,7 @@ const indicons = {
     trash: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M98 27c0-4.4-3.6-10-8-10H75.8L68.7 5.7C66.5 2.1 62.6 0 58.5 0h-17c-4.2 0-8 2.1-10.3 5.7l-7 11.3H10c-4.4 0-8 5.6-8 10 0 1.1.9 2 2 2h9v63c0 4.4 3.6 8 8 8h58c4.4 0 8-3.6 8-8V29h9c1.1 0 2-.9 2-2zM39.8 11c.4-.6 1.1-1 1.8-1h16.9c.7 0 1.4.4 1.8 1l3.8 6H36l3.8-6zM33 86h-2c-1.7 0-3-1.4-3-3V35c0-1.7 1.4-3 3-3h2c1.7 0 3 1.4 3 3v48c0 1.6-1.4 3-3 3zm18 0h-2c-1.7 0-3-1.4-3-3V35c0-1.7 1.4-3 3-3h2c1.7 0 3 1.4 3 3v48c0 1.6-1.4 3-3 3zm18 0h-2c-1.7 0-3-1.4-3-3V35c0-1.7 1.4-3 3-3h2c1.7 0 3 1.4 3 3v48c0 1.6-1.4 3-3 3z" }) })),
     unlock: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M79 46.2V29.6C79 13.6 65.9 0 50 0 37.1 0 26.3 8.4 22.5 19.9c-.8 2.3.6 4.8 3 5.3l5.8 1.2c1.9.4 3.9-.6 4.6-2.5C38 18.4 43 14.3 49.1 14c8.8-.4 15.9 6.5 15.9 15v17H23c-6.6 0-12 5.4-12 12v30c0 6.6 5.4 12 12 12h54c6.6 0 12-5.4 12-12V58c0-5.9-4.3-10.9-10-11.8zM50 85c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z" }) })),
     upload: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M56.2 26.6V0h-39c-2.6 0-4.7 2.1-4.7 4.7v90.6c0 2.6 2.1 4.7 4.7 4.7h65.6c2.6 0 4.7-2.1 4.7-4.7V31.2H60.9c-2.5 0-4.7-2.1-4.7-4.6zm15 36.9c2 1.9.6 5.3-2.2 5.3H56.1v15.6c0 1.7-1.4 3.1-3.1 3.1h-6.2c-1.7 0-3.1-1.4-3.1-3.1V68.8H31c-2.8 0-4.2-3.3-2.2-5.3l18.8-18.7c1.3-1.3 3.4-1.3 4.7 0l18.9 18.7zm14.9-43L67 1.4C66.1.5 64.9 0 63.7 0h-1.2v25h25v-1.2c0-1.2-.5-2.4-1.4-3.3z" }) })),
-    url: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 50 50", children: jsx("path", { d: "M22 33.1h-8q-3.85 0-6.475-2.625T4.9 24t2.625-6.475T14 14.9h8v2.3h-8q-2.9 0-4.85 1.95T7.2 24t1.95 4.85T14 30.8h8zm-5.3-7.95v-2.3h14.65v2.3zM26 33.1v-2.3h8q2.9 0 4.85-1.95T40.8 24t-1.95-4.85T34 17.2h-8v-2.3h8q3.85 0 6.475 2.625T43.1 24t-2.625 6.475T34 33.1z" }) })),
+    url: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M 44.2376 70.4481 h -20.8177 q -10.0185 0 -16.8493 -6.8308 T -0.2602 46.768 t 6.8308 -16.8493 T 23.4199 23.0879 h 20.8177 v 5.9851 h -20.8177 q -7.5464 0 -12.6207 5.0743 T 5.7249 46.768 t 5.0743 12.6207 T 23.4199 64.4631 h 20.8177 z m -13.7917 -20.6876 v -5.9851 h 38.1224 v 5.9851 z M 54.6465 70.4481 v -5.9851 h 20.8177 q 7.5464 0 12.6207 -5.0743 T 93.1592 46.768 t -5.0743 -12.6207 T 75.4642 29.073 h -20.8177 v -5.9851 h 20.8177 q 10.0185 0 16.8493 6.8308 T 99.1443 46.768 t -6.8308 16.8493 T 75.4642 70.4481 z" }) })),
     user: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M50 10c9.9 0 18 8.1 18 18s-8.1 18-18 18-18-8.1-18-18 8.1-18 18-18m0-10C34.5 0 22 12.5 22 28s12.5 28 28 28 28-12.5 28-28S65.5 0 50 0zm0 70c12.6 0 23.4 4.8 31.2 13.8.5.6.8 1.4.8 2.3V90H18v-3.8c0-.9.4-1.9 1-2.6C26.9 74.7 37.6 70 50 70m0-10c-15.6 0-29 6.2-38.5 16.9C9.3 79.5 8 82.7 8 86.2v7.2c0 3.7 3 6.7 6.7 6.7h70.6c3.7 0 6.7-3 6.7-6.7v-7.2c0-3.2-1.1-6.4-3.2-8.9C79.3 66.4 65.8 60 50 60z" }) })),
     wand: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M87.7 25.3 85 22.6c-1.4-1.4-3.2-2-4.9-2-1.8 0-3.6.7-4.9 2L12.3 85.4c-2.7 2.7-2.7 7.2 0 9.9L15 98c1.4 1.4 3.2 2 4.9 2 1.8 0 3.6-.7 4.9-2l62.8-62.8c2.8-2.8 2.8-7.2.1-9.9zm-3.5 6.3L65.5 50.3 60 44.8l18.7-18.7c.5-.5 1.1-.6 1.4-.6.3 0 .9.1 1.4.6l2.7 2.7c.5.5.6 1.1.6 1.4s-.1.9-.6 1.4zM30.6 7.1l2.8 11.3c.2.6.6 1.1 1.2 1.2l11.3 2.8c1.7.4 1.7 2.9 0 3.3l-11.3 2.8c-.6.2-1.1.6-1.2 1.2L30.6 41c-.4 1.7-2.9 1.7-3.3 0l-2.8-11.3c-.2-.6-.6-1.1-1.2-1.2L12 25.7c-1.7-.4-1.7-2.9 0-3.3l11.3-2.8c.6-.2 1.1-.6 1.2-1.2l2.8-11.3c.4-1.7 2.9-1.7 3.3 0zm29.1-5.7.9 3.5c.2.7.7 1.2 1.4 1.4l3.5.9c1.9.5 1.9 3.2 0 3.7l-3.5.9c-.7.2-1.2.7-1.4 1.4l-.9 3.5c-.5 1.9-3.2 1.9-3.7 0l-.9-3.5c-.2-.7-.7-1.2-1.4-1.4l-3.5-.9c-1.9-.5-1.9-3.2 0-3.7l3.5-.9c.7-.2 1.2-.7 1.4-1.4l.9-3.5c.4-1.9 3.2-1.9 3.7 0z" }) })),
     warning: (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M83.9 95.3H16.1c-6.8 0-12-2.4-14.5-6.8s-2-10 1.4-16l33.9-58.7C40.3 7.9 45 4.6 50 4.6s9.7 3.3 13.1 9.2L97 72.6c3.4 5.9 3.9 11.6 1.4 16-2.5 4.3-7.7 6.7-14.5 6.7zm-27-19.7c0-3.5-2.9-6.4-6.4-6.4s-6.4 2.9-6.4 6.4c0 3.5 2.9 6.4 6.4 6.4s6.4-2.8 6.4-6.4zm.2-40.4c0-3.6-2.9-6.6-6.6-6.6s-6.5 3-6.5 6.6l1.5 23.3c.2 2.6 2.4 4.6 5 4.6 5 0 5-4.6 5-4.6l1.6-23.3z" }) })),
@@ -2724,13 +2724,14 @@ const Icon = (_a) => {
         [`icon--${size}`]: size,
     }, className);
     const faIconName = name.split('fa-')[1];
-    const faIcon = faIconName &&
-        findIconDefinition({
+    // If the icon name starts with 'fa-', it's a Font Awesome icon
+    // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
+    const icon = faIconName
+        ? findIconDefinition({
             prefix: 'fas',
             iconName: faIconName,
-        });
-    const icon = faIcon ||
-        findIconDefinition({
+        })
+        : findIconDefinition({
             prefix: 'fak',
             // @ts-ignore
             iconName: name,
@@ -6040,7 +6041,7 @@ const Button$1 = forwardRef((props, ref) => {
             onClick(event);
         }
     };
-    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading...", size: size })), iconLeft && (jsx(Icon, { name: iconLeft, className: children ? 'mr-2' : '', ariaLabel: `${iconLeft} Icon`, size: size })), children, iconRight && (jsx(Icon, { name: iconRight, className: children ? 'ml-2' : '', ariaLabel: `${iconRight} Icon`, size: size }))] })));
+    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && !iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'mr-2' : '', ariaLabel: "Loading...", size: size })), iconLeft && !isLoading && (jsx(Icon, { name: iconLeft, className: children ? 'mr-2' : '', ariaLabel: `${iconLeft} Icon`, size: size })), children, iconRight && !isLoading && (jsx(Icon, { name: iconRight, className: children ? 'ml-2' : '', ariaLabel: `${iconRight} Icon`, size: size })), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'ml-2' : '', ariaLabel: "Loading...", size: size }))] })));
 });
 
 const StyledConfirmModal = n.div `