@indico-data/design-system 2.45.2 → 2.45.4

package/README.md

@@ -36,16 +36,16 @@ This repository follows a slightly modified version of the [ESLint Commit Messag
 
 ### Title
 
-The title should have the following format: `<type>(<optional ticket id>): <short summary>`
+The title should have the following format: `<Tag>: <Short description>`
 
-The `<type>` should be `Fix`, `Update`, `New`, or `Breaking` for controlling releases.
+The `<Tag>` should be `Fix`, `Update`, `New`, or `Breaking` for controlling releases.
 
-If the PR need not be associated with a new release, choose any other `<type>` from the [ESLint commit convention tags](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint#eslint-convention), such as `Docs` (documentation), `Build` (build process), `Upgrade` (dependency upgrade), or `Chore` (non-user-facing tasks).
+If the PR need not be associated with a new release, choose any other `<Tag>` from the [ESLint commit convention tags](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint#eslint-convention), such as `Docs` (documentation), `Build` (build process), `Upgrade` (dependency upgrade), or `Chore` (non-user-facing tasks).
 
 Examples:
 
 - `Update: button color adjustment`
-- `New(SNC-222): add dark mode`
+- `New: [SNC-222] add dark mode`
 
 If your PR title does not follow these commit conventions, merging will be blocked.
 
@@ -103,6 +103,31 @@ Do NOT use the `version` attribute of `package.json` to track or initiate releas
 
 Do not manually release Permafrost to npm, as it may cause issues with the Semantic Release pipeline.
 
+## Adding New Indicons
+
+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.
+   - 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.
+
+For monotone icons, the `currentColor` attribute of the SVG ensures that the color of the icons inherits from the parent element.
+
+For duotone icons, the two `path`s should not be intersecting; aka, the secondary layer should be cut out of the primary one.
+
+To ease with meeting those requirements, we recommended passing exported SVGs through an optimizer like [svgo](https://svgomg.net/) to merge paths and remove unnecessary attributes (enabling every option except `Remove xmlns`, with a `Precision` of `2` usually results in an identical but cleaner SVG). [SVG Editor Online](https://freesvgeditor.com/en/svg-editor-online) is another good option for deleting nodes, paths, and general editing.
+
+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/components/forms/date/datePicker/contants.d.ts

@@ -10,7 +10,7 @@ export declare const getCommonProps: (props: CommonProps) => {
     components: Partial<import("react-day-picker").CustomComponents> | undefined;
     isDisabled: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
     formatters: Partial<import("react-day-picker").Formatters> | undefined;
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    weekStartsOn: 0 | 2 | 1 | 5 | 3 | 4 | 6 | undefined;
     firstWeekContainsDate: 1 | 4 | undefined;
     today: Date | undefined;
     required: any;

package/lib/components/icons/Icon.stories.d.ts

@@ -6,5 +6,6 @@ type Story = StoryObj<IconProps>;
 export declare const DefaultIcon: Story;
 export declare const IconStates: Story;
 export declare const CustomStyledIcon: Story;
+export declare const DuotoneIconStory: Story;
 export declare const Indicons: Story;
 export declare const FontAwesomeIcons: Story;

package/lib/components/icons/indicons.d.ts

@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 declare const indicons: {
     'indico-o-white': import("react/jsx-runtime").JSX.Element;
     account: import("react/jsx-runtime").JSX.Element;
@@ -152,4 +153,5 @@ declare const indicons: {
     'zoom-in': import("react/jsx-runtime").JSX.Element;
     'zoom-out': import("react/jsx-runtime").JSX.Element;
 };
-export { indicons };
+declare const indiconDefinitions: IconDefinition[];
+export { indicons, indiconDefinitions };

package/lib/components/icons/types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
 import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
@@ -9,6 +9,6 @@ export type IconProps = PermafrostComponent & {
     name: IconName;
     ariaLabel?: string;
     size?: IconSizes;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     onClick?: MouseEventHandler<SVGElement>;
 };

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
-import React$1, { MouseEventHandler, ReactElement } from 'react';
+import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
@@ -172,7 +172,7 @@ type IconProps = PermafrostComponent & {
     name: IconName;
     ariaLabel?: string;
     size?: IconSizes;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     onClick?: MouseEventHandler<SVGElement>;
 };