@sap-ux/control-property-editor 0.5.0 → 0.5.2

package/src/index.tsx

@@ -10,8 +10,6 @@ import { initI18n } from './i18n';
 import './index.css';
 import App from './App';
 import { store } from './store';
-import type { ThemeName } from './components';
-import { setThemeOnDocument } from './components';
 import { registerAppIcons } from './icons';
 import { initializeLivereload, setProjectScenario } from './slice';
 
@@ -41,9 +39,6 @@ export function start(options: StartOptions): void {
     registerAppIcons();
     initIcons();
 
-    const theme = localStorage.getItem('theme') ?? 'dark';
-    setThemeOnDocument(theme as ThemeName);
-
     store.dispatch(setProjectScenario(scenario));
     store.dispatch(initializeLivereload({ port: options.livereloadPort, url: options.livereloadUrl }));
 

package/src/panels/LeftPanel.tsx

@@ -26,13 +26,14 @@ export function LeftPanel(): ReactElement {
             sizesAsPercents={true}
             animation={true}>
             <UISections.Section
-                scrollable={true}
+                scrollable={false}
                 layout={UISectionLayout.Standard}
                 className="editor__outline"
                 height="100%">
                 <OutlinePanel />
             </UISections.Section>
             <UISections.Section
+                scrollable={false}
                 layout={UISectionLayout.Standard}
                 className="editor__outline"
                 height="100%"

package/src/panels/changes/ChangesPanel.module.scss

@@ -3,9 +3,6 @@
     padding: 15px 15px 15px 15px;
     flex-direction: row;
     align-items: center;
-    position: sticky;
-    top: 0px;
-    z-index: 1;
     background-color: var(--vscode-sideBar-background);
 }
 
@@ -23,4 +20,4 @@
 .infoIcon {
     margin-left: 15px;
     margin-top: 5px;
-}
+}

package/src/panels/changes/ChangesPanel.tsx

@@ -120,7 +120,7 @@ export function ChangesPanel(): ReactElement {
                     onChange={onFilterChange}
                 />
             </div>
-            {renderChanges()}
+            <div className="app-panel-scroller auto-element-scroller">{renderChanges()}</div>
         </>
     );
 }

package/src/panels/outline/OutlinePanel.scss

@@ -3,12 +3,13 @@
     padding: 15px 14px 15px 14px;
     flex-direction: row;
     align-items: center;
-    position: sticky;
-    top: 0px;
-    z-index: 1;
     background-color: var(--vscode-sideBar-background);
 }
 
