(Datepicker): update markups and classnames

Author: msmx-mnakagawa

src/scripts/Datepicker.tsx

@@ -141,39 +141,38 @@ const DatepickerFilter: FC<DatepickerFilterProps> = (props) => {
   const onNextMonth = useEventCallback(() => onMonthChange(1));
   return (
     <div className='slds-datepicker__filter slds-grid'>
-      <div className='slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-size_2-of-3'>
+      <div className='slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow'>
         <div className='slds-align-middle'>
           <Button
-            className='slds-align-middle'
             type='icon-container'
             icon='left'
-            size='small'
             alt='Previous Month'
             onClick={onPrevMonth}
           />
         </div>
         <h2 className='slds-align-middle'>{dayjs.monthsShort()[cal.month]}</h2>
         <div className='slds-align-middle'>
           <Button
-            className='slds-align-middle'
             type='icon-container'
             icon='right'
-            size='small'
             alt='Next Month'
             onClick={onNextMonth}
           />
         </div>
       </div>
-      <div className='slds-size_1-of-3'>
-        <Select value={cal.year} onChange={onYearChange}>
-          {new Array(11)
-            .join('_')
-            .split('_')
-            .map((a, i) => {
-              const year = cal.year + i - 5;
-              return <Option key={year} label={String(year)} value={year} />;
-            })}
-        </Select>
+      <div className='slds-shrink-none'>
+        <label className='slds-assistive-text'>Pick a Year</label>
+        <div className='slds-select_container'>
+          <Select value={cal.year} onChange={onYearChange}>
+            {new Array(11)
+              .join('_')
+              .split('_')
+              .map((a, i) => {
+                const year = cal.year + i - 5;
+                return <Option key={year} label={String(year)} value={year} />;
+              })}
+          </Select>
+        </div>
       </div>
     </div>
   );
@@ -241,10 +240,12 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   }
   const selected = date.value === selectedDate;
   const isToday = date.value === today;
+  const isAdjacentMonth = date.month !== cal.month;
   const dateClassName = classnames({
     'slds-disabled-text': !enabled,
     'slds-is-selected': selected,
     'slds-is-today': isToday,
+    'slds-day_adjacent-month': isAdjacentMonth,
   });
   return (
     <td
@@ -292,12 +293,7 @@ const DatepickerMonth = forwardRef(
       onDateKeyDown,
     } = props;
     return (
-      <table
-        ref={ref}
-        className='datepicker__month'
-        role='grid'
-        aria-labelledby='month'
-      >
+      <table ref={ref} className='slds-datepicker__month' role='grid'>
         <thead>
           <tr>
             {dayjs.weekdaysMin(true).map((wd, i) => (