+
);
},
name: "Dropdown with groups"
diff --git a/packages/core/src/components/Dropdown/__tests__/Dropdown.interactions.js b/packages/core/src/components/Dropdown/__tests__/Dropdown.interactions.js
index abc079ae2e..395b71e4b1 100644
--- a/packages/core/src/components/Dropdown/__tests__/Dropdown.interactions.js
+++ b/packages/core/src/components/Dropdown/__tests__/Dropdown.interactions.js
@@ -10,7 +10,7 @@ import {
import { expect } from "@storybook/jest";
const selectAndClearTest = async canvas => {
- const dropdownElement = await getByRole(canvas, "textbox");
+ const dropdownElement = await getByRole(canvas, "combobox");
// Open the dropdown
await clickElement(dropdownElement);
// Filter it
@@ -26,7 +26,7 @@ const selectAndClearTest = async canvas => {
};
const hideDropdownWhenPressingEscape = async canvas => {
- const dropdownElement = await getByRole(canvas, "textbox");
+ const dropdownElement = await getByRole(canvas, "combobox");
// Open the dropdown
await clickElement(dropdownElement);
// Validate open dropdown
@@ -40,7 +40,7 @@ const hideDropdownWhenPressingEscape = async canvas => {
export const overviewPlaySuite = interactionSuite({
beforeEach: async canvas => {
- const dropdownElement = await getByRole(canvas, "textbox");
+ const dropdownElement = await getByRole(canvas, "combobox");
await userEvent.clear(dropdownElement);
expect(dropdownElement.value).toEqual("");
await typeText(dropdownElement, "{escape}");
diff --git a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
index d0196813f5..c89c69d1b8 100644
--- a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
+++ b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
@@ -6,21 +6,6 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
class="dropdown dropdown-story css-bbwnb8-container"
id="dropdown-menu-id"
>
-
-
-
-
-
- option Ocean focused, 1 of 6. 6 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
-
-
-
-
-
-
-
- 0 results available. Selected: is focused ,type to refine list, press Down to open the menu,
-
-
-
-
-
-
-
- 0 results available. Selected: is focused ,type to refine list, press Down to open the menu,
-
-
-
-
-
-
-
- option 1 focused, 1 of 10000. 10000 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
-
-
{
customSize={20}
/>
)}
- {data?.leftIcon && }
+ {data?.leftIcon && }
)}
diff --git a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss
index 3436ac5645..5cd0499439 100644
--- a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss
+++ b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss
@@ -4,7 +4,8 @@
align-items: center;
width: 100%;
- .avatar {
+ .avatar,
+ .icon {
flex-shrink: 0;
}
}
diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx
index a2df696094..cbd07c1355 100644
--- a/packages/core/src/components/Dropdown/components/option/option.jsx
+++ b/packages/core/src/components/Dropdown/components/option/option.jsx
@@ -1,11 +1,11 @@
import cx from "classnames";
-import React from "react";
+import React, { useEffect } from "react";
import { components } from "react-select";
import Tooltip from "../../../Tooltip/Tooltip";
import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
import styles from "./option.module.scss";
-const Option = ({ Renderer, data, children, optionWrapperClassName, ...props }) => {
+const Option = ({ Renderer, data, children, setFocusedOptionId, optionWrapperClassName, ...props }) => {
const tooltipProps = data?.tooltipProps || {};
const rendererProps = {
children,
@@ -18,6 +18,12 @@ const Option = ({ Renderer, data, children, optionWrapperClassName, ...props })
}
};
+ useEffect(() => {
+ if (props.isFocused) {
+ setFocusedOptionId(props.innerProps.id);
+ }
+ }, [props.isFocused, props.innerProps.id, setFocusedOptionId]);
+
return (
{Renderer ? (
diff --git a/packages/core/src/components/Icon/Icons/components/CloseMedium.tsx b/packages/core/src/components/Icon/Icons/components/CloseMedium.tsx
new file mode 100644
index 0000000000..19694f7aad
--- /dev/null
+++ b/packages/core/src/components/Icon/Icons/components/CloseMedium.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable */
+/* tslint:disable */
+import * as React from "react";
+export interface CloseMediumProps extends React.SVGAttributes {
+ size?: string | number;
+}
+const CloseMedium: React.FC = ({ size, ...props }) => (
+
+);
+CloseMedium.displayName = "CloseMedium";
+export default CloseMedium;
+/* tslint:enable */
+/* eslint-enable */
diff --git a/packages/core/src/components/Icon/Icons/components/ReplyAll.tsx b/packages/core/src/components/Icon/Icons/components/ReplyAll.tsx
new file mode 100644
index 0000000000..c9fa0ba486
--- /dev/null
+++ b/packages/core/src/components/Icon/Icons/components/ReplyAll.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable */
+/* tslint:disable */
+import * as React from 'react';
+export interface ReplyAllProps extends React.SVGAttributes {
+size?: string | number;
+}
+const ReplyAll: React.FC = ({size, ...props}) => (
+
+);
+ReplyAll.displayName = 'ReplyAll';
+export default ReplyAll;
+/* tslint:enable */
+/* eslint-enable */
diff --git a/packages/core/src/components/Icon/Icons/index.ts b/packages/core/src/components/Icon/Icons/index.ts
index d0a29f54c5..8811ace3c3 100644
--- a/packages/core/src/components/Icon/Icons/index.ts
+++ b/packages/core/src/components/Icon/Icons/index.ts
@@ -37,6 +37,7 @@ export {default as Checkbox} from './components/Checkbox';
export {default as CheckList} from './components/CheckList';
export {default as Clear} from './components/Clear';
export {default as Close} from './components/Close';
+export {default as CloseMedium} from './components/CloseMedium';
export {default as CloseRound} from './components/CloseRound';
export {default as CloseSmall} from './components/CloseSmall';
export {default as Code} from './components/Code';
@@ -188,6 +189,7 @@ export {default as RecycleBin} from './components/RecycleBin';
export {default as Redo} from './components/Redo';
export {default as Remove} from './components/Remove';
export {default as Replay} from './components/Replay';
+export {default as ReplyAll} from './components/ReplyAll';
export {default as Retry} from './components/Retry';
export {default as Robot} from './components/Robot';
export {default as Rotate} from './components/Rotate';
diff --git a/packages/core/src/components/IconButton/IconButton.tsx b/packages/core/src/components/IconButton/IconButton.tsx
index a9c07771fa..c0a9087d1e 100644
--- a/packages/core/src/components/IconButton/IconButton.tsx
+++ b/packages/core/src/components/IconButton/IconButton.tsx
@@ -61,6 +61,10 @@ export interface IconButtonProps extends VibeComponentProps {
* a11y property to be added, 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"];
/**
* Size of the icon
*/
@@ -126,6 +130,7 @@ const IconButton: VibeComponent & {
ariaControls,
"aria-describedby": ariaDescribedBy,
"aria-hidden": ariaHidden,
+ "aria-pressed": ariaPressed,
hideTooltip = false,
kind = IconButton.kinds.TERTIARY,
active,
@@ -214,6 +219,7 @@ const IconButton: VibeComponent & {
ariaControls={ariaControls}
aria-describedby={ariaDescribedBy}
aria-hidden={ariaHidden}
+ aria-pressed={ariaPressed}
ref={mergedRef}
id={id}
data-testid={overrideDataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}
diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
index bc5fc71b63..6558ac0c1c 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.mdx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
import Table from "../Table";
import TableHeader from "../../TableHeader/TableHeader";
import TableHeaderCell from "../../TableHeaderCell/TableHeaderCell";
@@ -50,7 +50,7 @@ Tables are used to organize data, making it easier to understand.
### Sizes
-The table is available in 2 different row heights: medium (40px) and large (48 px). Medium size is the default size.
+The table is available in 3 different row heights: small (32px) medium (40px) and large (48 px). Medium size is the default size.
diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
index 04f70daa53..1fc932e2cd 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
@@ -43,7 +43,14 @@ export default {
TableVirtualizedBody
},
argTypes: metaSettings.argTypes,
- decorators: metaSettings.decorators
+ decorators: metaSettings.decorators,
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { TableAvatar, TableErrorState, TableEmptyState }
+ }
+ }
+ }
};
const tableTemplate = (args: ITableProps) =>