Merge pull request #885 from airbnb/maja-force-font-size-to-read-from…

…-theme Use theme font size in a meaningful way
react-dates · Dec 6, 2017 · be5e24f · be5e24f
2 parents e92deb3 + e2f494c
commit be5e24f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
@@ -178,7 +178,7 @@ CalendarDay.propTypes = propTypes;
 CalendarDay.defaultProps = defaultProps;
 
 export { CalendarDay as PureCalendarDay };
-export default withStyles(({ reactDates: { color } }) => ({
+export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay_container: {
     border: `1px solid ${color.core.borderLight}`,
     padding: 0,
@@ -203,11 +203,13 @@ export default withStyles(({ reactDates: { color } }) => ({
     margin: 0,
     padding: 0,
     color: 'inherit',
-    font: 'inherit',
     lineHeight: 'normal',
     overflow: 'visible',
     boxSizing: 'border-box',
     cursor: 'pointer',
+    fontFamily: 'inherit',
+    fontStyle: 'inherit',
+    fontSize: font.size,
 
     ':active': {
       outline: 0,

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -842,7 +842,7 @@ DayPicker.propTypes = propTypes;
 DayPicker.defaultProps = defaultProps;
 
 export { DayPicker as PureDayPicker };
-export default withStyles(({ reactDates: { color, zIndex } }) => ({
+export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   DayPicker: {
     background: color.background,
     position: 'relative',
@@ -918,6 +918,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     margin: '1px 0',
     paddingLeft: 0,
     paddingRight: 0,
+    fontSize: font.size,
   },
 
   DayPicker_weekHeader_li: {

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -214,17 +214,14 @@ class DayPickerKeyboardShortcuts extends React.Component {
 
         {showKeyboardShortcutsPanel &&
           <div
-            {...css(
-              styles.DayPickerKeyboardShortcuts_panel,
-              block && styles.DayPickerKeyboardShortcuts_panel__block,
-            )}
+            {...css(styles.DayPickerKeyboardShortcuts_panel)}
             role="dialog"
-            aria-labelledby="DayPickerKeyboardShortcuts__title"
-            aria-describedby="DayPickerKeyboardShortcuts__description"
+            aria-labelledby="DayPickerKeyboardShortcuts_title"
+            aria-describedby="DayPickerKeyboardShortcuts_description"
           >
             <div
               {...css(styles.DayPickerKeyboardShortcuts_title)}
-              id="DayPickerKeyboardShortcuts__title"
+              id="DayPickerKeyboardShortcuts_title"
             >
               {phrases.keyboardShortcuts}
             </div>
@@ -245,8 +242,8 @@ class DayPickerKeyboardShortcuts extends React.Component {
             </button>
 
             <ul
-              {...css(styles.DayPickerKeyboardShortcuts__list)}
-              id="DayPickerKeyboardShortcuts__description"
+              {...css(styles.DayPickerKeyboardShortcuts_list)}
+              id="DayPickerKeyboardShortcuts_description"
             >
               {this.keyboardShortcuts.map(({ unicode, label, action }) => (
                 <KeyboardShortcutRow
@@ -268,7 +265,7 @@ class DayPickerKeyboardShortcuts extends React.Component {
 DayPickerKeyboardShortcuts.propTypes = propTypes;
 DayPickerKeyboardShortcuts.defaultProps = defaultProps;
 
-export default withStyles(({ reactDates: { color, zIndex } }) => ({
+export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   DayPickerKeyboardShortcuts_buttonReset: {
     background: 'none',
     border: 0,
@@ -279,6 +276,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     overflow: 'visible',
     padding: 0,
     cursor: 'pointer',
+    fontSize: font.size,
 
     ':active': {
       outline: 'none',
@@ -368,6 +366,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   DayPickerKeyboardShortcuts_list: {
     listStyle: 'none',
     padding: 0,
+    fontSize: font.size,
   },
 
   DayPickerKeyboardShortcuts_close: {