Skip to content

Commit eec9138

Browse files
anuradha9712anuradha9712
authored
Merge pull request #2648 from anuradha9712/chore-rebase-with-develop
chore: rebase with develop branch
2 parents 992b3ad + 2a64e2d commit eec9138

File tree

48 files changed

+3174
-1326
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3174
-1326
lines changed

‎CHANGELOG.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,49 @@
1+
## 4.12.0 (2025-08-14)
2+
3+
### Highlights
4+
5+
- feat(table): add custom header cell renderer with sorting state support (9fb78957)
6+
- feat(verticalNav): add support for custom option renderer in vertical nav (fcbcb87f)
7+
- feat(select): add inline label support for small size select trigger (9f476ce7)
8+
- feat(table): add support for custom label in table header (404b440b)
9+
- feat(link): add story for icon support in link component (01d658b2)
10+
11+
### Breaking changes
12+
13+
NA
14+
15+
### Migration guide
16+
17+
NA
18+
19+
### Deprecations
20+
21+
NA
22+
23+
### Features
24+
25+
- feat(table): add custom header cell renderer with sorting state support (9fb78957)
26+
- feat(verticalNav): add support for custom option renderer in vertical nav (fcbcb87f)
27+
- feat(select): add inline label support for small size select trigger (9f476ce7)
28+
- feat(table): add support for custom label in table header (404b440b)
29+
- feat(link): add story for icon support in link component (01d658b2)
30+
31+
### Fixes
32+
33+
- fix(table): fix extra api call on sorting in infinite scroll (00f3a26b)
34+
- fix(table): fix visibility of background cell for pinned columns (29d91d9b)
35+
- fix(table): update spacing of checkbox for loading state (45109d69)
36+
37+
### Improvements
38+
39+
NA
40+
41+
### Documentation
42+
43+
- docs(icon): update appearance section for the Icon component (d9c04fa6)
44+
45+
---
46+
147
## 4.11.2 (2025-07-28)
248

349
### Highlights

‎core/components/atoms/button/Button.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
150150
});
151151

152152
const spinnerSize = size === 'large' && children ? 'small' : 'xsmall';
153+
const iconSize = size === 'tiny' ? 14 : largeIcon && !children ? sizeMapping[size] + 4 : sizeMapping[size];
153154

154155
return (
155156
<button
@@ -175,12 +176,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
175176
<>
176177
{icon && (
177178
<div className={iconClass} data-test="DesignSystem-Button--Icon-Wrapper">
178-
<Icon
179-
data-test="DesignSystem-Button--Icon"
180-
name={icon}
181-
type={iconType}
182-
size={largeIcon && !children ? sizeMapping[size] + 4 : sizeMapping[size]}
183-
/>
179+
<Icon data-test="DesignSystem-Button--Icon" name={icon} type={iconType} size={iconSize} />
184180
</div>
185181
)}
186182
{children && <span className={styles['Button-text']}>{children}</span>}

‎core/components/atoms/button/__tests__/Button.test.tsx‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -185,29 +185,59 @@ describe('Button component with icon', () => {
185185
expect(getByTestId('DesignSystem-Button--Icon').textContent).toMatch('events');
186186
});
187187

188-
sizes.forEach((s = 'regular') => {
189-
it(`renders icon of fontSize = ${sizeMapping[s]} for button size = ${s}`, () => {
190-
const { getByTestId } = render(
191-
<Button icon="events" size={s}>
192-
Button
193-
</Button>
194-
);
195-
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s]}px`);
188+
sizes
189+
.filter((s) => s !== 'tiny')
190+
.forEach((s = 'regular') => {
191+
it(`renders icon of fontSize = ${sizeMapping[s]} for button size = ${s}`, () => {
192+
const { getByTestId } = render(
193+
<Button icon="events" size={s}>
194+
Button
195+
</Button>
196+
);
197+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s]}px`);
198+
});
199+
200+
it(`renders large icon inside button size = ${s}`, () => {
201+
const { getByTestId } = render(<Button icon="events" size={s} largeIcon={true} />);
202+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s] + 4}px`);
203+
});
204+
205+
it('does not render large icon when button has label', () => {
206+
const { getByTestId } = render(
207+
<Button icon="events" size={s} largeIcon={true}>
208+
Button
209+
</Button>
210+
);
211+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s]}px`);
212+
});
196213
});
197214

