Merge pull request #1505 from davidlygagnon/fix_year_picker_width

SLDSDatePicker bug fix: Fixing issue where year picker doesn't show years correctly

Author: interactivellama

components/date-picker/__tests__/__snapshots__/datepicker.snapshot-test.jsx.snap

@@ -75,6 +75,11 @@ exports[`Datepicker
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -922,6 +927,11 @@ exports[`Datepicker
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -1767,6 +1777,11 @@ exports[`Datepicker Default DOM Snapshot 1`] = `
       >
         <div
           className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+          style={
+            Object {
+              "flex": 1.75,
+            }
+          }
         >
           <div
             className="slds-align-middle"
@@ -2560,7 +2575,7 @@ exports[`Datepicker Default HTML Snapshot 1`] = `
   <div class=\\"slds-datepicker slds-dropdown slds-dropdown--left\\">
     <div class=\\"\\" aria-hidden=\\"false\\" data-selection=\\"single\\">
       <div class=\\"slds-datepicker__filter slds-grid\\">
-        <div class=\\"slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow\\">
+        <div class=\\"slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow\\" style=\\"flex:1.75;\\">
           <div class=\\"slds-align-middle\\"><button class=\\"slds-button slds-button--icon-container\\" type=\\"button\\"><svg aria-hidden=\\"true\\" class=\\"slds-button__icon\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#left\\"></use></svg><span class=\\"slds-assistive-text\\">Previous month</span></button></div>
           <h2
             id=\\"sample-datepicker-month\\" class=\\"slds-align-middle\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\">July <span class=\\"slds-assistive-text\\">2014</span></h2>

components/date-picker/private/navigation.jsx

@@ -91,7 +91,10 @@ const DatepickerMonthNavigation = createReactClass({
 	render () {
 		return (
 			<div className="slds-datepicker__filter slds-grid">
-				<div className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow">
+				<div
+					className="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow"
+					style={{ flex: 1.75 }}
+				>
 					<div className="slds-align-middle">
 						<Button
 							assistiveText={{ icon: this.props.assistiveTextPreviousMonth }}

components/date-picker/private/year-picklist.jsx

@@ -43,7 +43,7 @@ const DatepickerYearSelector = createReactClass({
 		const opts = [];
 
 		for (let year = fromYear; year < toYear; year += 1) {
-			opts.push({ label: `${year}`, value: year, id: opts.length });
+			opts.push({ label: `${year}`, value: year, id: String(opts.length) });
 		}
 		return opts;
 	},
@@ -73,6 +73,7 @@ const DatepickerYearSelector = createReactClass({
 			<div className="slds-form-element slds-align-content-center">
 				<Combobox
 					className="slds-shrink-none"
+					classNameMenu="slds-datepicker"
 					events={{
 						onSelect: this.handleSelect,
 					}}