Merge branch 'main' of https://github.com/gsoft-inc/ov-igloo-ui into feature/IGL-115-action-menu_drodpown-props

Author: vicky-comeau

packages/ActionMenu/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @igloo-ui/action-menu
 
+## 1.3.5
+
+### Patch Changes
+
+- ed3dc67: Added optional helper text prop to be passed to dropdown
+
+## 1.3.4
+
+### Patch Changes
+
+- cfb5619: Updated hopper token versions and button versions.
+- Updated dependencies [cfb5619]
+  - @igloo-ui/dropdown@1.6.6
+  - @igloo-ui/list@0.5.5
+
 ## 1.3.3
 
 ### Patch Changes

packages/ActionMenu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/action-menu",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "main": "dist/ActionMenu.js",
   "module": "dist/ActionMenu.js",
   "types": "dist/ActionMenu.d.ts",
@@ -25,14 +25,15 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@igloo-ui/dropdown": "^1.6.5",
-    "@igloo-ui/list": "^0.5.4",
+    "@igloo-ui/dropdown": "^1.6.6",
+    "@igloo-ui/list": "^0.5.5",
     "@hopper-ui/tokens": "^3.1.3",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
     "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/button": "^0.7.4",
+    "@igloo-ui/helper-text": "^0.2.16",
     "@igloo-ui/icon-button": "^1.1.6"
   },
   "browserslist": [

packages/ActionMenu/src/ActionMenu.stories.tsx

@@ -3,6 +3,7 @@ import isChromatic from 'chromatic/isChromatic';
 
 import IconButton from '@igloo-ui/icon-button';
 import Button from '@igloo-ui/button';
+import HelperText from '@igloo-ui/helper-text';
 import Kebab from '@igloo-ui/icons/dist/Kebab';
 import AddSolid from '@igloo-ui/icons/dist/AddSolid';
 import Delete from '@igloo-ui/icons/dist/Delete';
@@ -278,3 +279,15 @@ export const Events = () => {
     </ChromaticWrapper>
   );
 };
+
+export const WithFooter = () => {
+  return (
+    <ChromaticWrapper>
+      <ActionMenu
+        renderReference={kebab}
+        options={actionMenuListEvents}
+        footer={<HelperText>Helper text</HelperText>}
+      />
+    </ChromaticWrapper>
+  );
+};

packages/ActionMenu/src/ActionMenu.tsx

@@ -55,6 +55,8 @@ export interface ActionMenuProps extends React.ComponentProps<"div"> {
     renderReference: (
         props: React.HTMLProps<HTMLButtonElement>,
     ) => React.ReactElement;
+    /** Footer to display helper text or other content below the options */
+    footer?: React.ReactNode;
 }
 
 const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
@@ -70,6 +72,7 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
     options,
     position = "bottom-end",
     renderReference,
+    footer,
     ...rest
 }: ActionMenuProps) => {
     const actionMenuOptions = options.map((option): OptionType => {
@@ -81,7 +84,7 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
 
     const [showMenu, setShowMenu] = React.useState(isOpen);
     const [currentFocusedOption, setCurrentFocusedOption] =
-    React.useState<OptionType>();
+        React.useState<OptionType>();
 
     const isOptionDisabled = (option: OptionType | undefined): boolean => {
         if (option?.type === "list") {
@@ -138,7 +141,7 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
         const enabledOptions = actionMenuOptions.filter(
             option => !isOptionDisabled(option)
         );
-        if (!enabledOptions.length) {return;}
+        if (!enabledOptions.length) { return; }
 
         let currentFocusedIndex = -1;
         if (currentFocusedOption) {
@@ -265,6 +268,7 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
                         className: "ids-action-menu__trigger"
                     });
                 }}
+                footer={footer}
             />
         </div>
     );

packages/ActionMenu/src/action-menu.scss

@@ -11,12 +11,11 @@
 }
 
 [data-brand="workleap"] {
-  --ids-action-menu-font-family:  var(--hop-body-sm-font-family);
+  --ids-action-menu-font-family: var(--hop-body-sm-font-family);
   --ids-action-menu-font-size: var(--hop-body-sm-font-size);
 }
 
 .ids-action-menu {
   font-family: var(--ids-action-menu-font-family);
   font-size: var(--ids-action-menu-font-size);
-}
-  
+}

packages/Alert/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @igloo-ui/alert
 
+## 0.6.5
+
+### Patch Changes
+
+- cfb5619: Updated hopper token versions and button versions.
+- Updated dependencies [cfb5619]
+- Updated dependencies [cfb5619]
+  - @igloo-ui/button@0.7.7
+  - @igloo-ui/icon-button@1.1.7
+
 ## 0.6.4
 
 ### Patch Changes

packages/Alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/alert",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "main": "dist/Alert.js",
   "module": "dist/Alert.js",
   "types": "dist/Alert.d.ts",
@@ -24,15 +24,15 @@
     "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@igloo-ui/button": "^0.7.4",
-    "@igloo-ui/icon-button": "^1.1.6",
+    "@igloo-ui/button": "^0.7.7",
+    "@igloo-ui/icon-button": "^1.1.7",
     "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/tokens": "^2.0.0",
     "@hopper-ui/tokens": "^3.1.3",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@igloo-ui/tooltip": "^3.4.3",
-    "@igloo-ui/hyperlink": "^0.3.3"
+    "@igloo-ui/tooltip": "^3.4.4",
+    "@igloo-ui/hyperlink": "^0.3.4"
   }
 }

packages/AreaChart/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @igloo-ui/area-chart
 
+## 1.1.1
+
+### Patch Changes
+
+- cfb5619: Updated hopper token versions and button versions.
+
 ## 1.1.0
 
 ### Minor Changes

packages/AreaChart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igloo-ui/area-chart",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/AreaChart.js",
   "module": "dist/AreaChart.js",
   "types": "dist/AreaChart.d.ts",

packages/Avatar/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @igloo-ui/avatar
 
+## 0.2.4
+
+### Patch Changes
+
+- cfb5619: Updated hopper token versions and button versions.
+
 ## 0.2.3
 
 ### Patch Changes