Skip to content

Commit 6e58a23

Browse files
Vita-MeowVita-Meow
authored
fix: upgrade fd-styles to latest and fix components due to broken changes from fd-styles (#1471)
* fix: allow lock focus for specific list in dialog * fix: fix lint * fix: optimize naming and description * fix: optimize check box * fix: optimize check box * fix: update storyshot * fix: fix ut similate behavior like checked in browser * fix: fix ut similate behavior like checked in browser * fix: type definition * fix: linting * fix: upgrade fd-styles * fix: fd-style upgrade * fix: poper and calendar styles * fix: busyIndicator and pagination styles * fix: shell bar styles * fix: indicator UT * fix: popper * fix: ut
1 parent 4b0b28f commit 6e58a23

File tree

71 files changed

+270
-136
lines changed

Some content is hidden

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

71 files changed

+270
-136
lines changed

‎.storybook/preview-head.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,5 @@
2929
font-style: normal;
3030
}
3131
</style>
32+
<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css"></link>
33+
<link rel="stylesheet" type="text/css" href="./theming/sap_fiori_3.css"></link>

‎package-lock.json‎

Lines changed: 37 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"size": "npm run build && size-limit",
3333
"size:debug": "npm run build && size-limit --why",
3434
"start": "npm run storybook",
35-
"storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming --no-dll",
35+
"storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming,node_modules/fundamental-styles/dist/ --no-dll",
3636
"storybook:ci": "npm run storybook -- --ci --quiet",
3737
"storybook:static": "rimraf storybook-static && npm run build:storybook && STORYBOOK_ENV=docs build-storybook -c .storybook -o storybook-static -s .storybook/static/,node_modules/@sap-theming --docs --no-dll",
3838
"test:coverage:watch": "npm run test:coverage -- --watch",
@@ -51,7 +51,7 @@
5151
"@popperjs/core": "^2.5.4",
5252
"chain-function": "^1.0.1",
5353
"classnames": "^2.3.1",
54-
"fundamental-styles": "0.19.0",
54+
"fundamental-styles": "^0.26.5",
5555
"hoist-non-react-statics": "^3.3.2",
5656
"keycode": "^2.2.0",
5757
"moment": "^2.29.2",