+.auto-element-scroller {
+    height: calc(100% - 55px);
+}
+
 .funnel-icon {
     margin-left: 16px;
     i {

package/src/panels/outline/Tree.tsx

@@ -22,6 +22,15 @@ interface OutlineNodeItem extends OutlineNode {
 }
 
 export const Tree = (): ReactElement => {
+    // padding + height of `Search` bar
+    const SEARCH_HEIGHT = 56;
+
+    // height of the tree row in a outline
+    const TREE_ROW_HEIGHT = 28;
+
+    // margin of the highlighted control from the top including `Search` bar height and tree row height, it doesn't include the height of main toolbar
+    const HIGHLIGHTED_CONTROL_TOP_MARGIN = SEARCH_HEIGHT + TREE_ROW_HEIGHT;
+
     const dispatch = useDispatch();
     const { t } = useTranslation();
 
@@ -74,8 +83,10 @@ export const Tree = (): ReactElement => {
             setTimeout(() => {
                 // make sure that tree is fully rendered
                 const rect = node.getBoundingClientRect();
-                const outlineContainer = document.getElementsByClassName('section--scrollable')[0];
-                if (rect.top <= 20 || rect.bottom >= outlineContainer?.clientHeight) {
+                const outlineContainer = document.getElementsByClassName('auto-element-scroller')[0];
+
+                // check if highlighted control is behind the `Search` bar or check if it is outside of viewport from bottom
+                if (rect.top <= HIGHLIGHTED_CONTROL_TOP_MARGIN || rect.bottom >= outlineContainer?.clientHeight) {
                     node.scrollIntoView(true);
                 }
             }, 0);
@@ -462,7 +473,7 @@ export const Tree = (): ReactElement => {
     };
 
     return (
-        <div id="list-outline" className="app-panel-scroller">
+        <div id="list-outline" className="app-panel-scroller auto-element-scroller">
             <UIList
                 {...listProp}
                 items={items as never[]}

package/src/use-theme.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { useEffect } from 'react';
+import { useLocalStorage } from './use-local-storage';
+
+export type ThemeName = 'dark modern' | 'light modern' | 'high contrast black';
+/**
+ * React hook that lets you read and update applications theme.
+ *
+ * @returns [theme, setTheme] [T, React.Dispatch<T>]
+ */
+export function useTheme(): [ThemeName, React.Dispatch<ThemeName>] {
+    const [theme, setTheme] = useLocalStorage<ThemeName>('theme', 'dark modern');
+
+    useEffect(() => {
+        document.getElementsByTagName('HTML')[0].setAttribute('data-theme', theme);
+    }, [theme]);
+
+    return [theme, setTheme];
+}

package/test/unit/toolbar/ThemeSelector.test.tsx

@@ -32,12 +32,12 @@ test('renders theme selector callout', () => {
 });
 
 test('check selected theme', () => {
-    localStorage.setItem('theme', 'light');
+    localStorage.setItem('com.sap.ux.control-property-editor.theme', '"light modern"');
     render(<ThemeSelectorCallout />);
     screen.getByRole('button').click();
     const themeCalloutContent = screen.getAllByRole('button', { pressed: true });
     const pressedButton = themeCalloutContent.find((button) => button.getAttribute('aria-pressed') === 'true');
-    expect(pressedButton?.getAttribute('id')).toStrictEqual('theme-light-rect');
+    expect(pressedButton?.getAttribute('id')).toStrictEqual('theme-light-modern-rect');
 });
 
 test('change theme to light', () => {
@@ -46,12 +46,12 @@ test('change theme to light', () => {
     screen.getByTitle('Light').click();
     const themeCalloutContent = screen.getAllByRole('button', { pressed: true });
     const pressedButton = themeCalloutContent.find((button) => button.getAttribute('aria-pressed') === 'true');
-    expect(pressedButton?.getAttribute('id')).toStrictEqual('theme-light-rect');
-    expect(localStorage.getItem('theme')).toStrictEqual('light');
+    expect(pressedButton?.getAttribute('id')).toStrictEqual('theme-light-modern-rect');
+    expect(localStorage.getItem('com.sap.ux.control-property-editor.theme')).toStrictEqual('"light modern"');
 });
 
 test('change theme to light and navigate via keyboard for dark to have focus', async () => {
-    localStorage.setItem('theme', 'light');
+    localStorage.setItem('com.sap.ux.control-property-editor.theme', '"light modern"');
     // Use 'isVisible' property to make virtual nodes visible - 'isVisible' is used by fluent for testing purposes
     Object.defineProperty(HTMLElement.prototype, 'isVisible', {
         configurable: true,
@@ -75,7 +75,7 @@ test('change theme to light and navigate via keyboard for dark to have focus', a
     const darkButton = screen.getByTitle('Dark');
     expect(document.activeElement).toEqual(darkButton);
     // select focused theme
-    expect(localStorage.getItem('theme')).toStrictEqual('light');
+    expect(localStorage.getItem('com.sap.ux.control-property-editor.theme')).toStrictEqual('"light modern"');
     triggerKeyDown('Enter', 13);
-    expect(localStorage.getItem('theme')).toStrictEqual('dark');
+    expect(localStorage.getItem('com.sap.ux.control-property-editor.theme')).toStrictEqual('"dark modern"');
 });