lots of classname changes

packages-premium

@@ -1 +1 @@
-Subproject commit d953ecbb278beb717d7fb7811f40c975bbea7a3a
+Subproject commit 627050a9cb44ce1e478aad1b9fbea1efb7b268dc

packages/__tests__/src/lib/wrappers/CalendarWrapper.ts

@@ -43,7 +43,7 @@ export default class CalendarWrapper {
 
 
   getViewContainerEl() {
-    return this.calendar.el.querySelector('.fc-view-container') as HTMLElement
+    return this.calendar.el.querySelector('.fc-view-harness') as HTMLElement
   }
 
 

packages/__tests__/src/lib/wrappers/DayGridViewWrapper.ts

@@ -6,23 +6,23 @@ import DayHeaderWrapper from './DayHeaderWrapper'
 export default class DayGridViewWrapper extends ViewWrapper {
 
   constructor(calendar: Calendar) {
-    super(calendar, 'fc-daygrid-view')
+    super(calendar, 'fc-daygrid')
   }
 
 
   get header() {
-    let headerEl = this.el.querySelector('.fc-head .fc-scroller > table') as HTMLElement
+    let headerEl = this.el.querySelector('.fc-col-header') as HTMLElement
     return headerEl ? new DayHeaderWrapper(headerEl) : null
   }
 
 
   get dayGrid() {
-    return new DayGridWrapper(this.el.querySelector('.fc-day-grid'))
+    return new DayGridWrapper(this.el.querySelector('.fc-daygrid-body'))
   }
 
 
   getScrollerEl() {
-    return this.el.querySelector('.scrollgrid .fc-body:last-child .fc-scroller')
+    return this.el.querySelector('.fc-daygrid-body').parentElement // TODO: use closest
   }
 
 }

packages/__tests__/src/lib/wrappers/DayHeaderWrapper.ts

@@ -21,18 +21,18 @@ export default class DayHeaderWrapper {
 
 
   getCellEls() {
-    return findElements(this.el, '.fc-day-header')
+    return findElements(this.el, '.fc-col-header-cell')
   }
 
 
   getCellEl(dateOrDow) {
     if (typeof dateOrDow === 'number') {
-      return this.el.querySelector(`.fc-day-header.${CalendarWrapper.DOW_CLASSNAMES[dateOrDow]}`)
+      return this.el.querySelector(`.fc-col-header-cell.${CalendarWrapper.DOW_CLASSNAMES[dateOrDow]}`)
     } else {
       if (typeof dateOrDow === 'string') {
         dateOrDow = parseUtcDate(dateOrDow)
       }
-      return this.el.querySelector(`.fc-day-header[data-date="${formatIsoDay(dateOrDow)}"]`)
+      return this.el.querySelector(`.fc-col-header-cell[data-date="${formatIsoDay(dateOrDow)}"]`)
     }
   }
 
@@ -77,7 +77,7 @@ export default class DayHeaderWrapper {
 
 
   getNavLinkEls() {
-    return findElements(this.el, '.fc-day-header[data-date] a')
+    return findElements(this.el, '.fc-col-header-cell[data-date] a')
   }
 
 
@@ -85,7 +85,7 @@ export default class DayHeaderWrapper {
     if (typeof dayDate === 'string') {
       dayDate = new Date(dayDate)
     }
-    return this.el.querySelector('.fc-day-header[data-date="' + formatIsoDay(dayDate) + '"] a')
+    return this.el.querySelector('.fc-col-header-cell[data-date="' + formatIsoDay(dayDate) + '"] a')
   }
 
 

packages/__tests__/src/lib/wrappers/TimeGridViewWrapper.ts

@@ -6,29 +6,29 @@ import DayHeaderWrapper from './DayHeaderWrapper'
 export default class TimeGridViewWrapper extends ViewWrapper {
 
   constructor(calendar) {
-    super(calendar, 'fc-timegrid-view')
+    super(calendar, 'fc-timegrid')
   }
 
 
   get header() {
-    let headerEl = this.el.querySelector('.fc-head .fc-scroller > table') as HTMLElement
+    let headerEl = this.el.querySelector('.fc-col-header') as HTMLElement
     return headerEl ? new DayHeaderWrapper(headerEl) : null
   }
 
 
   get timeGrid() {
-    return new TimeGridWrapper(this.el.querySelector('.fc-time-grid'))
+    return new TimeGridWrapper(this.el.querySelector('.fc-timegrid-body'))
   }
 
 
   get dayGrid() { // the all-day area
-    let dayGridEl = this.el.querySelector('.fc-day-grid') as HTMLElement
+    let dayGridEl = this.el.querySelector('.fc-daygrid-body') as HTMLElement
     return dayGridEl ? new DayGridWrapper(dayGridEl) : null
   }
 
 
   getScrollerEl() {
-    return this.el.querySelector('.scrollgrid .fc-body:last-child .fc-scroller')
+    return this.el.querySelector('.fc-daygrid-body').parentElement // TODO: use closest
   }
 
 

packages/core/src/Toolbar.tsx

@@ -63,7 +63,7 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
     let { theme } = this.context
 
     return (
-      <div class={'fc-' + props.position}>
+      <div class={'fc-toolbar-' + props.position}>
         {props.widgetGroups.map((widgetGroup: ToolbarWidget[]) => {
           let children = []
           let isOnlyButtons = true

packages/core/src/ViewContainer.tsx

@@ -17,12 +17,12 @@ export interface ViewContainerProps {
 export default class ViewContainer extends BaseComponent<ViewContainerProps> {
 
   render(props: ViewContainerProps) {
-    let classNames = [ 'fc-view-container' ]
+    let classNames = [ 'fc-view-harness' ]
     let height: CssDimValue = ''
     let paddingBottom: CssDimValue = ''
 
     if (props.aspectRatio || props.vGrow || props.height) {
-      classNames.push('fc-view-container--absview')
+      classNames.push('fc-view-harness-ratio')
     }
 
     if (props.aspectRatio) {

packages/core/src/common/TableDateCell.tsx

@@ -45,7 +45,7 @@ export default class TableDateCell extends BaseComponent<TableDateCellProps> { /
       ? getDateMeta(date, props.todayRange, null, props.dateProfile)
       : getDateMeta(date)
 
-    let classNames = [ 'fc-day-header' ].concat(getDayClassNames(dayMeta, context.theme))
+    let classNames = [ 'fc-col-header-cell' ].concat(getDayClassNames(dayMeta, context.theme))
     let text = dateEnv.format(date, props.dayLabelFormat)
 
     // if colCnt is 1, we are already in a day-view and don't need a navlink

packages/core/src/common/ViewRoot.tsx

@@ -17,7 +17,7 @@ export const ViewRoot = (props: ViewRootProps) => (
       <RenderHook name='view' mountProps={{ view: context.view }} dynamicProps={{}} elRef={props.elRef}>
         {(rootElRef, customClassNames) => props.children(
           rootElRef,
-          [ 'fc-view', 'fc-' + props.viewSpec.type + '-view' ].concat(customClassNames)
+          [ 'fc-view', 'fc-view-' + props.viewSpec.type ].concat(customClassNames)
         )}
       </RenderHook>
     )}

packages/core/src/main.ts

@@ -175,7 +175,7 @@ export { default as SimpleScrollGrid, SimpleScrollGridSection } from './scrollgr
 export {
   CssDimValue, ScrollerLike, SectionConfig, ColProps, ChunkConfig, hasShrinkWidth, renderMicroColGroup,
   getScrollGridClassNames, getSectionClassNames, getDoesSectionVGrow, getAllowYScrolling, renderChunkContent, computeShrinkWidth,
-  getChunkClassNames, ChunkContentCallbackArgs,
+  ChunkContentCallbackArgs,
   CLIENT_HEIGHT_WIGGLE,
   sanitizeShrinkWidth,
   ChunkConfigRowContent, ChunkConfigContent,

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -5,7 +5,7 @@ import Scroller, { OverflowValue } from './Scroller'
 import RefMap from '../util/RefMap'
 import {
   ColProps, SectionConfig, renderMicroColGroup, computeShrinkWidth, getScrollGridClassNames, getSectionClassNames, getAllowYScrolling,
-  renderChunkContent, getDoesSectionVGrow, ChunkConfig, hasShrinkWidth, CssDimValue, getChunkClassNames,
+  renderChunkContent, getDoesSectionVGrow, ChunkConfig, hasShrinkWidth, CssDimValue,
   isColPropsEqual
 } from './util'
 import { memoize } from '../util/memoize'
@@ -60,11 +60,11 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
 
     let classNames = getScrollGridClassNames(props.vGrow, context)
     if (props.forPrint) { // temporary
-      classNames.push('scrollgrid--forprint')
+      classNames.push('fc-scrollgrid--forprint')
     }
 
     if (!getCanVGrowWithinCell()) {
-      classNames.push('scrollgrid-vgrow-cell-hack')
+      classNames.push('fc-scrollgrid-vgrow-cell-hack')
     }
 
     return (
@@ -117,8 +117,8 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
     })
 
     return (
-      <td class={getChunkClassNames(sectionConfig, chunkConfig, this.context)} ref={chunkConfig.elRef}>
-        <div class={'scrollerharness' + (vGrow ? ' vgrow' : '')}>
+      <td ref={chunkConfig.elRef}>
+        <div class={'fc-scroller-harness' + (vGrow ? ' vgrow' : '')}>
           <Scroller
             ref={this.scrollerRefs.createRef(sectionI)}
             elRef={this.scrollerElRefs.createRef(sectionI)}

packages/core/src/scrollgrid/util.tsx

@@ -34,7 +34,7 @@ export interface ChunkConfig {
   rowContent?: ChunkConfigRowContent
   scrollerElRef?: Ref<HTMLDivElement>
   elRef?: Ref<HTMLTableCellElement>
-  className?: string // on the wrapping chunk <td>. impossible in print view
+  tableClassName?: string
 }
 
 export interface ChunkContentCallbackArgs { // TODO: util for wrapping tables!?
@@ -81,13 +81,17 @@ export function getAllowYScrolling(props: { vGrow?: boolean }, sectionConfig: Se
 }
 
 
+// TODO: ONLY use `arg`. force out internal function to use same API
 export function renderChunkContent(sectionConfig: SectionConfig, chunkConfig: ChunkConfig, arg: ChunkContentCallbackArgs) {
   let vGrowRows = sectionConfig.vGrowRows
 
   let content: VNode = typeof chunkConfig.content === 'function' ?
     chunkConfig.content(arg) :
     h('table', {
-      className: sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : '',
+      className: [
+        chunkConfig.tableClassName,
+        sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : ''
+      ].join(' '),
       style: {
         minWidth: arg.tableMinWidth, // because colMinWidths arent enough
         width: arg.clientWidth,
@@ -154,7 +158,7 @@ export function hasShrinkWidth(cols: ColProps[]) {
 
 export function getScrollGridClassNames(vGrow: boolean, context: ComponentContext) {
   let classNames = [
-    'scrollgrid',
+    'fc-scrollgrid',
     context.theme.getClass('table')
   ]
 
@@ -168,8 +172,7 @@ export function getScrollGridClassNames(vGrow: boolean, context: ComponentContex
 
 export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGrow: boolean) {
   let classNames = [
-    'scrollgrid__section',
-    'fc-' + sectionConfig.type, // fc-head, fc-body, fc-foot
+    'fc-scrollgrid-section',
     sectionConfig.className
   ]
 
@@ -181,12 +184,6 @@ export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGr
 }
 
 
-// need a method for this still?
-export function getChunkClassNames(sectionConfig: SectionConfig, chunkConfig: ChunkConfig, context: ComponentContext) {
-  return chunkConfig.className
-}
-
-
 // IE sometimes reports a certain clientHeight, but when inner content is set to that height,
 // some sort of rounding error causes it to spill out and create unnecessary scrollbars. Compensate.
 export const CLIENT_HEIGHT_WIGGLE = /Trident/.test(navigator.userAgent) ? 1 : 0

packages/core/src/styles/_popover.scss

@@ -5,7 +5,7 @@
   box-shadow: 0 2px 6px rgba(0,0,0,.15);
 }
 
-.fc-popover-header { /* TODO: be more consistent with fc-head/fc-body */
+.fc-popover-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

packages/core/src/styles/_scrollgrid.scss

@@ -1,5 +1,5 @@
 
-.scrollgrid {
+.fc-scrollgrid {
 
   &, table { // root AND inner tables
     width: 100%; // because tables don't normally do this
@@ -15,7 +15,7 @@
   }
 }
 
-.scrollgrid__section { // a <tr>
+.fc-scrollgrid-section { // a <tr>
   height: 0;
 
   > td {
@@ -23,7 +23,7 @@
   }
 }
 
-.scrollgrid__section.vgrow {
+.fc-scrollgrid-section.vgrow {
   height: auto; // undo 1px height. will cancel height:100% also
 
   > td {
@@ -31,12 +31,23 @@
   }
 }
 
-// poor man's clippedscroller
-// needed to make give precedence to section growing before contents within scroller
-.scrollerharness.vgrow {
+
+
+
+.fc-scroller-harness {
   position: relative;
+  overflow: hidden;
+  direction: ltr; // hack for chrome doing the scroller's right/left wrong for rtl. undone below...
+}
+
+.fc-rtl .fc-scroller-harness > .fc-scroller { // undo hack
+  direction: rtl;
+}
 
-  > .fc-scroller {
+.fc-scroller-harness.vgrow {
+  position: relative;
+
+  > .fc-scroller { // redundant. set inline too
     position: absolute;
     top: 0;
     right: 0;
@@ -45,15 +56,7 @@
   }
 }
 
-.clippedscroller {
-  position: relative;
-  overflow: hidden;
-  direction: ltr; // hack for chrome doing the scroller's right/left wrong for rtl. undone below...
-}
 
-.fc-rtl .clippedscroller > .fc-scroller { // undo hack
-  direction: rtl;
-}
 
 
 .fc-scroller {
@@ -67,11 +70,11 @@
 }
 
 
-.scrollgrid.scrollgrid--forprint { // will eventually have precedence of `.fc-print .scrollgrid`
+.fc-scrollgrid.fc-scrollgrid--forprint { // will eventually have precedence of `.fc-print .fc-scrollgrid`
   table-layout: auto;
 }
 
-.scrollgrid--forprint {
+.fc-scrollgrid--forprint {
 
   .cell-content-wrap {
     height: auto !important; // override inline
@@ -87,7 +90,7 @@
 }
 
 // for FF, which doesn't expand a 100% div within a table cell. use absolute positioning
-.scrollgrid-vgrow-cell-hack {
+.fc-scrollgrid-vgrow-cell-hack {
   td, th {
     position: relative;
 
@@ -103,6 +106,6 @@
 }
 
 // for most browsers, if a height isn't set on the table, can't do vgrow within cells
-.scrollgrid__section table {
+.fc-scrollgrid-section table {
   height: 1px; // serves as a min-height. harmless
 }

packages/core/src/styles/_view-structure.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
 }
 
-.fc-view-container {
+.fc-view-harness {
   flex-grow: 1;
   position: relative;
 
@@ -16,7 +16,7 @@
   }
 }
 
-.fc-view-container--absview > .fc-view {
+.fc-view-harness-ratio > .fc-view {
   position: absolute;
   top: 0;
   right: 0;

packages/daygrid/src/Table.tsx

@@ -80,9 +80,9 @@ export default class Table extends DateComponent<TableProps, TableState> {
     let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt)
     let buildMoreLinkText = this.buildBuildMoreLinkText(context.options.moreLinkText)
 
-    let classNames = [ 'fc-daygrid' ]
+    let classNames = [ 'fc-daygrid-body' ]
     if (props.vGrowRows && props.eventLimit === true) {
-      classNames.push('fc-daygrid-balanced')
+      classNames.push('fc-daygrid-body-balanced')
     }
 
     return (

packages/daygrid/src/TableView.tsx

@@ -34,6 +34,7 @@ export default abstract class TableView<State={}> extends View<State> {
         type: 'head',
         chunk: {
           elRef: this.headerElRef,
+          tableClassName: 'fc-col-header',
           rowContent: headerRowContent
         }
       })
@@ -50,7 +51,7 @@ export default abstract class TableView<State={}> extends View<State> {
     return (
       <ViewRoot viewSpec={props.viewSpec}>
         {(rootElRef, classNames) => (
-          <div ref={rootElRef} class={[ 'fc-daygrid-view' ].concat(classNames).join(' ')}>
+          <div ref={rootElRef} class={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
             <SimpleScrollGrid
               vGrow={!props.isHeightAuto}
               forPrint={props.forPrint}
@@ -100,7 +101,7 @@ export default abstract class TableView<State={}> extends View<State> {
     return (
       <ViewRoot viewSpec={props.viewSpec}>
         {(rootElRef, classNames) => (
-          <div ref={rootElRef} class={[ 'fc-daygrid-view' ].concat(classNames).join(' ')}>
+          <div ref={rootElRef} class={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
             <ScrollGrid
               vGrow={!props.isHeightAuto}
               forPrint={props.forPrint}

packages/daygrid/src/styles/_daygrid.scss

@@ -1,5 +1,5 @@
 
-.fc-daygrid {
+.fc-daygrid-body {
   position: relative;
   z-index: 1;
 }
@@ -10,7 +10,7 @@
   padding-top: 4px;
 }
 
-.scrollgrid-vgrow-cell-hack .fc-daygrid-day-inner {
+.fc-scrollgrid-vgrow-cell-hack .fc-daygrid-day-inner {
   position: static;
 }
 
@@ -32,7 +32,7 @@
   min-height: 3em;
 }
 
-.fc-daygrid-balanced .fc-daygrid-day-events {
+.fc-daygrid-body-balanced .fc-daygrid-day-events {
   position: absolute;
   left: 0;
   right: 0;

packages/timegrid/src/TimeCols.tsx

@@ -69,7 +69,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
     let { dateProfile } = props
 
     return (
-      <div class='fc-timegrid' ref={props.rootElRef} style={{
+      <div class='fc-timegrid-body' ref={props.rootElRef} style={{
         // these props are important to give this wrapper correct dimensions for interactions
         // TODO: if we set it here, can we avoid giving to inner tables?
         width: props.clientWidth,

packages/timegrid/src/TimeColsView.tsx

@@ -51,6 +51,7 @@ export default abstract class TimeColsView extends View {
         type: 'head',
         chunk: {
           elRef: this.headerElRef,
+          tableClassName: 'fc-col-header',
           rowContent: headerRowContent
         }
       })
@@ -68,7 +69,7 @@ export default abstract class TimeColsView extends View {
         outerContent: (
           <tr>
             <td
-              class={'fc-timegrid-view-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              class={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )
@@ -89,7 +90,7 @@ export default abstract class TimeColsView extends View {
     return (
       <ViewRoot viewSpec={props.viewSpec} elRef={this.rootElRef}>
         {(rootElRef, classNames) => (
-          <div class={[ 'fc-timegrid-view' ].concat(classNames).join(' ')} ref={rootElRef}>
+          <div class={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
             <SimpleScrollGrid
               forPrint={props.forPrint}
               vGrow={!props.isHeightAuto}
@@ -156,7 +157,7 @@ export default abstract class TimeColsView extends View {
           <tr>
             <td
               colSpan={2}
-              class={'fc-timegrid-view-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              class={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )
@@ -182,7 +183,7 @@ export default abstract class TimeColsView extends View {
     return (
       <ViewRoot viewSpec={props.viewSpec} elRef={this.rootElRef}>
         {(rootElRef, classNames) => (
-          <div class={[ 'fc-timegrid-view' ].concat(classNames).join(' ')} ref={rootElRef}>
+          <div class={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
             <ScrollGrid
               forPrint={props.forPrint}
               vGrow={!props.isHeightAuto}
@@ -235,12 +236,12 @@ export default abstract class TimeColsView extends View {
         <WeekNumberRoot date={range.start} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
           {(rootElRef, classNames, innerElRef, innerContent) => (
             <th ref={rootElRef} class={[
-              'fc-timegrid-view-axis',
+              'fc-timegrid-axis',
               'fc-scrollgrid-shrink',
               'fc-week-number' // TODO: make part of WeekNumberRoot
             ].concat(classNames).join(' ')}>
-              <div class='fc-timegrid-view-axis-frame fc-scrollgrid-shrink-frame'>
-                <a class='fc-timegrid-view-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
+              <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame'>
+                <a class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
                   {innerContent}
                 </a>
               </div>
@@ -251,7 +252,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return (
-      <th class='fc-timegrid-view-axis'></th>
+      <th class='fc-timegrid-axis'></th>
     )
   }
 
@@ -269,12 +270,12 @@ export default abstract class TimeColsView extends View {
       <RenderHook name='allDay' mountProps={innerProps} dynamicProps={innerProps}>
         {(rootElRef, classNames, innerElRef, innerContent) => (
           <td ref={rootElRef} className={[
-            'fc-timegrid-view-axis',
+            'fc-timegrid-axis',
             'fc-scrollgrid-shrink',
             'fc-allday' // TODO: have RenderHook supply this?
           ].concat(classNames).join(' ')}>
-            <div class='fc-timegrid-view-axis-frame fc-scrollgrid-shrink-frame' style={{ height: rowHeight }}>
-              <span class='fc-timegrid-view-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
+            <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' style={{ height: rowHeight }}>
+              <span class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                 {innerContent}
               </span>
             </div>

packages/timegrid/src/styles/_time-grid.scss

@@ -1,5 +1,5 @@
 
-.fc-timegrid {
+.fc-timegrid-body {
   position: relative; // for housing skeletons
   z-index: 1; // because containers z-index'd children
   min-height: 100%; // fill height always ... even when slat table doesn't grow
@@ -19,7 +19,7 @@
   bottom: 0;
 
   & > table {
-    height: 100%;
+    height: 100% !important;
   }
 }
 
@@ -50,7 +50,7 @@
   border-top-style: dotted !important;
 }
 
-.fc .fc-timegrid-view-axis-frame {
+.fc .fc-timegrid-axis-frame {
   display: flex;
   align-items: center;
 }
@@ -59,7 +59,7 @@
   vertical-align: middle;
 }
 
-.fc-timegrid-view-axis-cushion,
+.fc-timegrid-axis-cushion,
 .fc-timegrid-slot-axis-cushion {
   white-space: nowrap;
   padding: 0 4px;

packages/timegrid/src/styles/_view.scss

@@ -1,5 +1,5 @@
 
 // high precedence to overcome theme
-.fc .fc-timegrid-view-divider {
+.fc .fc-timegrid-divider {
   padding: 0 0 2px;
 }