feat(ui-components): new API method initTheme to override default F…

…luent UI styles, removing `-webkit-font-smoothing: antialiased`. (#2478) * feat: init theme to avoid font smoothing init theme to avoid font smoothing * test: additional test additional test * fix: execute from storybook execute from storybook * comment comment * test: coverage coverage
SAP · Oct 18, 2024 · ea18bcb · ea18bcb
1 parent 550e708
commit ea18bcb
Show file tree

Hide file tree

Showing 26 changed files with 60 additions and 77 deletions.
diff --git a/.changeset/gorgeous-melons-develop.md b/.changeset/gorgeous-melons-develop.md
@@ -0,0 +1,5 @@
+---
+'@sap-ux/ui-components': minor
+---
+
+Added new API method `initTheme` to override default Fluent UI styles, removing `-webkit-font-smoothing: antialiased`.
diff --git a/packages/ui-components/.storybook/preview.js b/packages/ui-components/.storybook/preview.js
@@ -0,0 +1,5 @@
+import { initTheme } from '../src/theme';
+import { initIcons } from '../src/components/Icons';
+
+initTheme();
+initIcons();
diff --git a/packages/ui-components/src/index.tsx b/packages/ui-components/src/index.tsx
@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utilities';
+export * from './theme';
diff --git a/packages/ui-components/src/theme/index.ts b/packages/ui-components/src/theme/index.ts
@@ -0,0 +1,15 @@
+import type { Theme } from '@fluentui/react';
+import { createTheme, loadTheme } from '@fluentui/react';
+
+/**
+ * Method intializes default styles for 'ui-components' theme.
+ */
+export function initTheme(): void {
+    const appTheme: Theme = createTheme({
+        defaultFontStyle: {
+            WebkitFontSmoothing: ''
+        }
+    });
+
+    loadTheme(appTheme);
+}
diff --git a/packages/ui-components/stories/UICallout.story.tsx b/packages/ui-components/stories/UICallout.story.tsx
@@ -2,9 +2,7 @@ import React, { useState } from 'react';
 import { UIDefaultButton, UIIconButton } from '../src/components/UIButton';
 import { UICallout, UICalloutContentPadding } from '../src/components/UICallout';
 import { UIFocusZone } from '../src/components/UIFocusZone';
-import { initIcons, UiIcons } from '../src/components/Icons';
-
-initIcons();
+import { UiIcons } from '../src/components/Icons';
 
 export default { title: 'Dropdowns/Callout' };
 

diff --git a/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx b/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx
@@ -10,13 +10,10 @@ import {
     UITextInput,
     UICallout,
     UICheckbox,
-    initIcons,
     CalloutCollisionTransform
 } from '../src/components';
 import { data } from '../test/__mock__/select-data';
 
-initIcons();
-
 export default { title: 'Dialogs/Dialogs' };
 
 enum ControlTypes {

diff --git a/packages/ui-components/stories/UICheckbox.story.tsx b/packages/ui-components/stories/UICheckbox.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 
 import { UICheckbox } from '../src/components/UICheckbox';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/Checkbox' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 

diff --git a/packages/ui-components/stories/UIChoiceGroup.story.tsx b/packages/ui-components/stories/UIChoiceGroup.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 import type { ChoiceGroupOption } from '../src/components/UIChoiceGroup';
 import { UIChoiceGroup } from '../src/components/UIChoiceGroup';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/ChoiceGroup' };
 
 const props: any = {

diff --git a/packages/ui-components/stories/UICombobox.story.tsx b/packages/ui-components/stories/UICombobox.story.tsx
@@ -12,11 +12,8 @@ import {
 import { UICheckbox } from '../src/components/UICheckbox';
 import { data, groupsData } from '../test/__mock__/select-data';
 
-import { initIcons } from '../src/components/Icons';
 import { UITextInput } from '../src/components';
 
-initIcons();
-
 export default { title: 'Dropdowns/Combobox' };
 
 export const SearchHighlight = (): JSX.Element => (

diff --git a/packages/ui-components/stories/UIContextualMenu.story.tsx b/packages/ui-components/stories/UIContextualMenu.story.tsx
@@ -10,12 +10,10 @@ import {
 } from '../src/components/UIContextualMenu';
 import { UIDefaultButton, UIIconButton } from '../src/components/UIButton';
 import { UIDirectionalHint } from '../src/components/UITreeDropdown';
-import { initIcons, UiIcons } from '../src/components/Icons';
+import { UiIcons } from '../src/components/Icons';
 import { UIDropdown } from '../src/components/UIDropdown';
 import { UIToggle } from '../src/components/UIToggle';
 
-initIcons();
-
 export default { title: 'Dropdowns/ContextualMenu' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 function getItems(iconsToLeft = false): UIContextualMenuItem[] {

diff --git a/packages/ui-components/stories/UICreateSelect.story.tsx b/packages/ui-components/stories/UICreateSelect.story.tsx
@@ -10,9 +10,6 @@ import {
     UICreateSelectInstance
 } from '../src/components/UICreateSelect';
 import { UILabel } from '../src/components/UILabel';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Dropdowns/CreateSelect' };
 const stackTokens: IStackTokens = { childrenGap: 40 };

diff --git a/packages/ui-components/stories/UIDatePicker.story.tsx b/packages/ui-components/stories/UIDatePicker.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 
 import { UIDatePicker } from '../src/components/UIDatePicker';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/DatePicker' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 

diff --git a/packages/ui-components/stories/UIDialog.story.tsx b/packages/ui-components/stories/UIDialog.story.tsx
@@ -10,10 +10,6 @@ import { UIDropdown } from '../src/components/UIDropdown';
 import { UIComboBox } from '../src/components/UIComboBox';
 import { UICheckbox } from '../src/components/UICheckbox';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Dialogs/Dialogs' };
 
 const stackTokens: IStackTokens = { childrenGap: 40 };

diff --git a/packages/ui-components/stories/UIDropdown.story.tsx b/packages/ui-components/stories/UIDropdown.story.tsx
@@ -5,14 +5,11 @@ import {
     UISelectableOptionMenuItemType,
     UICheckbox,
     UIDropdown,
-    initIcons,
     UISelectableOption,
     UITextInput
 } from '../src/components';
 import { data, shortData, groupsData } from '../test/__mock__/select-data';
 
-initIcons();
-
 export default { title: 'Dropdowns/Dropdown' };
 
 export const Basic = (): JSX.Element => (

diff --git a/packages/ui-components/stories/UIFlexibleTable.story.tsx b/packages/ui-components/stories/UIFlexibleTable.story.tsx
@@ -25,10 +25,6 @@ import {
 
 import { arrayMove } from 'react-movable';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Tables/UIFlexibleTable' };
 const tableIds = ['table1', 'table2'];
 

diff --git a/packages/ui-components/stories/UIIcon.story.tsx b/packages/ui-components/stories/UIIcon.story.tsx
@@ -2,12 +2,9 @@ import React from 'react';
 import type { IColumn } from '@fluentui/react';
 import { DetailsList, SelectionMode } from '@fluentui/react';
 import { UIIcon } from '../src/components/UIIcon';
-import { initIcons, UiIcons } from '../src/components/Icons';
 
 export default { title: 'Utilities/Icons' };
 
-initIcons();
-
 const items: any = [];
 for (const icon in UiIcons) {
     items.push(icon);

diff --git a/packages/ui-components/stories/UILabel.story.tsx b/packages/ui-components/stories/UILabel.story.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 import { UILabel } from '../src/components/UILabel';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Basic Inputs/Label' };
 const stackTokens: IStackTokens = { childrenGap: 40 };

diff --git a/packages/ui-components/stories/UILoader.story.tsx b/packages/ui-components/stories/UILoader.story.tsx
@@ -3,13 +3,11 @@ import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack, SpinnerSize } from '@fluentui/react';
 
 import { UILoader } from '../src/components/UILoader';
-import { initIcons } from '../src/components/Icons';
 import { UIDefaultButton } from '../src/components/UIButton';
 import { UIDialog } from '../src/components/UIDialog';
 
 export default { title: 'Progress/Loader' };
 
-initIcons();
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
 export const Loaders = () => (

diff --git a/packages/ui-components/stories/UIQuickNavigation.story.tsx b/packages/ui-components/stories/UIQuickNavigation.story.tsx
@@ -3,16 +3,13 @@ import React from 'react';
 import {
     UIQuickNavigation,
     UIDefaultButton,
-    initIcons,
     UITextInput,
     setQuickNavigationKey,
     UIQuickNavigationOffset
 } from '../src/components';
 
 export default { title: 'Utilities/Quick Navigation' };
 
-initIcons();
-
 const value = {
     name: 'Hello, world!',
     html: '<span><strong>Tag:</strong> name</span>'
@@ -67,9 +64,14 @@ export const External = () => {
 };
 
 export const ExternalWithCustomOffset = () => {
-    return <QuickNavigation inline={false} offsets={[
-        { y: 30, x: 0},
-        { y: 0, x: 30},
-        { y: -15, x: -15}
-    ]} />;
+    return (
+        <QuickNavigation
+            inline={false}
+            offsets={[
+                { y: 30, x: 0 },
+                { y: 0, x: 30 },
+                { y: -15, x: -15 }
+            ]}
+        />
+    );
 };
diff --git a/packages/ui-components/stories/UISearchBox.story.tsx b/packages/ui-components/stories/UISearchBox.story.tsx
@@ -3,14 +3,11 @@ import type { ISearchBoxProps, IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 
 import { UISearchBox } from '../src/components/UISearchBox';
-import { initIcons } from '../src/components/Icons';
 import { UICheckbox } from '../src/components';
 
 export default { title: 'Basic Inputs/Search' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
-initIcons();
-
 export const SearchBox = () => {
     const [query, setQuery] = useState('');
 

diff --git a/packages/ui-components/stories/UITextInput.story.tsx b/packages/ui-components/stories/UITextInput.story.tsx
@@ -4,12 +4,9 @@ import { Text, Stack, Separator } from '@fluentui/react';
 
 import { UITextInput } from '../src/components/UIInput';
 import { UICheckbox } from '../src/components/UICheckbox';
-import { initIcons } from '../src/components/Icons';
 
 export default { title: 'Basic Inputs/Input' };
 
-initIcons();
-
 const stackTokens: IStackTokens = { childrenGap: 40 };
 const iconFolderProps = { iconName: 'FolderOpened' };
 

diff --git a/packages/ui-components/stories/UIToggleGroup.story.tsx b/packages/ui-components/stories/UIToggleGroup.story.tsx
@@ -2,9 +2,6 @@ import React, { useState } from 'react';
 import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 import { UIToggleGroup } from '../src/components/UIToggleGroup';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Basic Inputs/Toggle/Group' };
 const stackTokens: IStackTokens = { childrenGap: 40 };

diff --git a/packages/ui-components/stories/UITooltip.story.tsx b/packages/ui-components/stories/UITooltip.story.tsx
@@ -2,12 +2,9 @@ import React from 'react';
 
 import { UITooltip, UITooltipUtils } from '../src/components/UITooltip';
 import { UIDefaultButton } from '../src/components/UIButton';
-import { initIcons } from '../src/components/Icons';
 
 export default { title: 'Dropdowns/Tooltip' };
 
-initIcons();
-
 const value = {
     name: 'Hello, world!',
     html: '<span><strong>Tag:</strong> name</span>'

diff --git a/packages/ui-components/stories/UITranslationInput.story.tsx b/packages/ui-components/stories/UITranslationInput.story.tsx
@@ -4,7 +4,7 @@ import type { IStackTokens } from '@fluentui/react';
 import { Stack } from '@fluentui/react';
 import type { I18nBundle, TranslationEntry } from '../src/components/UITranslationInput';
 import { TranslationTextPattern, UITranslationInput } from '../src/components/UITranslationInput';
-import { initIcons, UiIcons } from '../src/components/Icons';
+import { UiIcons } from '../src/components/Icons';
 import { UITable } from '../src/components/UITable';
 import type { UIColumn } from '../src/components/UITable';
 import { UIIconButton } from '../src/components/UIButton';
@@ -26,8 +26,6 @@ interface CustomTranslationEntry extends TranslationEntry {
     dummyPath: string;
 }
 
-initIcons();
-
 const stackTokens: IStackTokens = { childrenGap: 60 };
 
 const I18N_BUNDLE_KEY = 'ui-components-i18n-bundle';

diff --git a/packages/ui-components/stories/Utilities.story.tsx b/packages/ui-components/stories/Utilities.story.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import { Stack } from '@fluentui/react';
 import type { IStackTokens } from '@fluentui/react';
-import { initIcons, UICallout } from '../src/components';
-
-initIcons();
+import { UICallout } from '../src/components';
 
 export default { title: 'Utilities/Misc' };
 
@@ -15,11 +13,12 @@ const getContent = (name: string): JSX.Element => {
             style={{
                 padding: 10
             }}>
-            {name}<br />
-            lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt
+            {name}
+            <br />
+            lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt
         </div>
     );
 };

diff --git a/packages/ui-components/test/unit/theme/Theme.test.ts b/packages/ui-components/test/unit/theme/Theme.test.ts
@@ -0,0 +1,14 @@
+import { initTheme } from '../../../src';
+import * as fluentUI from '@fluentui/react';
+
+describe('initTheme', () => {
+    it('initTheme', () => {
+        const createThemeSpy = jest.spyOn(fluentUI, 'createTheme');
+        initTheme();
+        expect(createThemeSpy).toBeCalledWith({
+            defaultFontStyle: {
+                WebkitFontSmoothing: ''
+            }
+        });
+    });
+});