diff --git a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
index d86a6448..ed0d568f 100644
--- a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
+++ b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
@@ -51,6 +51,10 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
const breadcrumbItems: IBreadcrumbItem[] = getBreadcrumbItems(items, onClick);
+ // onReduceData is required to prevent breadcrumb from shrinking
+ // when item changes dynamically
+ const returnUndefined = () => undefined;
+
return (
);
diff --git a/Breadcrumb/package-lock.json b/Breadcrumb/package-lock.json
index e1955369..3c81301b 100644
--- a/Breadcrumb/package-lock.json
+++ b/Breadcrumb/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@fluentui/react": "8.29.0",
- "@fluentui/react-hooks": "^8.5.4",
+ "@fluentui/react-hooks": "8.5.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
diff --git a/Breadcrumb/package.json b/Breadcrumb/package.json
index c7f9d8a9..220f63d3 100644
--- a/Breadcrumb/package.json
+++ b/Breadcrumb/package.json
@@ -14,7 +14,7 @@
},
"dependencies": {
"@fluentui/react": "8.29.0",
- "@fluentui/react-hooks": "^8.5.4",
+ "@fluentui/react-hooks": "8.5.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
diff --git a/Calendar/Calendar/loc/Readme.md b/Calendar/Calendar/loc/Readme.md
index 6ce75844..590077eb 100644
--- a/Calendar/Calendar/loc/Readme.md
+++ b/Calendar/Calendar/loc/Readme.md
@@ -6,7 +6,6 @@ All the translation files are borrowed from contributions(Link at the bottom) an
- Galician(gl-ES)
- Hindi (hi-IN)
- Croatian(hr-HR)
- - Hungarian(hu-HU)
- Indonesian(id-ID)
- Latvian(lv-LV)
- Korean(ko-KR)
@@ -23,4 +22,6 @@ Inorder to include the above mentioned language file(s), headover to [loc folder
Note: Only languages which are supported by [Language function](https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-language) in PowerApps are considered, i.e. [IETF BCP-47 language tag](https://tools.ietf.org/html/bcp47) format.
-Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc
\ No newline at end of file
+Important : Please submit a Pull Reuqest pointing to beta branch.
+
+Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc
\ No newline at end of file
diff --git a/Calendar/Calendar/loc/da-dk.ts b/Calendar/Calendar/loc/da-dk.ts
index fc1b4e5f..c6efdeac 100644
--- a/Calendar/Calendar/loc/da-dk.ts
+++ b/Calendar/Calendar/loc/da-dk.ts
@@ -3,33 +3,33 @@ define([], () => {
DatePickerMonthLongJanuary: 'Januar',
DatePickerMonthShortJanuary: 'Jan',
DatePickerMonthLongFebruary: 'Februar',
- DatePickerMonthShortFebruary: 'Februar',
+ DatePickerMonthShortFebruary: 'Feb',
DatePickerMonthLongMarch: 'Marts',
DatePickerMonthShortMarch: 'Mar',
DatePickerMonthLongApril: 'April',
DatePickerMonthShortApril: 'Apr',
- DatePickerMonthLongMay: 'Kan',
- DatePickerMonthShortMay: 'Kan',
+ DatePickerMonthLongMay: 'Maj',
+ DatePickerMonthShortMay: 'Maj',
DatePickerMonthLongJune: 'Juni',
- DatePickerMonthShortJune: 'Juni',
+ DatePickerMonthShortJune: 'Jun',
DatePickerMonthLongJuly: 'Juli',
DatePickerMonthShortJuly: 'Jul',
DatePickerMonthLongAugust: 'August',
- DatePickerMonthShortAugust: 'August',
+ DatePickerMonthShortAugust: 'Aug',
DatePickerMonthLongSeptember: 'September',
- DatePickerMonthShortSeptember: 'Syv',
+ DatePickerMonthShortSeptember: 'Sep',
DatePickerMonthLongOctober: 'Oktober',
- DatePickerMonthShortOctober: 'Oktober',
+ DatePickerMonthShortOctober: 'Okt',
DatePickerMonthLongNovember: 'November',
- DatePickerMonthShortNovember: 'November',
+ DatePickerMonthShortNovember: 'Nov',
DatePickerMonthLongDecember: 'December',
- DatePickerMonthShortDecember: 'December',
+ DatePickerMonthShortDecember: 'Dec',
DatePickerDayLongSunday: 'Søndag',
- DatePickerDayShortSunday: 'Sun',
+ DatePickerDayShortSunday: 'Søn',
DatePickerDayLongMonday: 'Mandag',
- DatePickerDayShortMonday: 'Min',
+ DatePickerDayShortMonday: 'Man',
DatePickerDayLongTuesday: 'Tirsdag',
- DatePickerDayShortTuesday: 'Tue',
+ DatePickerDayShortTuesday: 'Tir',
DatePickerDayLongWednesday: 'Onsdag',
DatePickerDayShortWednesday: 'Ons',
DatePickerDayLongThursday: 'Torsdag',
diff --git a/Calendar/Calendar/loc/hu-hu.ts b/Calendar/Calendar/loc/hu-hu.ts
new file mode 100644
index 00000000..6267b76a
--- /dev/null
+++ b/Calendar/Calendar/loc/hu-hu.ts
@@ -0,0 +1,53 @@
+define([], () => {
+ return {
+ DatePickerMonthLongJanuary: 'Január',
+ DatePickerMonthShortJanuary: 'Jan',
+ DatePickerMonthLongFebruary: 'Február',
+ DatePickerMonthShortFebruary: 'Feb',
+ DatePickerMonthLongMarch: 'Március',
+ DatePickerMonthShortMarch: 'Már',
+ DatePickerMonthLongApril: 'Április',
+ DatePickerMonthShortApril: 'Ápr',
+ DatePickerMonthLongMay: 'Május',
+ DatePickerMonthShortMay: 'Máj',
+ DatePickerMonthLongJune: 'Június',
+ DatePickerMonthShortJune: 'Jún',
+ DatePickerMonthLongJuly: 'Július',
+ DatePickerMonthShortJuly: 'Júl',
+ DatePickerMonthLongAugust: 'Augusztus',
+ DatePickerMonthShortAugust: 'Aug',
+ DatePickerMonthLongSeptember: 'Szeptember',
+ DatePickerMonthShortSeptember: 'Szept',
+ DatePickerMonthLongOctober: 'Október',
+ DatePickerMonthShortOctober: 'Okt',
+ DatePickerMonthLongNovember: 'November',
+ DatePickerMonthShortNovember: 'Nov',
+ DatePickerMonthLongDecember: 'December',
+ DatePickerMonthShortDecember: 'Dec',
+ DatePickerDayLongSunday: 'Vasárnap',
+ DatePickerDayShortSunday: 'Vas',
+ DatePickerDayLongMonday: 'Hétfő',
+ DatePickerDayShortMonday: 'Hé',
+ DatePickerDayLongTuesday: 'Kedd',
+ DatePickerDayShortTuesday: 'Ke',
+ DatePickerDayLongWednesday: 'Szerda',
+ DatePickerDayShortWednesday: 'Sze',
+ DatePickerDayLongThursday: 'Csütörtök',
+ DatePickerDayShortThursday: 'Csü',
+ DatePickerDayLongFriday: 'Péntek',
+ DatePickerDayShortFriday: 'Pé',
+ DatePickerDayLongSaturday: 'Szombat',
+ DatePickerDayShortSaturday: 'Szo',
+ DatePickerGoToToday: 'Ma',
+ DatePickerIsRequiredErrorMessage: '',
+ DatePickerInvalidInputErrorMessage: '',
+ DatePickerIsOutOfBoundsErrorMessage: '',
+ DateTimePickerDate: 'Dátum',
+ DateTimePickerTime: 'Idő',
+ DateTimePickerTimeSeparator: ':',
+ DateTimePickerHourValueInvalid: 'Helytelen óra érték',
+ DateTimePickerMinuteValueInvalid: 'Helytelen perc érték',
+ DateTimePickerSecondValueInvalid: 'Helytelen másodperc érték',
+ DateTimePickerTextErrorMessage: 'Helyes dátum értéket adjon meg',
+ };
+});
\ No newline at end of file
diff --git a/DetailsList/DetailsList/index.ts b/DetailsList/DetailsList/index.ts
index f0e78a48..e254181a 100644
--- a/DetailsList/DetailsList/index.ts
+++ b/DetailsList/DetailsList/index.ts
@@ -12,6 +12,7 @@ const SelectionTypes: Record<'0' | '1' | '2', SelectionMode> = {
};
export class FluentDetailsList implements ComponentFramework.ReactControl {
+ private static readonly COLUMN_LIMIT: number = 125;
notifyOutputChanged: () => void;
container: HTMLDivElement;
context: ComponentFramework.Context;
@@ -51,6 +52,12 @@ export class FluentDetailsList implements ComponentFramework.ReactControl): React.ReactElement {
@@ -167,12 +174,12 @@ export class FluentDetailsList implements ComponentFramework.ReactControl
-
+
diff --git a/SearchBox/SearchBox/__mocks__/mock-parameters.ts b/SearchBox/SearchBox/__mocks__/mock-parameters.ts
index eb5f40b3..2baedd8b 100644
--- a/SearchBox/SearchBox/__mocks__/mock-parameters.ts
+++ b/SearchBox/SearchBox/__mocks__/mock-parameters.ts
@@ -13,5 +13,6 @@ export function getMockParameters(): IInputs {
DisableAnimation: new MockTwoOptionsProperty(),
InputEvent: new MockStringProperty(),
DelayOutput: new MockTwoOptionsProperty(),
+ SearchText: new MockStringProperty(),
};
}
diff --git a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
index d5d55d4a..2edb7904 100644
--- a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
+++ b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
@@ -12,6 +12,7 @@ exports[`SearchBox renders 1`] = `
setFocus=""
themeJSON=""
underLined={false}
+ value=""
width={-1}
/>
`;
@@ -155,7 +156,7 @@ exports[`SearchBox theme 1`] = `
display: none;
}
disabled={false}
- id="SearchBox6"
+ id="SearchBox3"
onBlur={[Function]}
onChange={[Function]}
onInput={[Function]}
diff --git a/SearchBox/SearchBox/components/Component.types.ts b/SearchBox/SearchBox/components/Component.types.ts
index 9c23e68e..d637307c 100644
--- a/SearchBox/SearchBox/components/Component.types.ts
+++ b/SearchBox/SearchBox/components/Component.types.ts
@@ -10,4 +10,5 @@ export interface ISearchBoxComponentProps {
disabled?: boolean;
disableAnimation?: boolean;
setFocus?: string;
+ value?: string;
}
diff --git a/SearchBox/SearchBox/components/SearchBox.tsx b/SearchBox/SearchBox/components/SearchBox.tsx
index ea293820..1029cba3 100644
--- a/SearchBox/SearchBox/components/SearchBox.tsx
+++ b/SearchBox/SearchBox/components/SearchBox.tsx
@@ -3,8 +3,17 @@ import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, merge
import { ISearchBoxComponentProps } from './Component.types';
export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) => {
- const { onChanged, themeJSON, ariaLabel, placeholderText, underLined, disabled, disableAnimation, setFocus } =
- props;
+ const {
+ onChanged,
+ themeJSON,
+ ariaLabel,
+ placeholderText,
+ underLined,
+ disabled,
+ disableAnimation,
+ setFocus,
+ value,
+ } = props;
const filterIcon: IIconProps = { iconName: props.iconName };
const rootRef = React.useRef(null);
const theme = React.useMemo(() => {
@@ -44,6 +53,7 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
disableAnimation={disableAnimation}
className={wrapperClass}
ref={rootRef}
+ value={value}
/>
);
diff --git a/SearchBox/SearchBox/index.ts b/SearchBox/SearchBox/index.ts
index 30366a2d..712925a4 100644
--- a/SearchBox/SearchBox/index.ts
+++ b/SearchBox/SearchBox/index.ts
@@ -46,11 +46,10 @@ export class SearchBox implements ComponentFramework.ReactControl
A component to get search text as input
+
+ Search text
+
+
+ Represents the default as well as the current value of search box
+
\ No newline at end of file
diff --git a/SubwayNav/SubwayNav/ControlManifest.Input.xml b/SubwayNav/SubwayNav/ControlManifest.Input.xml
index 5bdeb1ec..7dc9ca2c 100644
--- a/SubwayNav/SubwayNav/ControlManifest.Input.xml
+++ b/SubwayNav/SubwayNav/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
-
+
@@ -14,6 +14,8 @@
WizardComplete
Error
+
+
@@ -26,8 +28,8 @@
-
-
+
+
\ No newline at end of file
diff --git a/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav-no-animation.styles.tsx b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav-no-animation.styles.tsx
new file mode 100644
index 00000000..5f6b7d10
--- /dev/null
+++ b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav-no-animation.styles.tsx
@@ -0,0 +1,175 @@
+/* eslint-disable */
+/* istanbul ignore file */
+// # FEATURE - Disable animation: Related changes are performed in this file
+// any changes related to this feature will be prefixed with => // # FEATURE - Disable animation
+// since this is not available OOTB in subwaynav of admin controls, hence it is driven by showAnimation property
+// Note: This file is a copy of subway-nav.styles.tsx
+import type { IStyle } from '@fluentui/react';
+import { isIE11, keyframes } from '@fluentui/react';
+import { throwOnUndefinedColor } from '../customizations/src/index';
+
+import type { ISubwayNavNodeProps } from './subway-node.types';
+import { SubwayNavNodeState } from './wizard.types';
+import type {
+ ISubwayNavItemStyleProps,
+ ISubwayNavItemStyles,
+ ISubwayNavStyleProps,
+ ISubwayNavStyles,
+} from './subway-nav.types';
+
+const nolineFadeIn = keyframes({
+ from: {
+ opacity: '1.0',
+ },
+ to: {
+ opacity: '1.0',
+ },
+});
+
+const nofadeIn = keyframes({
+ from: {
+ opacity: '1.0',
+ visibility: 'visible',
+ },
+ to: {
+ opacity: '1.0',
+ },
+});
+
+export const getSubwayNavNoAnimationStyles = (props: ISubwayNavStyleProps): ISubwayNavStyles => {
+ const { steps, disabled, wizardComplete, theme } = props;
+ let stepIndex = 0;
+ let totalStepsVisible = steps.length;
+
+ function getSelectedStep(nodeSteps: ISubwayNavNodeProps[], isSubSteps: boolean): void {
+ nodeSteps.some((step: ISubwayNavNodeProps, index: number) => {
+ if (
+ step.state === SubwayNavNodeState.Current ||
+ step.state === SubwayNavNodeState.CurrentWithSubSteps
+ ) {
+ stepIndex += index + (isSubSteps ? 1 : 0);
+
+ if (step.subSteps) {
+ totalStepsVisible += step.subSteps.length;
+ getSelectedStep(step.subSteps, true);
+ }
+
+ return true;
+ } else {
+ return false;
+ }
+ });
+ }
+
+ getSelectedStep(steps, false);
+ const stepCompletedColor = throwOnUndefinedColor(
+ theme.semanticColors.stepCompleted,
+ 'stepCompleted',
+ 'SubwayNav',
+ );
+ const wizardCompletedColor = throwOnUndefinedColor(
+ theme.semanticColors.allStepsComplete,
+ 'allStepsComplete',
+ 'SubwayNav',
+ );
+ const notStartedColor = throwOnUndefinedColor(
+ theme.semanticColors.stepNotStarted,
+ 'stepNotStarted',
+ 'SubwayNav',
+ );
+
+ // TODO: #1869
+ // we have to cast to IStyle because -ms-grid isn't part of the display typedef
+ const displayStyle = { display: isIE11() ? '-ms-grid' : 'grid' } as IStyle;
+
+ return {
+ root: [
+ displayStyle,
+ {
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridColumns: '7px 2px minmax(0, 1fr)',
+ gridTemplateColumns: '7px 2px minmax(0, 1fr)',
+ listStyle: 'none',
+ margin: 0,
+ padding: 0,
+ position: 'relative',
+ selectors: {
+ ':before': {
+ content: '\'\'',
+ display: 'block',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridColumn: '2',
+ gridColumn: '2',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridRow: '1',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridRowSpan: `${totalStepsVisible - 1}`,
+ gridRow: `1 / ${totalStepsVisible}`,
+ backgroundColor: wizardComplete ? wizardCompletedColor : notStartedColor,
+ // # FEATURE - Disable animation
+ animationName: nolineFadeIn,
+ // # FEATURE - Disable animation
+ animationDuration: '0s',
+ position: 'static',
+ opacity: disabled ? 0.5 : 1,
+ },
+ ':after': {
+ content: '\'\'',
+ display: stepIndex === 0 || wizardComplete ? 'none' : 'block',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridColumn: '2',
+ gridColumn: '2',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridRow: '1',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ MsGridRowSpan: `${stepIndex}`,
+ gridRow: `1 / ${stepIndex + 1}`,
+ backgroundColor: stepCompletedColor,
+ position: 'static',
+ },
+ '& > :not([data-substep="true"])': {
+ marginBottom: '36px',
+ },
+ '& > [data-substep="true"]:nth-child(n)': {
+ marginBottom: '27px',
+ },
+ '& > [data-substep="true"]:nth-child(n) + :not([data-substep="true"]):not(:last-child)':
+ {
+ marginTop: '12px',
+ marginBottom: '36px',
+ },
+ '& > :last-child, & > [data-substep="true"]:last-child': {
+ marginBottom: '0px',
+ },
+ },
+ },
+ ],
+ subComponentStyles: {
+ item: (itemProps: ISubwayNavItemStyleProps): ISubwayNavItemStyles => {
+ const { index } = itemProps;
+
+ return {
+ root: {
+ listStyle: 'none',
+ opacity: 0,
+ // # FEATURE - Disable animation
+ animationName: nofadeIn,
+ // # FEATURE - Disable animation
+ animationDuration: '0s',
+ animationFillMode: 'forwards',
+ animationTimingFunction: 'cubic-bezier(.33, 0, .60, 1)',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ '-ms-grid-column': `${1}`,
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ '-ms-grid-column-span': `${3}`,
+ gridColumn: '1 / 4',
+ // @ts-ignore Fabric doesn't support the MS specific grid rules
+ '-ms-grid-row': `${index + 1}`,
+ gridRow: `${index + 1}`,
+ animationDelay: `0s`,
+ },
+ };
+ },
+ },
+ };
+};
diff --git a/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.tsx b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.tsx
index f28f39d0..2f0bb3ba 100644
--- a/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.tsx
+++ b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.tsx
@@ -5,6 +5,7 @@ import type { FC } from 'react';
import { SubwayNavBase } from './subway-nav.base';
import { getSubwayNavStyles } from './subway-nav.styles';
+import { getSubwayNavNoAnimationStyles } from './subway-nav-no-animation.styles';
import type {
ISubwayNavProps,
ISubwayNavStyleProps,
@@ -16,3 +17,9 @@ export const SubwayNav: FC = styled<
ISubwayNavStyleProps,
ISubwayNavStyles
>(SubwayNavBase, getSubwayNavStyles, undefined, { scope: 'SubwayNav' });
+
+export const SubwayNavNoAnimation: FC = styled<
+ ISubwayNavProps,
+ ISubwayNavStyleProps,
+ ISubwayNavStyles
+>(SubwayNavBase, getSubwayNavNoAnimationStyles, undefined, { scope: 'SubwayNav' });
diff --git a/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.types.ts b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.types.ts
index aeab8c4e..d9e8b92e 100644
--- a/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.types.ts
+++ b/SubwayNav/SubwayNav/utilities/subway-nav/subway-nav.types.ts
@@ -48,6 +48,11 @@ export interface ISubwayNavProps {
* Theme provided by higher order component
*/
theme?: IM365Theme;
+ // # FEATURE - Disable animation
+ /**
+ * To show or hide initial animation effect
+ */
+ showAnimation?: boolean;
}
export interface ISubwayNavStyles {
diff --git a/SubwayNav/media/SubwayNav-Animation.gif b/SubwayNav/media/SubwayNav-Animation.gif
new file mode 100644
index 00000000..650bb455
Binary files /dev/null and b/SubwayNav/media/SubwayNav-Animation.gif differ