198-
it(`renders large icon inside button size = ${s}`, () => {
199-
const { getByTestId } = render(<Button icon="events" size={s} largeIcon={true} />);
200-
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s] + 4}px`);
201-
});
215+
it('renders icon of fontSize = 14px for button size = tiny (custom size)', () => {
216+
const { getByTestId } = render(
217+
<Button icon="events" size="tiny">
218+
Button
219+
</Button>
220+
);
221+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle('fontSize: 14px');
222+
});
202223

203-
it('does not render large icon when button has label', () => {
204-
const { getByTestId } = render(
205-
<Button icon="events" size={s} largeIcon={true}>
206-
Button
207-
</Button>
208-
);
209-
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle(`fontSize: ${sizeMapping[s]}px`);
210-
});
224+
it('renders icon of fontSize = 14px for tiny icon-only button (overrides sizeMapping)', () => {
225+
const { getByTestId } = render(<Button icon="events" size="tiny" />);
226+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle('fontSize: 14px');
227+
});
228+
229+
it('renders icon of fontSize = 14px for tiny button with largeIcon=true and no children (overrides largeIcon logic)', () => {
230+
const { getByTestId } = render(<Button icon="events" size="tiny" largeIcon={true} />);
231+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle('fontSize: 14px');
232+
});
233+
234+
it('renders icon of fontSize = 14px for tiny button with largeIcon=true and children (overrides both largeIcon and sizeMapping)', () => {
235+
const { getByTestId } = render(
236+
<Button icon="events" size="tiny" largeIcon={true}>
237+
Button
238+
</Button>
239+
);
240+
expect(getByTestId('DesignSystem-Button--Icon')).toHaveStyle('fontSize: 14px');
211241
});
212242

213243
describe('Button with spinner', () => {

‎core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -748,7 +748,7 @@ exports[`Button component
748748
class="material-symbols material-symbols-rounded Icon"
749749
data-test="DesignSystem-Button--Icon"
750750
role="button"
751-
style="font-size: 12px; width: 12px;"
751+
style="font-size: 14px; width: 14px;"
752752
>
753753
events
754754
</i>
@@ -781,7 +781,7 @@ exports[`Button component
781781
class="material-symbols material-symbols-rounded Icon"
782782
data-test="DesignSystem-Button--Icon"
783783
role="button"
784-
style="font-size: 12px; width: 12px;"
784+
style="font-size: 14px; width: 14px;"
785785
>
786786
events
787787
</i>
@@ -814,7 +814,7 @@ exports[`Button component
814814
class="material-symbols material-symbols-rounded Icon"
815815
data-test="DesignSystem-Button--Icon"
816816
role="button"
817-
style="font-size: 12px; width: 12px;"
817+
style="font-size: 14px; width: 14px;"
818818
>
819819
events
820820
</i>

‎core/components/atoms/label/Label.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Text, Icon, Tooltip } from '@/index';
55
import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
66
import styles from '@css/components/label.module.css';
77

8+
type LabelSize = 'small' | 'regular';
9+
810
export type LabelProps = {
911
/**
1012
* Text to be rendered
@@ -31,14 +33,18 @@ export type LabelProps = {
3133
* Text to show inside tooltip when hover on **info** icon
3234
*/
3335
info?: string;
36+
/**
37+
* Size of `Label`
38+
*/
39+
size?: LabelSize;
3440
} & BaseProps &
3541
BaseHtmlProps<HTMLLabelElement>;
3642

3743
/**
3844
* *NOTE: Extends props with HTMLProps<HTMLLabelElement>*
3945
*/
4046
export const Label = (props: LabelProps) => {
41-
const { required, optional, withInput, disabled, children, className, info, ...rest } = props;
47+
const { required, optional, withInput, disabled, children, className, info, size = 'regular', ...rest } = props;
4248

4349
const baseProps = extractBaseProps(props);
4450

@@ -54,6 +60,12 @@ export const Label = (props: LabelProps) => {
5460
const classes = classNames({
5561
[styles['Label-text']]: true,
5662
[styles['Label--disabled']]: disabled,
63+
[styles['Label--small']]: size && size === 'small',
64+
});
65+
66+
const OptionalClasses = classNames({
67+
[styles['Label-optionalText']]: true,
68+
[styles['Label-optionalText--small']]: size && size === 'small',
5769
});
5870

5971
const renderInfo = (isRequired = false, isOptional?: boolean) => {
@@ -63,7 +75,7 @@ export const Label = (props: LabelProps) => {
6375

6476
if (isOptional) {
6577
return (
66-
<Text data-test="DesignSystem-Label--OptionalText" appearance="subtle" className={styles['Label-optionalText']}>
78+
<Text data-test="DesignSystem-Label--OptionalText" appearance="subtle" className={OptionalClasses}>
6779
(optional)
6880
</Text>
6981
);

‎core/components/atoms/label/__stories__/Size.story.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import { Label } from '@/index';
3+
4+
// CSF format story
5+
export const Size = () => (
6+
<div className="d-flex w-50 align-items-center justify-content-between">
7+
<Label>Regular Label</Label>
8+
<Label size="small">Small Label</Label>
9+
</div>
10+
);
11+
12+
export default {
13+
title: 'Components/Label/Size',
14+
component: Label,
15+
parameters: {
16+
docs: {
17+
docPage: {
18+
title: 'Label',
19+
},
20+
},
21+
},
22+
};

0 commit comments

Comments
 (0)