‎src/BusyIndicator/BusyIndicator.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const BusyIndicator = React.forwardRef(({
2020

2121
const busyIndicatorClasses = classnames(
2222
{
23-
[`${cssNamespace}-busy-indicator--${size}`]: size === 'm' || size === 'l',
23+
[`${cssNamespace}-busy-indicator ${cssNamespace}-busy-indicator--${size}`]: size === 'm' || size === 'l',
2424
[`${cssNamespace}-busy-indicator`]: size === 's'
2525
},
2626
className
@@ -36,9 +36,9 @@ const BusyIndicator = React.forwardRef(({
3636
aria-label={localizedText.loading}
3737
className={busyIndicatorClasses}
3838
ref={ref} >
39-
<div className={classnames(`${cssNamespace}-busy-indicator--circle-0`)} />
40-
<div className={classnames(`${cssNamespace}-busy-indicator--circle-1`)} />
41-
<div className={classnames(`${cssNamespace}-busy-indicator--circle-2`)} />
39+
<div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
40+
<div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
41+
<div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
4242
</div>
4343
);
4444
});

‎src/BusyIndicator/BusyIndicator.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ describe('<BusyIndicator />', () => {
2323
}
2424
mount(<Test />);
2525
expect(ref.current.tagName).toEqual('DIV');
26-
expect(ref.current.className).toEqual('fd-busy-indicator--m');
26+
expect(ref.current.className).toEqual('fd-busy-indicator fd-busy-indicator--m');
2727
});
2828
});

‎src/BusyIndicator/__stories__/__snapshots__/BusyIndicator.stories.storyshot‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ exports[`Storyshots Component API/BusyIndicator Dev 1`] = `
44
<div
55
aria-hidden="false"
66
aria-label="Loading"
7-
className="fd-busy-indicator--m"
7+
className="fd-busy-indicator fd-busy-indicator--m"
88
>
99
<div
10-
className="fd-busy-indicator--circle-0"
10+
className="fd-busy-indicator__circle"
1111
/>
1212
<div
13-
className="fd-busy-indicator--circle-1"
13+
className="fd-busy-indicator__circle"
1414
/>
1515
<div
16-
className="fd-busy-indicator--circle-2"
16+
className="fd-busy-indicator__circle"
1717
/>
1818
</div>
1919
`;
@@ -22,16 +22,16 @@ exports[`Storyshots Component API/BusyIndicator No Styles 1`] = `
2222
<div
2323
aria-hidden="false"
2424
aria-label="Loading"
25-
className="xxx-busy-indicator--m"
25+
className="xxx-busy-indicator xxx-busy-indicator--m"
2626
>
2727
<div
28-
className="xxx-busy-indicator--circle-0"
28+
className="xxx-busy-indicator__circle"
2929
/>
3030
<div
31-
className="xxx-busy-indicator--circle-1"
31+
className="xxx-busy-indicator__circle"
3232
/>
3333
<div
34-
className="xxx-busy-indicator--circle-2"
34+
className="xxx-busy-indicator__circle"
3535
/>
3636
</div>
3737
`;
@@ -40,16 +40,16 @@ exports[`Storyshots Component API/BusyIndicator Primary 1`] = `
4040
<div
4141
aria-hidden="false"
4242
aria-label="Loading"
43-
className="fd-busy-indicator--m"
43+
className="fd-busy-indicator fd-busy-indicator--m"
4444
>
4545
<div
46-
className="fd-busy-indicator--circle-0"
46+
className="fd-busy-indicator__circle"
4747
/>
4848
<div
49-
className="fd-busy-indicator--circle-1"
49+
className="fd-busy-indicator__circle"
5050
/>
5151
<div
52-
className="fd-busy-indicator--circle-2"
52+
className="fd-busy-indicator__circle"
5353
/>
5454
</div>
5555
`;
@@ -64,43 +64,43 @@ exports[`Storyshots Component API/BusyIndicator Sizes 1`] = `
6464
className="fd-busy-indicator"
6565
>
6666
<div
67-
className="fd-busy-indicator--circle-0"
67+
className="fd-busy-indicator__circle"
6868
/>
6969
<div
70-
className="fd-busy-indicator--circle-1"
70+
className="fd-busy-indicator__circle"
7171
/>
7272
<div
73-
className="fd-busy-indicator--circle-2"
73+
className="fd-busy-indicator__circle"
7474
/>
7575
</div>
7676
<div
7777
aria-hidden="false"
7878
aria-label="Loading"
79-
className="fd-busy-indicator--m"
79+
className="fd-busy-indicator fd-busy-indicator--m"
8080
>
8181
<div
82-
className="fd-busy-indicator--circle-0"
82+
className="fd-busy-indicator__circle"
8383
/>
8484
<div
85-
className="fd-busy-indicator--circle-1"
85+
className="fd-busy-indicator__circle"
8686
/>
8787
<div
88-
className="fd-busy-indicator--circle-2"
88+
className="fd-busy-indicator__circle"
8989
/>
9090
</div>
9191
<div
9292
aria-hidden="false"
9393
aria-label="Loading"
94-
className="fd-busy-indicator--l"
94+
className="fd-busy-indicator fd-busy-indicator--l"
9595
>
9696
<div
97-
className="fd-busy-indicator--circle-0"
97+
className="fd-busy-indicator__circle"
9898
/>
9999
<div
100-
className="fd-busy-indicator--circle-1"
100+
className="fd-busy-indicator__circle"
101101
/>
102102
<div
103-
className="fd-busy-indicator--circle-2"
103+
className="fd-busy-indicator__circle"
104104
/>
105105
</div>
106106
</div>

‎src/Calendar/Calendar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -724,7 +724,7 @@ class Calendar extends Component {
724724
className={calendarClasses}
725725
onKeyDown={(e) => this.onKeyDownCalendar(e)}>
726726
{this.generateNavigation()}
727-
<div className={classnames(`${cssNamespace}-calendar__content`)}
727+
<div className={classnames(`${cssNamespace}-calendar__content`, `${cssNamespace}-calendar__content--dates`)}
728728
onBlur={(e) => {
729729
if (!e.currentTarget.contains(e.relatedTarget)) {
730730
this.setState({ screenReaderText: '' });

‎src/Forms/Checkbox.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ describe('<Checkbox />', () => {
135135
document.body.innerHTML = '';
136136
});
137137

138-
const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
138+
const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
139139

140140

141141
test('should allow spreading className to ValidationOverlay popover', () => {
@@ -167,7 +167,7 @@ describe('<Checkbox />', () => {
167167
});
168168

169169
expect(
170-
wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
170+
wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
171171
).toBe('Sample');
172172
});
173173

@@ -180,7 +180,7 @@ describe('<Checkbox />', () => {
180180
});
181181

182182
expect(
183-
document.body.querySelector('.fd-popover__popper').classList
183+
document.body.querySelector('.fd-popover__body').classList
184184
).toContain('wonderful-styles');
185185
});
186186

‎src/Forms/FormInput.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('<FormInput />', () => {
3030
document.body.innerHTML = '';
3131
});
3232

33-
const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
33+
const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
3434

3535

3636
test('should allow spreading className to ValidationOverlay popover', () => {
@@ -62,7 +62,7 @@ describe('<FormInput />', () => {
6262
});
6363

6464
expect(
65-
wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
65+
wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
6666
).toBe('Sample');
6767
});
6868

@@ -75,7 +75,7 @@ describe('<FormInput />', () => {
7575
});
7676

7777
expect(
78-
document.body.querySelector('.fd-popover__popper').classList
78+
document.body.querySelector('.fd-popover__body').classList
7979
).toContain('wonderful-styles');
8080
});
8181

‎src/Forms/FormTextArea.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('<FormTextArea />', () => {
2121
document.body.innerHTML = '';
2222
});
2323

24-
const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
24+
const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
2525

2626

2727
test('should allow spreading className to ValidationOverlay popover', () => {
@@ -42,7 +42,7 @@ describe('<FormTextArea />', () => {
4242
});
4343

4444
expect(
45-
wrapper.find('.fd-popover__innerRef').getDOMNode().classList
45+
wrapper.find('.fd-popover__wrapper').getDOMNode().classList
4646
).toContain('wonderful-styles');
4747
});
4848

@@ -89,7 +89,7 @@ describe('<FormTextArea />', () => {
8989
});
9090

9191
expect(
92-
wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
92+
wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
9393
).toBe('Sample');
9494
});
9595

@@ -102,7 +102,7 @@ describe('<FormTextArea />', () => {
102102
});
103103

104104
expect(
105-
document.body.querySelector('.fd-popover__popper').classList
105+
document.body.querySelector('.fd-popover__body').classList
106106
).toContain('wonderful-styles');
107107
});
108108
});

0 commit comments

Comments
 (0)