@indico-data/design-system 2.19.0 → 2.21.0

package/src/components/popper/styles/Popper.scss

@@ -0,0 +1,11 @@
+@import './variables.scss';
+
+.popper-container {
+  z-index: 99;
+}
+
+.popper-content {
+  border-radius: var(--pf-popper-border-radius);
+  border: 1px solid var(--pf-popper-border-color);
+  background: var(--pf-popper-background-color);
+}

package/src/components/popper/styles/_variables.scss

@@ -0,0 +1,15 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-popper-background-color: var(--pf-white-color);
+  --pf-popper-border-color: var(--pf-gray-color-900);
+  --pf-popper-border-radius: var(--pf-rounded);
+  --pf-popper-padding: var(--pf-padding-2);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-popper-background-color: var(--pf-primary-color-600);
+  --pf-popper-border-color: var(--pf-gray-color);
+}

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+
+export const useClickOutside = (
+  ref: React.MutableRefObject<HTMLElement>,
+  handler: (e: MouseEvent | TouchEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (e: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(e.target as Node)) {
+        return;
+      }
+      handler(e);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+};

package/src/index.ts

@@ -71,3 +71,5 @@ export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
+export { Popper } from './components/popper';
+export { Menu } from './components/menu';

package/src/legacy/components/buttons/commonStyles.ts

@@ -42,10 +42,6 @@ export const defaults = css`
   font-family: ${TYPOGRAPHY.fontFamily.base};
 
   padding: 0 1em !important;
-
-  & + button {
-    margin-left: 14px;
-  }
 `;
 
 export const sizeLarge = css`

package/src/styles/_typography.scss

@@ -45,7 +45,7 @@ html {
   font-size: var(--pf-font-size-caption);
 }
 .text-overline {
-  font-size: var(--pf-font-size-overine);
+  font-size: var(--pf-font-size-overline);
 }
 
 // Transform

package/src/styles/index.scss

@@ -16,6 +16,8 @@
 @import '../components/forms/toggle/styles/Toggle.scss';
 @import '../components/skeleton/styles/Skeleton.scss';
 @import '../components/card/styles/Card.scss';
+@import '../components/menu/styles/Menu.scss';
+@import '../components/popper/styles/Popper.scss';
 @import '../legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss';
 @import 'typography';
 @import 'colors';

package/src/styles/variables/_typography.scss

@@ -4,7 +4,6 @@
   // Family
   --pf-font-family-base: 'Mulish', sans-serif;
 
-
   // Sizes
   --pf-font-size-base: 1rem;
   --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
@@ -18,7 +17,7 @@
   --pf-font-size-subtitle: var(--pf-font-size-base);
   --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
   --pf-font-size-button: var(--pf-font-size-base);
-  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
 
   // Weights
   --pf-font-weight-thin: 100;
@@ -27,5 +26,4 @@
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
-
-}
+}