Merge pull request #745 from nathanreyes/chore/remove-grid-component

Styling updates w/ Grid component removal

Author: Nathan Reyes

docs/changelog/v2.0.md

@@ -397,5 +397,11 @@ Fixes single use of `highlight.contentStyle` or `highlight.contentClass`
 ### Bug Fixes
 
 * Fix `popover.keepVisibleOnInput`
-* Remove unused code
-* Patch Media Query `addEventListener` for browsers < Safari 14, < Edge 16
+* Patch Media Query `addEventListener` for browsers < Safari 14, < Edge 16
+* Fix focus styles in navigation pane
+
+### Enhancements
+
+* Remove dedicated `Grid` component to reduce DOM elements and package size
+* Remove unnecessary JS/CSS
+* Tighten min pane width to 250px

src/components/Calendar.vue

@@ -4,7 +4,6 @@ import addMonths from 'date-fns/addMonths';
 import addYears from 'date-fns/addYears';
 import Popover from './Popover';
 import PopoverRow from './PopoverRow';
-import Grid from './Grid';
 import CalendarPane from './CalendarPane';
 import CustomTransition from './CustomTransition';
 import SvgIcon from './SvgIcon';
@@ -196,14 +195,11 @@ export default {
                 },
                 [
                   h(
-                    Grid,
+                    'div',
                     {
-                      class: 'grid',
-                      props: {
-                        rows: this.rows,
-                        columns: this.columns,
-                        columnWidth: 'minmax(256px, 1fr)',
-                        disableFocus: true,
+                      class: 'vc-pane-layout',
+                      style: {
+                        gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
                       },
                       attrs: {
                         ...this.$attrs,
@@ -763,6 +759,10 @@ export default {
   }
 }
 
+.vc-pane-layout {
+  display: grid;
+}
+
 .vc-arrow {
   display: flex;
   justify-content: center;

src/components/CalendarDay.vue

@@ -435,9 +435,7 @@ export default {
 <style lang="postcss" scoped>
 .vc-day {
   position: relative;
-  min-height: 28px;
-  width: 100%;
-  height: 100%;
+  min-height: 32px;
   z-index: 1;
   &.is-not-in-month * {
     opacity: 0;
@@ -458,23 +456,20 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
   transform-origin: 50% 50%;
 }
 
 .vc-day-box-left-center {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  height: 100%;
   transform-origin: 0% 50%;
 }
 
 .vc-day-box-right-center {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  height: 100%;
   transform-origin: 100% 50%;
 }
 
@@ -492,7 +487,7 @@ export default {
   font-weight: var(--font-medium);
   width: 28px;
   height: 28px;
-  margin: 1.6px auto;
+  line-height: 28px;
   border-radius: var(--rounded-full);
   user-select: none;
   cursor: pointer;

src/components/CalendarNav.vue

@@ -2,15 +2,14 @@
   <!--Nav panel-->
   <div class="vc-nav-container">
     <!--Nav header-->
-    <grid :columns="3" ref="headerGrid" @rollover="onHeaderRollover">
+    <div class="vc-nav-header">
       <!--Move prev button-->
       <span
         role="button"
         class="vc-nav-arrow is-left"
-        tabindex="-1"
+        tabindex="0"
         @click="movePrev"
         @keydown="e => onSpaceOrEnter(e, movePrev)"
-        ref="prevButton"
       >
         <slot name="nav-left-button">
           <svg-icon name="left-arrow" width="20px" height="24px" />
@@ -24,51 +23,41 @@
         tabindex="0"
         @click="toggleMode"
         @keydown="e => onSpaceOrEnter(e, toggleMode)"
-        ref="titleButton"
       >
         {{ title }}
       </span>
       <!--Move next button-->
       <span
         role="button"
         class="vc-nav-arrow is-right"
-        tabindex="-1"
+        tabindex="0"
         @click="moveNext"
         @keydown="e => onSpaceOrEnter(e, moveNext)"
-        ref="nextButton"
       >
         <slot name="nav-right-button">
           <svg-icon name="right-arrow" width="20px" height="24px" />
         </slot>
       </span>
-    </grid>
+    </div>
     <!--Navigation items-->
-    <grid
-      :rows="4"
-      :columns="3"
-      gap="2px 5px"
-      ref="itemsGrid"
-      @rollover="onItemsRollover"
-    >
+    <div class="vc-nav-items">
       <span
         v-for="item in activeItems"
         :key="item.label"
         role="button"
         :aria-label="item.ariaLabel"
         :class="getItemClasses(item)"
-        :tabindex="item.isDisabled ? undefined : item.isActive ? 0 : -1"
+        :tabindex="item.isDisabled ? undefined : 0"
         @click="item.click"
         @keydown="e => onSpaceOrEnter(e, item.click)"
-        ref="items"
       >
         {{ item.label }}
       </span>
-    </grid>
+    </div>
   </div>
 </template>
 
 <script>
-import Grid from './Grid';
 import SvgIcon from './SvgIcon';
 import { childMixin } from '../utils/mixins';
 import { head, last } from '../utils/_';
@@ -79,7 +68,6 @@ const _yearGroupCount = 12;
 export default {
   name: 'CalendarNav',
   components: {
-    Grid,
     SvgIcon,
   },
   mixins: [childMixin],
@@ -160,18 +148,13 @@ export default {
   created() {
     this.yearIndex = this.year;
   },
-  mounted() {
-    this.$refs.itemsGrid.tryFocus();
-  },
   methods: {
     getItemClasses({ isActive, isCurrent, isDisabled }) {
       const classes = ['vc-nav-item'];
       if (isActive) {
-        classes.push('is-active', 'vc-grid-focus');
+        classes.push('is-active');
       } else if (isCurrent) {
-        classes.push('is-inactive-current');
-      } else {
-        classes.push('is-inactive');
+        classes.push('is-current');
       }
       if (isDisabled) {
         classes.push('is-disabled');
@@ -187,7 +170,6 @@ export default {
     yearClick(year) {
       this.yearIndex = year;
       this.monthMode = true;
-      this.$refs.itemsGrid.tryFocus();
     },
     toggleMode() {
       this.monthMode = !this.monthMode;
@@ -216,40 +198,16 @@ export default {
     moveNextYearGroup() {
       this.yearGroupIndex++;
     },
-    onHeaderRollover(e) {
-      switch (e.direction) {
-        case 'vertical-trailing':
-          this.$refs.itemsGrid.tryFocus();
-          break;
-      }
-      e.handled = true;
-    },
-    onItemsRollover(e) {
-      switch (e.direction) {
-        case 'horizontal-leading': {
-          this.movePrev();
-          break;
-        }
-        case 'horizontal-trailing': {
-          this.moveNext();
-          break;
-        }
-        case 'vertical-leading': {
-          this.$refs.headerGrid.tryFocus();
-          e.handled = true;
-          break;
-        }
-        case 'vertical-trailing': {
-          e.handled = true;
-          break;
-        }
-      }
-    },
   },
 };
 </script>
 
 <style lang="postcss">
+.vc-nav-header {
+  display: flex;
+  justify-content: space-between;
+}
+
 .vc-nav-arrow {
   display: flex;
   justify-content: center;
@@ -282,6 +240,7 @@ export default {
   border-width: 2px;
   border-style: solid;
   border-color: transparent;
+  user-select: none;
   &:hover {
     background-color: var(--gray-900);
   }
@@ -290,6 +249,13 @@ export default {
   }
 }
 
+.vc-nav-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-row-gap: 2px;
+  grid-column-gap: 5px;
+}
+
 .vc-nav-item {
   width: 48px;
   text-align: center;
@@ -301,6 +267,7 @@ export default {
   border-width: 2px;
   border-style: solid;
   border-radius: var(--rounded);
+  user-select: none;
   &:hover {
     color: var(--white);
     background-color: var(--gray-900);
@@ -312,14 +279,10 @@ export default {
   &.is-active {
     color: var(--accent-900);
     background: var(--accent-100);
-    border-color: transparent;
     font-weight: var(--font-bold);
     box-shadow: var(--shadow);
   }
-  &.is-inactive {
-    border-color: transparent;
-  }
-  &:is-inactive-current {
+  &:is-current {
     color: var(--accent-100);
     font-weight: var(--bold);
     border-color: var(--accent-100);
@@ -361,7 +324,7 @@ export default {
       color: var(--white);
       background: var(--accent-500);
     }
-    &.is-inactive-current {
+    &.is-current {
       color: var(--accent-600);
       border-color: var(--accent-500);
     }