Merge branch 'refs/heads/master' into feat/yossi/new-modal-building-b…

…locks-7359960492
mondaycom · Sep 12, 2024 · dc9d8e1 · dc9d8e1
2 parents 5ff264f + 99938ea
commit dc9d8e1
Show file tree

Hide file tree

Showing 27 changed files with 437 additions and 114 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.133.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.133.0) (2024-09-11)
+
+
+### Features
+
+* add aria-pressed prop to IconButton ([#2428](https://github.com/mondaycom/vibe/issues/2428)) ([4587c6e](https://github.com/mondaycom/vibe/commit/4587c6e2270d9bd688e52256dda0611cf1731fd8))
+
+
+
+
+
+# [2.132.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.132.0) (2024-09-09)
+
+
+### Bug Fixes
+
+* **Dropdown:** left icon shrinking with long text ([#2416](https://github.com/mondaycom/vibe/issues/2416)) ([dab052d](https://github.com/mondaycom/vibe/commit/dab052de53e849d284fd13b0d523ae04b2faed93))
+* **Toast:** make type style stronger ([#2408](https://github.com/mondaycom/vibe/issues/2408)) ([7faf565](https://github.com/mondaycom/vibe/commit/7faf5654c1da2e6f2b7051c76df85f72811ca785))
+
+
+### Features
+
+* **Dropdown:** Add A11y props to dropdown ([#2407](https://github.com/mondaycom/vibe/issues/2407)) ([d53d2e2](https://github.com/mondaycom/vibe/commit/d53d2e2f04b067080999f4924bedf358faf03d05))
+* **Dropdown:** add option for divider in dropdown ([#2422](https://github.com/mondaycom/vibe/issues/2422)) ([f5d1e5a](https://github.com/mondaycom/vibe/commit/f5d1e5a802104db4b4e5baae38d06f43ba125eac))
+* **Icon:** add reply all icon ([#2418](https://github.com/mondaycom/vibe/issues/2418)) ([031f65d](https://github.com/mondaycom/vibe/commit/031f65d500098c0f34ede3316503aa3fceea0123))
+
+
+
+
+
 ## [2.131.2](https://github.com/mondaycom/vibe/compare/[email protected]@2.131.2) (2024-08-28)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.131.2",
+  "version": "2.133.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -108,7 +108,7 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.11.1",
+    "monday-ui-style": "0.12.0",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
     "react-inlinesvg": "^3.0.1",
@@ -120,7 +120,7 @@
     "react-window": "^1.8.7",
     "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
-    "vibe-storybook-components": "0.19.2"
+    "vibe-storybook-components": "0.19.3"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

diff --git a/...Banner/__stories__/AlertBanner.stories.js → ...anner/__stories__/AlertBanner.stories.tsx b/...Banner/__stories__/AlertBanner.stories.js → ...anner/__stories__/AlertBanner.stories.tsx
@@ -1,21 +1,22 @@
 import React from "react";
-import AlertBanner from "../AlertBanner";
+import AlertBanner, { AlertBannerProps } from "../AlertBanner";
 import AlertBannerText from "../AlertBannerText/AlertBannerText";
 import AlertBannerLink from "../AlertBannerLink/AlertBannerLink";
 import AlertBannerButton from "../AlertBannerButton/AlertBannerButton";
 import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/createStoryMetaSettingsDecorator";
 import "./AlertBanner.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: AlertBanner,
   enumPropNamesArray: ["backgroundColor"]
 });
 
-const alertBannerTemplate = args => {
+const alertBannerTemplate = (args: AlertBannerProps) => {
   return (
     <AlertBanner {...args}>
-      <AlertBannerText text={args.bannerText} />
-      <AlertBannerLink text={args.linkText} href="https://monday.com" />
+      <AlertBannerText text="Alert banner message" />
+      <AlertBannerLink text="this is a CTA" href="https://monday.com" />
     </AlertBanner>
   );
 };
@@ -25,7 +26,7 @@ export default {
   component: AlertBanner,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof AlertBanner>;
 
 export const Overview = {
   render: alertBannerTemplate.bind({}),
@@ -38,7 +39,9 @@ export const Overview = {
   }
 };
 
-export const Types = {
+type Story = StoryObj<typeof AlertBanner>;
+
+export const Types: Story = {
   render: () => (
     <div className="monday-storybook-alert-banner_column-wrapper monday-storybook-alert-banner_big-container">
       <AlertBanner>
@@ -67,7 +70,7 @@ export const Types = {
   name: "Types"
 };
 
-export const AlertBannerWithButton = {
+export const AlertBannerWithButton: Story = {
   render: () => (
     <AlertBanner className="monday-storybook-alert-banner_big-container">
       <AlertBannerText text="Lorem ipsum dolor sit amet" />
@@ -78,7 +81,7 @@ export const AlertBannerWithButton = {
   name: "Alert Banner with button"
 };
 
-export const AlertBannerWithLink = {
+export const AlertBannerWithLink: Story = {
   render: () => (
     <AlertBanner className="monday-storybook-alert-banner_big-container">
       <AlertBannerText text="Alert banner message" />
@@ -89,7 +92,7 @@ export const AlertBannerWithLink = {
   name: "Alert Banner with link"
 };
 
-export const AlertBannerAsAnAnnouncement = {
+export const AlertBannerAsAnAnnouncement: Story = {
   render: () => (
     <AlertBanner
       backgroundColor={AlertBanner.backgroundColors.DARK}
@@ -103,7 +106,7 @@ export const AlertBannerAsAnAnnouncement = {
   name: "Alert banner as an announcement"
 };
 
-export const AlertBannerAsAnOpportunityToUpgrade = {
+export const AlertBannerAsAnOpportunityToUpgrade: Story = {
   render: () => (
     <AlertBanner className="monday-storybook-alert-banner_big-container">
       <AlertBannerText text="7 days left on your monday CRM trial" />
@@ -114,7 +117,7 @@ export const AlertBannerAsAnOpportunityToUpgrade = {
   name: "Alert banner as an opportunity to upgrade"
 };
 
-export const OverflowText = {
+export const OverflowText: Story = {
   render: () => (
     <AlertBanner className="monday-storybook-alert-banner_small-container">
       <AlertBannerText text="This is a really long alert..." />

diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx
@@ -77,6 +77,10 @@ export interface ButtonProps extends VibeComponentProps {
    * aria to be used for screen reader to know if the button is hidden
    */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
+  /**
+   * Indicates the current "pressed" state of toggle buttons
+   */
+  "aria-pressed"?: AriaAttributes["aria-pressed"];
   /** On Button Focus callback */
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   /** On Button Blur callback */
@@ -144,6 +148,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       ariaControls,
       "aria-describedby": ariaDescribedBy,
       "aria-hidden": ariaHidden,
+      "aria-pressed": ariaPressed,
       blurOnMouseUp,
       dataTestId: backwardCompatabilityDataTestId,
       "data-testid": dataTestId,
@@ -269,7 +274,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
         "aria-describedby": ariaDescribedBy,
-        "aria-hidden": ariaHidden
+        "aria-hidden": ariaHidden,
+        "aria-pressed": ariaPressed
       };
       return props;
     }, [
@@ -294,7 +300,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       ariaExpanded,
       ariaControls,
       ariaDescribedBy,
-      ariaHidden
+      ariaHidden,
+      ariaPressed
     ]);
 
     const leftIconSize = useMemo(() => {

diff --git a/packages/core/src/components/Dropdown/Dropdown.styles.js b/packages/core/src/components/Dropdown/Dropdown.styles.js
@@ -358,15 +358,31 @@ const indicatorSeparator = () => () => ({
   display: "none"
 });
 
-const group = () => () => ({
-  paddingBottom: 0,
-  marginTop: "4px"
-});
+const group =
+  ({ withGroupDivider }) =>
+  () => ({
+    paddingBottom: 0,
+    marginTop: "4px",
+    ...(withGroupDivider && {
+      ":not(:last-child)": {
+        position: "relative",
+        paddingBottom: "8px",
+        "::after": {
+          content: '""',
+          position: "absolute",
+          bottom: "0",
+          left: "var(--spacing-small)",
+          width: "calc(100% - (var(--spacing-small) * 2))",
+          height: "1px",
+          backgroundColor: "var(--layout-border-color)"
+        }
+      }
+    })
+  });
 
 const groupHeading = () => () => ({
-  height: "32px",
   fontSize: "14px",
-  lineHeight: "22px",
+  lineHeight: "32px",
   display: "flex",
   alignItems: "center",
   marginLeft: getCSSVar("spacing-medium"),

diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -5,6 +5,7 @@ import { SIZES, SIZES_VALUES } from "../../constants";
 import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import Select, { InputProps, components, createFilter, ActionMeta } from "react-select";
 import AsyncSelect from "react-select/async";
+import BaseSelect from "react-select/base";
 import { noop as NOOP } from "lodash-es";
 import { WindowedMenuList } from "react-windowed-select";
 import MenuComponent from "./components/menu/menu";
@@ -110,7 +111,8 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
       popupsContainerSelector,
       filterOption,
       menuPosition = Dropdown.menuPositions.ABSOLUTE,
-      "data-testid": dataTestId
+      "data-testid": dataTestId,
+      withGroupDivider = false
     }: DropdownComponentProps,
     ref: React.ForwardedRef<HTMLElement>
   ) => {
@@ -127,7 +129,12 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
       return defaultValue;
     }, [defaultValue]);
 
+    BaseSelect.prototype.renderLiveRegion = () => {
+      return null;
+    };
+
     const [selected, setSelected] = useState(overrideDefaultValue || []);
+    const [focusedOptionId, setFocusedOptionId] = useState("");
     const finalOptionRenderer = optionRenderer || OptionRenderer;
     const finalValueRenderer = valueRenderer || ValueRenderer;
     const isControlled = !!customValue;
@@ -156,7 +163,8 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         rtl,
         insideOverflowContainer,
         controlRef,
-        insideOverflowWithTransformContainer
+        insideOverflowWithTransformContainer,
+        withGroupDivider
       });
 
       type BaseStyles = typeof baseStyles;
@@ -220,14 +228,32 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
 
     const Option = useCallback(
       (props: CustomOptionProps) => (
-        <OptionComponent {...props} Renderer={finalOptionRenderer} optionWrapperClassName={optionWrapperClassName} />
+        <OptionComponent
+          setFocusedOptionId={setFocusedOptionId}
+          {...props}
+          Renderer={finalOptionRenderer}
+          optionWrapperClassName={optionWrapperClassName}
+        />
       ),
-      [finalOptionRenderer, optionWrapperClassName]
+      [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]
     );
 
     const Input = useCallback(
-      (props: InputProps) => <components.Input {...props} aria-label="Dropdown input" aria-controls={menuId} />,
-      [menuId]
+      (props: InputProps | any) => {
+        const { focusedOptionId, menuIsOpen } = props.selectProps;
+        const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : "";
+        return (
+          <components.Input
+            {...props}
+            aria-activedescendant={ariaActiveDescendant}
+            role="combobox"
+            aria-expanded={!readOnly && menuIsOpen}
+            aria-label="Dropdown input"
+            aria-controls={menuId}
+          />
+        );
+      },
+      [menuId, readOnly]
     );
 
     const SingleValue = useCallback(
@@ -380,10 +406,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         aria-readonly={readOnly}
         aria-label={overrideAriaLabel}
         aria-details={tooltipContent}
-        aria-expanded={!readOnly && menuIsOpen}
         aria-haspopup="listbox"
-        aria-activedescendant
-        role="combobox"
         defaultValue={defaultValue}
         value={value}
         onMenuOpen={onMenuOpen}
@@ -395,6 +418,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         onInputChange={onInputChange}
         openMenuOnFocus={openMenuOnFocus}
         openMenuOnClick={openMenuOnClick}
+        focusedOptionId={focusedOptionId}
         isRtl={rtl}
         styles={inlineStyles}
         theme={customTheme}

diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts
@@ -271,6 +271,7 @@ export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptio
   onClear?: () => void;
   popupsContainerSelector?: string;
   selectProps?: Record<string, string>;
+  withGroupDivider?: boolean;
 }
 
 export type DropdownProps = DropdownComponentProps;
diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
@@ -163,6 +163,8 @@ A classic dropdown presents options a user needs to choose from.
 
 ### Dropdown with groups
 
+Dropdown menu can be organized into groups. It can be either by group title or divider.
+
 <Canvas of={DropdownStories.DropdownWithGroups} />
 
 ### Dropdown inside popover