Merge branch 'main' of https://github.com/gsoft-inc/ov-igloo-ui into …

…feat/metric
gsoft-inc · Jul 7, 2023 · c5bd358 · c5bd358
2 parents 2bde2be + 8812669
commit c5bd358
Show file tree

Hide file tree

Showing 34 changed files with 282 additions and 170 deletions.
diff --git a/.changeset/blue-moons-dream.md b/.changeset/blue-moons-dream.md
@@ -0,0 +1,5 @@
+---
+'@igloo-ui/tag-picker': patch
+---
+
+Tags in TagPicker were not receiving the hasError prop so it was added to fix this.
diff --git a/.storybook/styles.css b/.storybook/styles.css
@@ -180,12 +180,13 @@ body,
   align-items: center;
   box-shadow: 0 1px 6px rgb(35 48 67 / 10%);
   display: flex;
-  height: 10rem;
+  height: 6rem;
   justify-content: flex-end;
-  margin: 4rem 0 10rem;
+  margin: 2rem 0;
   position: relative;
   transform: translateY(0);
   transition: transform .4s, box-shadow .4s, opacity .4s;
+  z-index: 0;
 }
 
 .isb-action-menu__card:hover {

diff --git a/packages/ActionMenu/CHANGELOG.md b/packages/ActionMenu/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @igloo-ui/action-menu
 
+## 1.1.3
+
+### Patch Changes
+
+- 9d9d72a: Fixed WithinContainer story to show two cards and address z-index issues.
+- Updated dependencies [9d9d72a]
+  - @igloo-ui/dropdown@1.4.0
+
 ## 1.1.2
 
 ### Patch Changes

diff --git a/packages/ActionMenu/package.json b/packages/ActionMenu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/action-menu",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "dist/ActionMenu.js",
   "module": "dist/ActionMenu.js",
   "types": "dist/ActionMenu.d.ts",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@igloo-ui/dropdown": "^1.3.0",
+    "@igloo-ui/dropdown": "^1.4.0",
     "@igloo-ui/list": "^0.4.0",
     "classnames": "^2.3.2"
   },

