From a113dcdfdbefd3122e25aae4dbf15467d292fe41 Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:19:46 +0200 Subject: [PATCH 01/10] Added className to Calendar root (see #4514) --- .../src/components/Calendar/Calendar.test.tsx | 12 ++++++++++++ .../src/components/Calendar/Calendar.tsx | 4 ++-- .../src/components/Calendar/Calendar.types.ts | 3 +++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 6616d450c70a45..4c3130777a2d3d 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -173,6 +173,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } + className="CalendarTestClass" />) as Calendar; }); @@ -246,6 +247,17 @@ describe('Calendar', () => { expect(lastSelectedDateRange!.length).toEqual(7); lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(firstDate, i))).toEqual(true)); }); + + it('Verify class name', () => { + const calendarRoot = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'CalendarTestClass'); + expect(calendarRoot).toBeDefined(); + expect(calendarRoot.length).toEqual(1); + const root = calendarRoot[0]; + expect(root.classList).toBeDefined(); + expect(root.classList.length).toEqual(2); + expect(root.classList[0]).toEqual("ms-DatePicker"); + expect(root.classList[1]).toEqual("CalendarTestClass"); + }); }); describe('render with date boundaries', () => { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 6d999bf54e92f6..a95b017a0788e7 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -123,14 +123,14 @@ export class Calendar extends BaseComponent impl public render() { const rootClass = 'ms-DatePicker'; - const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate, className } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday; return ( -
+
{ */ componentRef?: (component: ICalendar | null) => void; + /** Optional class name to add to the root element. */ + className?: string; + /** * Callback issued when a date is selected * @param date - The date the user selected From 7df10cdcbfbb74f5e615b8ba9ed3c96dcbc9e4ac Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:22:50 +0200 Subject: [PATCH 02/10] Added Change Request File --- .../ClassName_2018-04-16-07-21.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json diff --git a/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json new file mode 100644 index 00000000000000..c3c4a5f41b02d7 --- /dev/null +++ b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added optional className property to Calendar", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "aur@gmx.de" +} \ No newline at end of file From 5131956d069af4a4afa8aef32958104067268700 Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 18:28:33 +0200 Subject: [PATCH 03/10] Changed single line comment to multi line comment --- .../src/components/Calendar/Calendar.types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts index e238f79163581a..baf7ff93fcc9bf 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts @@ -16,7 +16,9 @@ export interface ICalendarProps extends React.Props { */ componentRef?: (component: ICalendar | null) => void; - /** Optional class name to add to the root element. */ + /** + * Optional class name to add to the root element. + */ className?: string; /** From 08644fad0d1eb59d3ea6ff9c1de8761c06a63173 Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:43:41 +0200 Subject: [PATCH 04/10] Changed double quotes to single quotes --- .../src/components/Calendar/Calendar.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 4c3130777a2d3d..643eddeab900d8 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -255,8 +255,8 @@ describe('Calendar', () => { const root = calendarRoot[0]; expect(root.classList).toBeDefined(); expect(root.classList.length).toEqual(2); - expect(root.classList[0]).toEqual("ms-DatePicker"); - expect(root.classList[1]).toEqual("CalendarTestClass"); + expect(root.classList[0]).toEqual('ms-DatePicker'); + expect(root.classList[1]).toEqual('CalendarTestClass'); }); }); From cc4d58593092f4402c63368ca49fdfb4a10697c5 Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:44:53 +0200 Subject: [PATCH 05/10] Missed one double quotation --- .../src/components/Calendar/Calendar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 643eddeab900d8..506a16ad157868 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -173,7 +173,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } - className="CalendarTestClass" + className='CalendarTestClass' />) as Calendar; }); From 48e8681d85e747ca701fb73f72693a6a902f06bb Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:19:46 +0200 Subject: [PATCH 06/10] Added className to Calendar root (see #4514) --- .../src/components/Calendar/Calendar.test.tsx | 12 ++++++++++++ .../src/components/Calendar/Calendar.tsx | 4 ++-- .../src/components/Calendar/Calendar.types.ts | 3 +++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index f44ab13a7ce206..72c6bbcffa0df4 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -171,6 +171,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } + className="CalendarTestClass" />) as Calendar; }); @@ -244,6 +245,17 @@ describe('Calendar', () => { expect(lastSelectedDateRange!.length).toEqual(7); lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(firstDate, i))).toEqual(true)); }); + + it('Verify class name', () => { + const calendarRoot = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'CalendarTestClass'); + expect(calendarRoot).toBeDefined(); + expect(calendarRoot.length).toEqual(1); + const root = calendarRoot[0]; + expect(root.classList).toBeDefined(); + expect(root.classList.length).toEqual(2); + expect(root.classList[0]).toEqual("ms-DatePicker"); + expect(root.classList[1]).toEqual("CalendarTestClass"); + }); }); describe('render with date boundaries', () => { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 8326b0fc239564..a79e89f50895ce 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -124,14 +124,14 @@ export class Calendar extends BaseComponent impl public render(): JSX.Element { const rootClass = 'ms-DatePicker'; - const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate } = this.props; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate, className } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday; return ( -
+
{ */ componentRef?: (component: ICalendar | null) => void; + /** Optional class name to add to the root element. */ + className?: string; + /** * Callback issued when a date is selected * @param date - The date the user selected From 2f388613f58ea7b9c03b01daf15a0debe4044093 Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:22:50 +0200 Subject: [PATCH 07/10] Added Change Request File --- .../ClassName_2018-04-16-07-21.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json diff --git a/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json new file mode 100644 index 00000000000000..c3c4a5f41b02d7 --- /dev/null +++ b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added optional className property to Calendar", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "aur@gmx.de" +} \ No newline at end of file From d63880df4ed1359a1f675235c0a3ff93a2e50dea Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 18:28:33 +0200 Subject: [PATCH 08/10] Changed single line comment to multi line comment --- .../src/components/Calendar/Calendar.types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts index 7187d8f38197cf..d6401d66e5f613 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts @@ -16,7 +16,9 @@ export interface ICalendarProps extends React.Props { */ componentRef?: (component: ICalendar | null) => void; - /** Optional class name to add to the root element. */ + /** + * Optional class name to add to the root element. + */ className?: string; /** From 0bed016959dd8a1e7c317d2e96cb31a727656060 Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:43:41 +0200 Subject: [PATCH 09/10] Changed double quotes to single quotes --- .../src/components/Calendar/Calendar.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 72c6bbcffa0df4..b02cd48bf3e9b5 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -253,8 +253,8 @@ describe('Calendar', () => { const root = calendarRoot[0]; expect(root.classList).toBeDefined(); expect(root.classList.length).toEqual(2); - expect(root.classList[0]).toEqual("ms-DatePicker"); - expect(root.classList[1]).toEqual("CalendarTestClass"); + expect(root.classList[0]).toEqual('ms-DatePicker'); + expect(root.classList[1]).toEqual('CalendarTestClass'); }); }); From a173eba7e40e3fbc310cbbeaa24a16f4c7ba27cb Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:44:53 +0200 Subject: [PATCH 10/10] Missed one double quotation --- .../src/components/Calendar/Calendar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index b02cd48bf3e9b5..cf50e4755bc670 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -171,7 +171,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } - className="CalendarTestClass" + className='CalendarTestClass' />) as Calendar; });