Skip to content

Calendar: change clickable spans to buttons #3741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lorejoh12 merged 5 commits into from
Jan 20, 2018
Merged

Calendar: change clickable spans to buttons #3741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0485e59
Change clickable spans to buttons.
jordandrako Jan 18, 2018
77db7e8
Add button resets to classes used by buttons that were spans
jordandrako Jan 18, 2018
34e381f
npm run changes output
jordandrako Jan 18, 2018
b966e04
Correct email to microsoft alias
Jan 18, 2018
481e470
Update snapshot
Jan 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ...hanges/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Address issue #1535 - Calendar: Change clickable spans to buttons.",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "v-jojanz@microsoft.com"
}
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@ $Calendar-dayPicker-margin: 10px;
color: $ms-color-neutralDark;
position: relative;
top: 2px;
background-color: transparent;
border: none;
padding: 0;
&:hover {
color: $ms-color-neutralDark;
cursor: pointer;
Expand Down Expand Up @@ -308,6 +311,9 @@ $Calendar-dayPicker-margin: 10px;
@include ms-font-s-plus;
color: $ms-color-neutralPrimary;
text-align: center; // border-radius: 2px;
border: none;
padding: 0;
background-color: transparent;
&:hover {
color: $ms-color-black;
background-color: $ms-color-neutralTertiaryAlt;
Expand Down Expand Up @@ -336,6 +342,8 @@ $Calendar-dayPicker-margin: 10px;
height: 30px;
line-height: 30px;
padding: 0 10px;
background-color: transparent;
border: none;
position: absolute !important;
@include ms-right(13px);
&:hover {
Expand Down
4 changes: 2 additions & 2 deletions packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,15 +180,15 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
/> }

{ showGoToToday &&
<span
<button
role='button'
className={ css('ms-DatePicker-goToday js-goToday', styles.goToday) }
onClick={ this._onGotoToday }
onKeyDown={ this._onGotoTodayKeyDown }
tabIndex={ 0 }
>
{ strings!.goToToday }
</span>
</button>
}
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
>
<div className={ css('ms-DatePicker-monthComponents', styles.monthComponents) }>
<div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
<span
<button
className={ css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth,
{
['ms-DatePicker-prevMonth--disabled ' + styles.prevMonthIsDisabled]: !prevMonthInBounds
Expand All @@ -143,8 +143,8 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
tabIndex={ 0 }
>
<Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
</span >
<span
</button >
<button
className={ css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth,
{
['ms-DatePicker-nextMonth--disabled ' + styles.nextMonthIsDisabled]: !nextMonthInBounds
Expand All @@ -157,7 +157,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
tabIndex={ 0 }
>
<Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
</span >
</button >
</div >
</div >
<div className={ css('ms-DatePicker-header', styles.header) } >
Expand Down
14 changes: 7 additions & 7 deletions packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
navigatedMonth: HTMLElement;
};

private _selectMonthCallbacks: (() => void)[];
private _selectMonthCallbacks: (() => void) [];

public constructor(props: ICalendarMonthProps) {
super(props);
Expand Down Expand Up @@ -63,7 +63,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
<div className={ css('ms-DatePicker-monthPicker', styles.monthPicker) }>
<div className={ css('ms-DatePicker-yearComponents', styles.yearComponents) }>
<div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
<span
<button
className={ css('ms-DatePicker-prevYear js-prevYear', styles.prevYear, {
['ms-DatePicker-prevYear--disabled ' + styles.prevYearIsDisabled]: !isPrevYearInBounds
}) }
Expand All @@ -74,8 +74,8 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
tabIndex={ 0 }
>
<Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
</span>
<span
</button>
<button
className={ css('ms-DatePicker-nextYear js-nextYear', styles.nextYear, {
['ms-DatePicker-nextYear--disabled ' + styles.nextYearIsDisabled]: !isNextYearInBounds
}) }
Expand All @@ -86,7 +86,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
tabIndex={ 0 }
>
<Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
</span>
</button>
</div>
</div>
<div className={ css('ms-DatePicker-header', styles.header) }>
Expand Down Expand Up @@ -120,7 +120,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
const isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
(maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);

return <span
return <button
role={ 'gridcell' }
className={
css('ms-DatePicker-monthOption', styles.monthOption,
Expand All @@ -138,7 +138,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
ref={ isNavigatedMonth ? 'navigatedMonth' : undefined }
>
{ month }
</span>;
</button>;
}
) }
</div>
Expand Down
68 changes: 34 additions & 34 deletions packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
<div
className="ms-DatePicker-navContainer"
>
<span
<button
aria-controls="DatePickerDay-dayPicker10"
aria-label={undefined}
className="ms-DatePicker-prevMonth js-prevMonth"
Expand All @@ -48,8 +48,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
data-icon-name="Up"
role="presentation"
/>
</span>
<span
</button>
<button
aria-controls="DatePickerDay-dayPicker10"
aria-label={undefined}
className="ms-DatePicker-nextMonth js-nextMonth"
Expand All @@ -69,7 +69,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
data-icon-name="Down"
role="presentation"
/>
</span>
</button>
</div>
</div>
<div
Expand Down Expand Up @@ -906,7 +906,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
<div
className="ms-DatePicker-navContainer"
>
<span
<button
aria-label={undefined}
className="ms-DatePicker-prevYear js-prevYear"
onClick={[Function]}
Expand All @@ -925,8 +925,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
data-icon-name="Up"
role="presentation"
/>
</span>
<span
</button>
<button
aria-label={undefined}
className="ms-DatePicker-nextYear js-nextYear"
onClick={[Function]}
Expand All @@ -945,7 +945,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
data-icon-name="Down"
role="presentation"
/>
</span>
</button>
</div>
</div>
<div
Expand All @@ -971,7 +971,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
className="ms-DatePicker-optionGrid"
role="grid"
>
<span
<button
aria-label="January 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -980,8 +980,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Jan
</span>
<span
</button>
<button
aria-label="February 2000"
aria-selected={true}
className="ms-DatePicker-monthOption"
Expand All @@ -990,8 +990,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Feb
</span>
<span
</button>
<button
aria-label="March 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1000,8 +1000,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Mar
</span>
<span
</button>
<button
aria-label="April 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1010,8 +1010,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Apr
</span>
<span
</button>
<button
aria-label="May 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1020,8 +1020,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
May
</span>
<span
</button>
<button
aria-label="June 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1030,8 +1030,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Jun
</span>
<span
</button>
<button
aria-label="July 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1040,8 +1040,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Jul
</span>
<span
</button>
<button
aria-label="August 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1050,8 +1050,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Aug
</span>
<span
</button>
<button
aria-label="September 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1060,8 +1060,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Sep
</span>
<span
</button>
<button
aria-label="October 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1070,8 +1070,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Oct
</span>
<span
</button>
<button
aria-label="November 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1080,8 +1080,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Nov
</span>
<span
</button>
<button
aria-label="December 2000"
aria-selected={false}
className="ms-DatePicker-monthOption"
Expand All @@ -1090,19 +1090,19 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
role="gridcell"
>
Dec
</span>
</button>
</div>
</div>
</div>
<span
<button
className="ms-DatePicker-goToday js-goToday"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
>
Go to today
</span>
</button>
</div>
</div>
</div>
Expand Down