fix: upgrade fd-styles to latest and fix components due to broken cha…

…nges 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
SAP · Feb 6, 2023 · 6e58a23 · 6e58a23
1 parent 4b0b28f
commit 6e58a23
Show file tree

Hide file tree

Showing 71 changed files with 270 additions and 136 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -29,3 +29,5 @@
     font-style: normal;
 }
 </style>
+<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css"></link>
+<link rel="stylesheet" type="text/css" href="./theming/sap_fiori_3.css"></link>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "size": "npm run build && size-limit",
     "size:debug": "npm run build && size-limit --why",
     "start": "npm run storybook",
-    "storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming --no-dll",
+    "storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming,node_modules/fundamental-styles/dist/ --no-dll",
     "storybook:ci": "npm run storybook -- --ci --quiet",
     "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",
     "test:coverage:watch": "npm run test:coverage -- --watch",
@@ -51,7 +51,7 @@
     "@popperjs/core": "^2.5.4",
     "chain-function": "^1.0.1",
     "classnames": "^2.3.1",
-    "fundamental-styles": "0.19.0",
+    "fundamental-styles": "^0.26.5",
     "hoist-non-react-statics": "^3.3.2",
     "keycode": "^2.2.0",
     "moment": "^2.29.2",

diff --git a/src/BusyIndicator/BusyIndicator.js b/src/BusyIndicator/BusyIndicator.js
@@ -20,7 +20,7 @@ const BusyIndicator = React.forwardRef(({
 
     const busyIndicatorClasses = classnames(
         {
-            [`${cssNamespace}-busy-indicator--${size}`]: size === 'm' || size === 'l',
+            [`${cssNamespace}-busy-indicator ${cssNamespace}-busy-indicator--${size}`]: size === 'm' || size === 'l',
             [`${cssNamespace}-busy-indicator`]: size === 's'
         },
         className
@@ -36,9 +36,9 @@ const BusyIndicator = React.forwardRef(({
             aria-label={localizedText.loading}
             className={busyIndicatorClasses}
             ref={ref} >
-            <div className={classnames(`${cssNamespace}-busy-indicator--circle-0`)} />
-            <div className={classnames(`${cssNamespace}-busy-indicator--circle-1`)} />
-            <div className={classnames(`${cssNamespace}-busy-indicator--circle-2`)} />
+            <div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
+            <div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
+            <div className={classnames(`${cssNamespace}-busy-indicator__circle`)} />
         </div>
     );
 });

diff --git a/src/BusyIndicator/BusyIndicator.test.js b/src/BusyIndicator/BusyIndicator.test.js
@@ -23,6 +23,6 @@ describe('<BusyIndicator />', () => {
         }
         mount(<Test />);
         expect(ref.current.tagName).toEqual('DIV');
-        expect(ref.current.className).toEqual('fd-busy-indicator--m');
+        expect(ref.current.className).toEqual('fd-busy-indicator fd-busy-indicator--m');
     });
 });
diff --git a/src/BusyIndicator/__stories__/__snapshots__/BusyIndicator.stories.storyshot b/src/BusyIndicator/__stories__/__snapshots__/BusyIndicator.stories.storyshot
@@ -4,16 +4,16 @@ exports[`Storyshots Component API/BusyIndicator Dev 1`] = `
 <div
   aria-hidden="false"
   aria-label="Loading"
-  className="fd-busy-indicator--m"
+  className="fd-busy-indicator fd-busy-indicator--m"
 >
   <div
-    className="fd-busy-indicator--circle-0"
+    className="fd-busy-indicator__circle"
   />
   <div
-    className="fd-busy-indicator--circle-1"
+    className="fd-busy-indicator__circle"
   />
   <div
-    className="fd-busy-indicator--circle-2"
+    className="fd-busy-indicator__circle"
   />
 </div>
 `;
@@ -22,16 +22,16 @@ exports[`Storyshots Component API/BusyIndicator No Styles 1`] = `
 <div
   aria-hidden="false"
   aria-label="Loading"
-  className="xxx-busy-indicator--m"
+  className="xxx-busy-indicator xxx-busy-indicator--m"
 >
   <div
-    className="xxx-busy-indicator--circle-0"
+    className="xxx-busy-indicator__circle"
   />
   <div
-    className="xxx-busy-indicator--circle-1"
+    className="xxx-busy-indicator__circle"
   />
   <div
-    className="xxx-busy-indicator--circle-2"
+    className="xxx-busy-indicator__circle"
   />
 </div>
 `;
@@ -40,16 +40,16 @@ exports[`Storyshots Component API/BusyIndicator Primary 1`] = `
 <div
   aria-hidden="false"
   aria-label="Loading"
-  className="fd-busy-indicator--m"
+  className="fd-busy-indicator fd-busy-indicator--m"
 >
   <div
-    className="fd-busy-indicator--circle-0"
+    className="fd-busy-indicator__circle"
   />
   <div
-    className="fd-busy-indicator--circle-1"
+    className="fd-busy-indicator__circle"
   />
   <div
-    className="fd-busy-indicator--circle-2"
+    className="fd-busy-indicator__circle"
   />
 </div>
 `;
@@ -64,43 +64,43 @@ exports[`Storyshots Component API/BusyIndicator Sizes 1`] = `
     className="fd-busy-indicator"
   >
     <div
-      className="fd-busy-indicator--circle-0"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-1"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-2"
+      className="fd-busy-indicator__circle"
     />
   </div>
   <div
     aria-hidden="false"
     aria-label="Loading"
-    className="fd-busy-indicator--m"
+    className="fd-busy-indicator fd-busy-indicator--m"
   >
     <div
-      className="fd-busy-indicator--circle-0"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-1"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-2"
+      className="fd-busy-indicator__circle"
     />
   </div>
   <div
     aria-hidden="false"
     aria-label="Loading"
-    className="fd-busy-indicator--l"
+    className="fd-busy-indicator fd-busy-indicator--l"
   >
     <div
-      className="fd-busy-indicator--circle-0"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-1"
+      className="fd-busy-indicator__circle"
     />
     <div
-      className="fd-busy-indicator--circle-2"
+      className="fd-busy-indicator__circle"
     />
   </div>
 </div>

diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
@@ -724,7 +724,7 @@ class Calendar extends Component {
                 className={calendarClasses}
                 onKeyDown={(e) => this.onKeyDownCalendar(e)}>
                 {this.generateNavigation()}
-                <div className={classnames(`${cssNamespace}-calendar__content`)}
+                <div className={classnames(`${cssNamespace}-calendar__content`, `${cssNamespace}-calendar__content--dates`)}
                     onBlur={(e) => {
                         if (!e.currentTarget.contains(e.relatedTarget)) {
                             this.setState({ screenReaderText: '' });

diff --git a/src/Forms/Checkbox.test.js b/src/Forms/Checkbox.test.js
@@ -135,7 +135,7 @@ describe('<Checkbox />', () => {
                 document.body.innerHTML = '';
             });
 
-            const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
+            const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
 
 
             test('should allow spreading className to ValidationOverlay popover', () => {
@@ -167,7 +167,7 @@ describe('<Checkbox />', () => {
                 });
 
                 expect(
-                    wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
+                    wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
                 ).toBe('Sample');
             });
 
@@ -180,7 +180,7 @@ describe('<Checkbox />', () => {
                 });
 
                 expect(
-                    document.body.querySelector('.fd-popover__popper').classList
+                    document.body.querySelector('.fd-popover__body').classList
                 ).toContain('wonderful-styles');
             });
 

diff --git a/src/Forms/FormInput.test.js b/src/Forms/FormInput.test.js
@@ -30,7 +30,7 @@ describe('<FormInput />', () => {
             document.body.innerHTML = '';
         });
 
-        const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
+        const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
 
 
         test('should allow spreading className to ValidationOverlay popover', () => {
@@ -62,7 +62,7 @@ describe('<FormInput />', () => {
             });
 
             expect(
-                wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
+                wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
@@ -75,7 +75,7 @@ describe('<FormInput />', () => {
             });
 
             expect(
-                document.body.querySelector('.fd-popover__popper').classList
+                document.body.querySelector('.fd-popover__body').classList
             ).toContain('wonderful-styles');
         });
 

diff --git a/src/Forms/FormTextArea.test.js b/src/Forms/FormTextArea.test.js
@@ -21,7 +21,7 @@ describe('<FormTextArea />', () => {
             document.body.innerHTML = '';
         });
 
-        const getFormMessage = () => document.body.querySelector('.fd-popover__popper > div > .fd-form-message');
+        const getFormMessage = () => document.body.querySelector('.fd-popover__body > div > .fd-form-message');
 
 
         test('should allow spreading className to ValidationOverlay popover', () => {
@@ -42,7 +42,7 @@ describe('<FormTextArea />', () => {
             });
 
             expect(
-                wrapper.find('.fd-popover__innerRef').getDOMNode().classList
+                wrapper.find('.fd-popover__wrapper').getDOMNode().classList
             ).toContain('wonderful-styles');
         });
 
@@ -89,7 +89,7 @@ describe('<FormTextArea />', () => {
             });
 
             expect(
-                wrapper.find('.fd-popover').getDOMNode().attributes['data-sample'].value
+                wrapper.find('.fd-popover').at(0).getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
@@ -102,7 +102,7 @@ describe('<FormTextArea />', () => {
             });
 
             expect(
-                document.body.querySelector('.fd-popover__popper').classList
+                document.body.querySelector('.fd-popover__body').classList
             ).toContain('wonderful-styles');
         });
     });

diff --git a/src/Forms/_FormValidationOverlay.test.js b/src/Forms/_FormValidationOverlay.test.js
@@ -9,7 +9,7 @@ describe('<FormValidationOverlay />', () => {
         <FormValidationOverlay control={(<input onChange={() => {}} value='Test' />)} {...props} />);
 
     const getPopover = () => {
-        return document.body.querySelector('.fd-popover__popper');
+        return document.body.querySelector('.fd-popover__body');
     };
 
     afterEach(() => {