diff --git a/packages/ActionMenu/src/ActionMenu.stories.tsx b/packages/ActionMenu/src/ActionMenu.stories.tsx
@@ -127,16 +127,38 @@ export const Overview = {
 };
 
 export const WithinContainer = {
-  render: (args: ActionMenuProps) => (
-    <ChromaticWrapper>
-      <div className="isb-action-menu__card">
-        <ActionMenu
-          {...args}
-        />
-      </div>
-    </ChromaticWrapper>
-  ),
+  render: (args: ActionMenuProps) => {
+    const [openedIndex, setOpenedIndex] = React.useState<number | null>(null);
 
+    return (
+      <ChromaticWrapper>
+        <div className="isb-action-menu__card"
+            style={{zIndex: openedIndex === 0 ? 5 : 0}}>
+          <ActionMenu
+            {...args}
+            onMenuOpen={() => {
+              setOpenedIndex(0);
+            }}
+            onMenuClose={() => {
+              setOpenedIndex(null);
+            }}
+          />
+        </div>
+        <div className="isb-action-menu__card" 
+            style={{zIndex: openedIndex === 1 ? 5 : 0}}>
+          <ActionMenu
+            {...args}
+            onMenuOpen={() => {
+              setOpenedIndex(1);
+            }}
+            onMenuClose={() => {
+              setOpenedIndex(null);
+            }}
+          />
+        </div>
+      </ChromaticWrapper>
+    )
+  },
   args: {
     options: actionMenuList,
     renderReference: kebab,

diff --git a/packages/Combobox/CHANGELOG.md b/packages/Combobox/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @igloo-ui/combobox
 
+## 1.2.0
+
+### Minor Changes
+
+- 9d9d72a: Allow Combobox, Select, TagPicker and Dropdown components to scroll if it's too long and runs out of room in the viewport. New properties added to Dropdown are: isReferenceWidth, isScrollable and footer. The display of the footer was moved to the dropdown instead of leaving it in combobox because the dropdown handles the scroll styles and the footer is sticky.
+
+### Patch Changes
+
+- Updated dependencies [9d9d72a]
+- Updated dependencies [9d9d72a]
+  - @igloo-ui/tooltip@3.1.4
+  - @igloo-ui/dropdown@1.4.0
+
 ## 1.1.0
 
 ### Minor Changes

diff --git a/packages/Combobox/package.json b/packages/Combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/combobox",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/Combobox.js",
   "module": "dist/Combobox.js",
   "types": "dist/Combobox.d.ts",
@@ -24,14 +24,13 @@
     "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@igloo-ui/dropdown": "^1.3.0",
+    "@igloo-ui/dropdown": "^1.4.0",
     "@igloo-ui/list": "^0.4.0",
     "@igloo-ui/icons": "^1.6.0",
     "@igloo-ui/icon-button": "^1.0.2",
     "@igloo-ui/input": "^2.0.5",
     "@igloo-ui/tokens": "^2.0.0",
-    "@igloo-ui/tooltip": "^3.1.3",
-    "@react-hook/resize-observer": "^1.2.6",
+    "@igloo-ui/tooltip": "^3.1.4",
     "classnames": "^2.3.2"
   },
   "devDependencies": {

diff --git a/packages/Combobox/src/Combobox.stories.tsx b/packages/Combobox/src/Combobox.stories.tsx
@@ -89,6 +89,30 @@ const largeOptionList: ComboboxOption[] = [
     label: 'Text 6',
     value: '6',
   },
+  {
+    label: 'Text 7',
+    value: '7',
+  },
+  {
+    label: 'Text 8',
+    value: '8',
+  },
+  {
+    label: 'Text 9',
+    value: '9',
+  },
+  {
+    label: 'Text 10',
+    value: '10',
+  },
+  {
+    label: 'Text 11',
+    value: '11',
+  },
+  {
+    label: 'Text 12',
+    value: '12',
+  },
 ];
 
 const listWithAction: ComboboxOption[] = [

diff --git a/packages/Combobox/src/Combobox.tsx b/packages/Combobox/src/Combobox.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import cx from 'classnames';
-import useResizeObserver from '@react-hook/resize-observer';
 
 import Dropdown from '@igloo-ui/dropdown';
 import List, { OptionType, Option } from '@igloo-ui/list';
@@ -124,11 +123,6 @@ const Combobox: React.FunctionComponent<ComboboxProps> = ({
     comboboxOptions || []
   );
 
-  const [comboboxRect, setComboboxRect] = React.useState<DOMRectReadOnly>();
-  useResizeObserver(comboboxRef, (entry) => {
-    setComboboxRect(entry.contentRect);
-  });
-
   const keepOpen = !closeOnSelect || multiple;
 
   // Setting state is asynchronous so these actions
@@ -381,14 +375,11 @@ const Combobox: React.FunctionComponent<ComboboxProps> = ({
     'ids-combobox--error': error,
   });
 
-  const comboboxDropdownClassname = cx(
-    'ids-combobox__dropdown',
-    `${className}__dropdown`,
-    {
-      'ids-combobox__dropdown--compact': isCompact,
-      'ids-combobox__dropdown--has-footer': !!footer,
-    }
-  );
+  const comboboxDropdownClassname = cx('ids-combobox__dropdown', {
+    [`${className}__dropdown`]: !!className,
+    'ids-combobox__dropdown--compact': isCompact,
+    'ids-combobox__dropdown--has-footer': !!footer,
+  });
 
   const noResultsOrLoading = loading ? (
     <List
@@ -415,31 +406,28 @@ const Combobox: React.FunctionComponent<ComboboxProps> = ({
       <Dropdown
         key="comboboxDropdown"
         content={
-          <>
-            {results && results.length ? (
-              <List
-                options={results}
-                isCompact
-                onOptionFocus={hoverOption}
-                onOptionChange={updateOption}
-                onOptionBlur={() => setCurrentFocusedOption(undefined)}
-                selectedOption={
-                  multiple ? selectedOption : currentSelectedOption
-                }
-                focusedOption={currentFocusedOption}
-                multiple={multiple}
-                disableTabbing
-                className="ids-combobox__list"
-              />
-            ) : (
-              noResultsOrLoading
-            )}
-            {footer && <div className="ids-combobox__footer">{footer}</div>}
-          </>
+          results && results.length ? (
+            <List
+              options={results}
+              isCompact
+              onOptionFocus={hoverOption}
+              onOptionChange={updateOption}
+              onOptionBlur={() => setCurrentFocusedOption(undefined)}
+              selectedOption={multiple ? selectedOption : currentSelectedOption}
+              focusedOption={currentFocusedOption}
+              multiple={multiple}
+              disableTabbing
+              className="ids-combobox__list"
+            />
+          ) : (
+            noResultsOrLoading
+          )
         }
+        footer={footer}
+        isScrollable
         isOpen={canShowMenu}
-        style={{ width: autoWidth ? '' : comboboxRect?.width }}
         className={comboboxDropdownClassname}
+        isReferenceWidth={!autoWidth}
         onClose={() => {
           toggleMenu(true, true);
         }}

diff --git a/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap b/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Combobox It should render a snapshot 1`] = `
       </div>
     </div>
     <div
-      class="ids-dropdown ids-combobox__dropdown undefined__dropdown ids-dropdown--bottom-start"
+      class="ids-dropdown ids-combobox__dropdown ids-dropdown--bottom-start"
       data-show="true"
       style="position: fixed; top: 0px; left: 0px;"
     >

diff --git a/packages/Combobox/src/combobox.scss b/packages/Combobox/src/combobox.scss
@@ -1,6 +1,5 @@
 @use '~@igloo-ui/tokens/dist/base10/variables' as tokens;
 @use '~@igloo-ui/tokens/dist/fonts';
-@use 'mixins';
 
 :root {
   /* Default */
@@ -35,10 +34,6 @@
   --ids-combobox-no-results-font-size: #{tokens.$font-size-3};
   --ids-combobox-no-results-padding: #{tokens.$space-3};
   --ids-combobox-no-results-line-height: #{tokens.$line-height-xxl};
-
-  /* Footer */
-  --ids-combobox-footer-background: #{tokens.$samoyed};
-  --ids-combobox-footer-padding: #{tokens.$space-2} #{tokens.$space-3};
 }
 
 .ids-combobox {
@@ -99,19 +94,6 @@
   }
 }
 
-.ids-combobox__dropdown {
-  display: flex;
-  flex-direction: column;
-}
-
-.ids-combobox__list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-
-  @include mixins.fancy-webkit-scrollbar;
-}
-
 .ids-combobox__dropdown--has-footer .ids-combobox__list {
   padding-bottom: 0;
 }
@@ -122,9 +104,3 @@
   line-height: var(--ids-combobox-no-results-line-height);
   padding: var(--ids-combobox-no-results-padding);
 }
-
-.ids-combobox__footer {
-  background: var(--ids-combobox-footer-background);
-  flex: 0 0 auto;
-  padding: var(--ids-combobox-footer-padding);
-}
diff --git a/packages/Dropdown/CHANGELOG.md b/packages/Dropdown/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @igloo-ui/dropdown
 
+## 1.4.0
+
+### Minor Changes
+
+- 9d9d72a: Allow Combobox, Select, TagPicker and Dropdown components to scroll if it's too long and runs out of room in the viewport. New properties added to Dropdown are: isReferenceWidth, isScrollable and footer. The display of the footer was moved to the dropdown instead of leaving it in combobox because the dropdown handles the scroll styles and the footer is sticky.
+
 ## 1.3.0
 
 ### Minor Changes

diff --git a/packages/Dropdown/package.json b/packages/Dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/dropdown",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/Dropdown.js",
   "module": "dist/Dropdown.js",
   "types": "dist/Dropdown.d.ts",
@@ -24,7 +24,7 @@
     "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.23.0",
+    "@floating-ui/react": "^0.24.3",
     "@igloo-ui/tokens": "^2.0.0",
     "classnames": "^2.3.2"
   },

diff --git a/packages/Dropdown/src/Dropdown.stories.tsx b/packages/Dropdown/src/Dropdown.stories.tsx
@@ -94,20 +94,37 @@ export const DropdownInAModal = () => {
   return (
     <>
       <Button onClick={() => setShow(true)}>open</Button>
-      <Modal isClosable isOpen={show} onClose={() => setShow(false)}>
-        <div style={{ height: 400, overflow: 'auto' }}>
+      <Modal isClosable isDismissable isOpen={show} onClose={() => setShow(false)}>
+        <div style={{ height: 400 }}>
           Scroll down
           <div style={{ height: 1000, paddingTop: 500 }}>
             <Dropdown
               isOpen={open}
               onClose={() => setOpen(false)}
+              isScrollable
               content={
                 <List
                   items={[
                     'Organization details',
                     'Billing',
                     'Permissions',
                     'Segments',
+                    'Organization details',
+                    'Billing',
+                    'Permissions',
+                    'Segments',
+                    'Organization details',
+                    'Billing',
+                    'Permissions',
+                    'Segments',
+                    'Organization details',
+                    'Billing',
+                    'Permissions',
+                    'Segments',
+                    'Organization details',
+                    'Billing',
+                    'Permissions',
+                    'Segments',
                   ]}
                 />
               }