@indico-data/design-system 2.45.1 → 2.45.3

package/src/components/icons/types.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';
@@ -13,6 +13,6 @@ export type IconProps = PermafrostComponent & {
   name: IconName;
   ariaLabel?: string;
   size?: IconSizes;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   onClick?: MouseEventHandler<SVGElement>;
 };

package/src/legacy/components/modals/ModalBase/ModalBase.stories.tsx

@@ -28,10 +28,8 @@ function StoryRender(props: any) {
         open modal
       </button>
 
-      <ModalBase {...props} open={isOpen} clickToDismiss={handleClose}>
-        <p>
-          There is nothing to this modal at all. It is completely up to you to style its contents.
-        </p>
+      <ModalBase {...props} open={isOpen} width="300px" clickToDismiss={handleClose}>
+        There is nothing to this modal at all. It is completely up to you to style its contents.
       </ModalBase>
     </>
   );

package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx

@@ -17,12 +17,18 @@ function ModalAdapter(props: any): React.ReactElement {
       closeTimeoutMS={120}
       appElement={document.getElementById(props.node || 'root')}
     >
-      {props.children}
+      <div className="modal-content">{props.children}</div>
     </ReactModal>
   );
 }
 
 export const StyledModalBase = styled(ModalAdapter)`
+  .modal-content {
+    background-color: var(--pf-primary-color-600);
+    padding: var(--pf-padding-4);
+    border-radius: var(--pf-rounded-lg);
+  }
+
   .${(props) => props.className}__content {
     position: absolute;
     top: 70px;
@@ -51,7 +57,7 @@ export const StyledModalBase = styled(ModalAdapter)`
 
   .ReactModal__Overlay {
     opacity: 0;
-
+    background-color: rgba(0, 0, 0, 0.5);
     transition: opacity 120ms ease-in-out;
   }
 

package/src/setup/setupIcons.ts

@@ -23,8 +23,9 @@ import {
   faQuestionCircle,
   faCopy,
 } from '@fortawesome/free-solid-svg-icons';
+import { indiconDefinitions } from '@/components/icons/indicons';
 
-// Utility for registering FontAwesome icons
+// Utility for registering Font Awesome icons
 export const registerFontAwesomeIcons = (...icons: IconDefinition[]) => {
   library.add(...icons);
 };
@@ -51,4 +52,7 @@ registerFontAwesomeIcons(
   faFileDownload,
   faQuestionCircle,
   faCopy,
+  // backwards compat, don't require registration of custom indicons
+  // might want to consider doing so in the future
+  ...indiconDefinitions,
 );

package/src/storybook/iconNames.ts

@@ -1,4 +1,4 @@
-// NOTE: This file imports the full list of FontAwesome icons, and is only intended for use in Storybook.
+// NOTE: This file imports the full list of Font Awesome icons, and is only intended for use in Storybook.
 // Avoid importing this file into the design system code to keep bundle size at a minimum.
 
 import { fas } from '@fortawesome/free-solid-svg-icons';