Skip to content

Commit 59720c2

Browse files
maradwan26maradwan26
authored
feat(menu-button): new xs size (#20573)
* feat(menu-button): new `xs` size * chore: update dates * test: add and cleanup snapshots * chore: fromat
1 parent 85e1ab4 commit 59720c2

File tree

8 files changed

+138
-113
lines changed

8 files changed

+138
-113
lines changed

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6314,6 +6314,7 @@ Map {
63146314
"size": {
63156315
"args": [
63166316
[
6317+
"xs",
63176318
"sm",
63186319
"md",
63196320
"lg",

‎packages/react/src/components/MenuButton/MenuButton-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2023
2+
* Copyright IBM Corp. 2023, 2025
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -66,7 +66,7 @@ describe('MenuButton', () => {
6666

6767
describe('supports props.size', () => {
6868
// Button component doesn't apply any size class for `lg`
69-
const sizes = ['sm', 'md'];
69+
const sizes = ['xs', 'sm', 'md'];
7070

7171
sizes.forEach((size) => {
7272
it(`size="${size}"`, () => {

‎packages/react/src/components/MenuButton/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
7575
/**
7676
* Specify the size of the button and menu.
7777
*/
78-
size?: 'sm' | 'md' | 'lg';
78+
size?: 'xs' | 'sm' | 'md' | 'lg';
7979

8080
/**
8181
* Specify the tabIndex of the button.
@@ -282,7 +282,7 @@ MenuButton.propTypes = {
282282
*/
283283
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
284284
// @ts-ignore-next-line -- avoid spurious (?) TS2322 error
285-
size: PropTypes.oneOf(['sm', 'md', 'lg']),
285+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
286286

287287
/**
288288
* Specify the tabIndex of the button.

‎packages/web-components/src/components/menu-button/__tests__/__snapshots__/menu-button-test.snap.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,87 @@ snapshots['cds-menu-button should render and match snapshot'] =
3737
</cds-menu-button>
3838
`;
3939
/* end snapshot cds-menu-button should render and match snapshot */
40+
41+
snapshots[
42+
'cds-menu-button Children/slots and special menu content Snapshot variants should render with divider and danger and match snapshot'
43+
] = `<cds-menu-button
44+
kind="primary"
45+
label="Test"
46+
menu-alignment="bottom"
47+
size="lg"
48+
tab-index="0"
49+
>
50+
<cds-menu
51+
size="lg"
52+
style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
53+
>
54+
<cds-menu-item
55+
label="First action"
56+
role="menuitem"
57+
tabindex="0"
58+
>
59+
</cds-menu-item>
60+
<cds-menu-item-divider role="separator">
61+
</cds-menu-item-divider>
62+
<cds-menu-item
63+
class="cds--menu-item--danger"
64+
kind="danger"
65+
label="Danger"
66+
role="menuitem"
67+
tabindex="0"
68+
>
69+
</cds-menu-item>
70+
</cds-menu>
71+
</cds-menu-button>
72+
`;
73+
/* end snapshot cds-menu-button Children/slots and special menu content Snapshot variants should render with divider and danger and match snapshot */
74+
75+
snapshots[
76+
'cds-menu-button Children/slots and special menu content Snapshot variants should render with nested menu and match snapshot'
77+
] = `<cds-menu-button
78+
kind="primary"
79+
label="Nested"
80+
menu-alignment="bottom"
81+
size="lg"
82+
tab-index="0"
83+
>
84+
<cds-menu
85+
size="lg"
86+
style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
87+
>
88+
<cds-menu-item
89+
aria-expanded="true"
90+
aria-haspopup="true"
91+
label="Export as"
92+
role="menuitem"
93+
tabindex="0"
94+
>
95+
<cds-menu-item-group slot="submenu">
96+
<cds-menu-item
97+
label="PDF"
98+
role="menuitem"
99+
tabindex="0"
100+
>
101+
</cds-menu-item>
102+
</cds-menu-item-group>
103+
</cds-menu-item>
104+
</cds-menu>
105+
</cds-menu-button>
106+
`;
107+
/* end snapshot cds-menu-button Children/slots and special menu content Snapshot variants should render with nested menu and match snapshot */
108+
109+
snapshots['cds-menu-button should support xs size'] = `<cds-button
110+
has-main-content=""
111+
kind="primary"
112+
size="xs"
113+
tab-index="0"
114+
tooltip-alignment=""
115+
tooltip-position="top"
116+
type="button"
117+
>
118+
Actions
119+
</cds-button>
120+
<slot>
121+
</slot>
122+
`;
123+
/* end snapshot cds-menu-button should support xs size */

‎packages/web-components/src/components/menu-button/__tests__/__snapshots__/menu-button.test.snap.js‎

Lines changed: 0 additions & 107 deletions
This file was deleted.

‎packages/web-components/src/components/menu-button/__tests__/menu-button-test.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,47 @@ describe('cds-menu-button', function () {
2424
await expect(el).dom.to.equalSnapshot();
2525
});
2626

27+
it('Children/slots and special menu content Snapshot variants should render with divider and danger and match snapshot', async () => {
28+
const el = await fixture(html`
29+
<cds-menu-button label="Test">
30+
<cds-menu>
31+
<cds-menu-item label="First action"></cds-menu-item>
32+
<cds-menu-item-divider></cds-menu-item-divider>
33+
<cds-menu-item label="Danger" kind="danger"></cds-menu-item>
34+
</cds-menu>
35+
</cds-menu-button>
36+
`);
37+
await expect(el).dom.to.equalSnapshot();
38+
});
39+
40+
it('Children/slots and special menu content Snapshot variants should render with nested menu and match snapshot', async () => {
41+
const el = await fixture(html`
42+
<cds-menu-button label="Nested">
43+
<cds-menu>
44+
<cds-menu-item label="Export as">
45+
<cds-menu-item-group slot="submenu">
46+
<cds-menu-item label="PDF"></cds-menu-item>
47+
</cds-menu-item-group>
48+
</cds-menu-item>
49+
</cds-menu>
50+
</cds-menu-button>
51+
`);
52+
await expect(el).dom.to.equalSnapshot();
53+
});
54+
55+
it('should support xs size', async () => {
56+
const el = await fixture(html`
57+
<cds-menu-button label="Actions" size="xs">
58+
<cds-menu size="xs">
59+
<cds-menu-item label="First action"></cds-menu-item>
60+
<cds-menu-item label="Second action"></cds-menu-item>
61+
<cds-menu-item label="Third action" disabled></cds-menu-item>
62+
</cds-menu>
63+
</cds-menu-button>
64+
`);
65+
await expect(el).shadowDom.to.equalSnapshot();
66+
});
67+
2768
it('should be accessible (closed & open)', async () => {
2869
const el = await fixture(menuButton);
2970
await expect(el).to.be.accessible();
@@ -62,7 +103,7 @@ describe('cds-menu-button', function () {
62103
});
63104

64105
describe('renders as expected – Component API', () => {
65-
const sizes = ['sm', 'md', 'lg'];
106+
const sizes = ['xs', 'sm', 'md', 'lg'];
66107
const kinds = ['primary', 'tertiary', 'ghost'];
67108

68109
sizes.forEach((size) => {

‎packages/web-components/src/components/menu-button/defs.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
* Menu button size.
1010
*/
1111
export enum MENU_BUTTON_SIZE {
12+
/**
13+
* Extra Small size
14+
*/
15+
EXTRA_SMALL = 'xs',
16+
1217
/**
1318
* Small size.
1419
*/

‎packages/web-components/src/components/menu-button/menu-button.stories.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,11 @@ const argTypes = {
4848
size: {
4949
control: 'radio',
5050
description: `Specify the size of the button and menu.
51+
'xs'
5152
'sm'
5253
'md'
5354
'lg'`,
54-
options: ['sm', 'md', 'lg'],
55+
options: ['xs', 'sm', 'md', 'lg'],
5556
},
5657
tabIndex: {
5758
control: 'number',

0 commit comments

Comments
 (0)