fix: Trade href="#" anchors for stylized buttons (#2074)

Author: cutterbl

src/DateHeader.js

@@ -7,9 +7,14 @@ const DateHeader = ({ label, drilldownView, onDrillDown }) => {
   }
 
   return (
-    <a href="#" onClick={onDrillDown} role="cell">
+    <button
+      type="button"
+      className="rbc-button-link"
+      onClick={onDrillDown}
+      role="cell"
+    >
       {label}
-    </a>
+    </button>
   )
 }
 

src/EventEndingRow.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import clsx from 'clsx'
 import EventRowMixin from './EventRowMixin'
 import { eventLevels } from './utils/eventLevels'
 import range from 'lodash/range'
@@ -78,14 +79,14 @@ class EventEndingRow extends React.Component {
     let count = eventsInSlot(segments, slot)
 
     return count ? (
-      <a
+      <button
+        type="button"
         key={'sm_' + slot}
-        href="#"
-        className={'rbc-show-more'}
+        className={clsx('rbc-button-link', 'rbc-show-more')}
         onClick={e => this.showMore(slot, e)}
       >
         {localizer.messages.showMore(count)}
-      </a>
+      </button>
     ) : (
       false
     )

src/TimeGridHeader.js

@@ -46,12 +46,13 @@ class TimeGridHeader extends React.Component {
           )}
         >
           {drilldownView ? (
-            <a
-              href="#"
+            <button
+              type="button"
+              className="rbc-button-link"
               onClick={e => this.handleHeaderClick(date, drilldownView, e)}
             >
               {header}
-            </a>
+            </button>
           ) : (
             <span>{header}</span>
           )}

src/less/month.less

@@ -1,6 +1,5 @@
 @import './variables.less';
 
-
 .rbc-row {
   display: flex;
   flex-direction: row;
@@ -18,7 +17,6 @@
   background-color: @date-selection-bg-color;
 }
 
-
 .rbc-show-more {
   &:extend(.rbc-ellipsis);
   background-color: rgba(255, 255, 255, 0.3);
@@ -27,6 +25,11 @@
   font-size: 85%;
   height: auto;
   line-height: normal;
+  color: @event-bg;
+  &:hover,
+  &:focus {
+    color: darken(@event-bg, 10%);
+  }
 }
 
 .rbc-month-view {
@@ -73,7 +76,9 @@
   }
 
   > a {
-    &, &:active, &:visited {
+    &,
+    &:active,
+    &:visited {
       color: inherit;
       text-decoration: none;
     }
@@ -106,7 +111,7 @@
   z-index: @event-zindex + 1;
   border: 1px solid #e5e5e5;
   background-color: #fff;
-  box-shadow: 0 5px 15px rgba(0,0,0,.25);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
   padding: 10px;
 
   > * + * {
@@ -116,6 +121,6 @@
 
 .rbc-overlay-header {
   border-bottom: 1px solid #e5e5e5;
-  margin: -10px -10px 5px -10px ;
+  margin: -10px -10px 5px -10px;
   padding: 2px 10px;
 }

src/less/styles.less

@@ -1,7 +1,6 @@
 @import './variables.less';
 @import './reset.less';
 
-
 .rbc-calendar {
   box-sizing: border-box;
   height: 100%;
@@ -67,13 +66,25 @@
   }
 
   & > a {
-    &, &:active, &:visited {
+    &,
+    &:active,
+    &:visited {
       color: inherit;
       text-decoration: none;
     }
   }
 }
 
+.rbc-button-link {
+  color: inherit;
+  background: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  user-select: text;
+}
+
 .rbc-row-content {
   position: relative;
   user-select: none;
@@ -95,16 +106,15 @@
       display: none;
     }
 
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 }
 
 .rbc-today {
   background-color: @today-highlight-bg;
 }
 
-
 @import './toolbar.less';
 @import './event.less';
 @import './month.less';

src/sass/month.scss

@@ -17,7 +17,6 @@
   background-color: $date-selection-bg-color;
 }
 
-
 .rbc-show-more {
   @extend .rbc-ellipsis;
   background-color: rgba(255, 255, 255, 0.3);
@@ -26,6 +25,11 @@
   font-size: 85%;
   height: auto;
   line-height: normal;
+  color: $event-bg;
+  &:hover,
+  &:focus {
+    color: darken($event-bg, 10%);
+  }
 }
 
 .rbc-month-view {
@@ -72,7 +76,9 @@
   }
 
   > a {
-    &, &:active, &:visited {
+    &,
+    &:active,
+    &:visited {
       color: inherit;
       text-decoration: none;
     }
@@ -105,7 +111,7 @@
   z-index: $event-zindex + 1;
   border: 1px solid #e5e5e5;
   background-color: #fff;
-  box-shadow: 0 5px 15px rgba(0,0,0,.25);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
   padding: 10px;
 
   > * + * {
@@ -115,6 +121,6 @@
 
 .rbc-overlay-header {
   border-bottom: 1px solid #e5e5e5;
-  margin: -10px -10px 5px -10px ;
+  margin: -10px -10px 5px -10px;
   padding: 2px 10px;
 }

src/sass/styles.scss

@@ -66,13 +66,25 @@
   }
 
   & > a {
-    &, &:active, &:visited {
+    &,
+    &:active,
+    &:visited {
       color: inherit;
       text-decoration: none;
     }
   }
 }
 
+.rbc-button-link {
+  color: inherit;
+  background: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  user-select: text;
+}
+
 .rbc-row-content {
   position: relative;
   user-select: none;
@@ -94,8 +106,8 @@
       display: none;
     }
 
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 }