fix: Prepend classnames with cf, update changelog

influxdata · Oct 14, 2019 · a34a228 · a34a228
1 parent ea793b4
commit a34a228
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ### 0.0.33 (Unreleased)
 
+- [#328](https://github.com/influxdata/clockface/pull/328): Convert `IndexList` component family to `FunctionComponent` and wrap with `forwardRef`
+- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Prepend `cf-` to all `IndexList` class names
+- [#328](https://github.com/influxdata/clockface/pull/328): Convert `NavMenu` component family to `FunctionComponent` and wrap with `forwardRef`
+- [#328](https://github.com/influxdata/clockface/pull/328): Convert `Tabs` component family to `FunctionComponent` and wrap with `forwardRef`
+- [#328](https://github.com/influxdata/clockface/pull/328): Convert `EmptyState` component family to `FunctionComponent` and wrap with `forwardRef`
+- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Remove `text` and `highlightedText` props from `EmptyStateText` and `EmptyStateSubtext` components in favor of directly passing children
+- [#328](https://github.com/influxdata/clockface/pull/328): Convert `Page` component family to `FunctionComponent` and wrap with `forwardRef`
+- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Export `PageHeaderLeft`, `PageHeaderCenter`, and `PageHeaderRight` directly from `Page` instead of `Page.Header`
 - [#327](https://github.com/influxdata/clockface/pull/327) Fix rendering issue with "always visible" `Popover`s
 - [#324](https://github.com/influxdata/clockface/pull/324): Convert `DraggableResizer` component family to `FunctionComponent` and wrap with `forwardRef`
 - [#320](https://github.com/influxdata/clockface/pull/320): Convert `DapperScrollbars` component to `FunctionComponent` and update `react-scrollbars-custom` dependency to `4.0.20`

diff --git a/src/Components/EmptyState/EmptyState.tsx b/src/Components/EmptyState/EmptyState.tsx
@@ -27,7 +27,7 @@ export const EmptyStateRoot = forwardRef<EmptyStateRef, EmptyStateProps>(
     },
     ref
   ) => {
-    const EmptyStateClass = classnames('cf-empty-state', {
+    const emptyStateClass = classnames('cf-empty-state', {
       [`cf-empty-state--${size}`]: size,
       [`${className}`]: className,
     })
@@ -38,7 +38,7 @@ export const EmptyStateRoot = forwardRef<EmptyStateRef, EmptyStateProps>(
         ref={ref}
         style={style}
         data-testid={testID}
-        className={EmptyStateClass}
+        className={emptyStateClass}
       >
         {children}
       </div>

diff --git a/src/Components/EmptyState/EmptyStateSubText.tsx b/src/Components/EmptyState/EmptyStateSubText.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {forwardRef} from 'react'
+import classnames from 'classnames'
 
 // Types
 import {StandardFunctionProps} from '../../Types'
@@ -10,15 +11,17 @@ export const EmptyStateSubText = forwardRef<
   EmptyStateSubTextRef,
   StandardFunctionProps
 >(({id, children, style, className, testID = 'empty-state--sub-text'}, ref) => {
-  const EmptyStateSubTextClass = `cf-empty-state--sub-text ${className}`
+  const emptyStateSubTextClass = classnames('cf-empty-state--sub-text', {
+    [`${className}`]: className,
+  })
 
   return (
     <p
       id={id}
       ref={ref}
       style={style}
       data-testid={testID}
-      className={EmptyStateSubTextClass}
+      className={emptyStateSubTextClass}
     >
       {children}
     </p>

diff --git a/src/Components/EmptyState/EmptyStateText.tsx b/src/Components/EmptyState/EmptyStateText.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {forwardRef} from 'react'
+import classnames from 'classnames'
 
 // Types
 import {StandardFunctionProps} from '../../Types'
@@ -10,17 +11,17 @@ export const EmptyStateText = forwardRef<
   EmptyStateTextRef,
   StandardFunctionProps
 >(({id, style, className, children, testID = 'empty-state--text'}, ref) => {
-  const EmptyStateText = className
-    ? `cf-empty-state--text ${className}`
-    : 'cf-empty-state--text'
+  const emptyStateTextClass = classnames('cf-empty-state--text', {
+    [`${className}`]: className,
+  })
 
   return (
     <h4
       id={id}
       ref={ref}
       style={style}
       data-testid={testID}
-      className={EmptyStateText}
+      className={emptyStateTextClass}
     >
       {children}
     </h4>

diff --git a/src/Components/IndexList/IndexList.scss b/src/Components/IndexList/IndexList.scss
@@ -5,13 +5,13 @@
   ------------------------------------------------------------------------------
 */
 
-.index-list {
+.cf-index-list {
   border: 0;
   border-collapse: collapse;
   width: 100%;
 }
 
-.index-list--header-cell {
+.cf-index-list--header-cell {
   @include no-user-select();
   text-transform: uppercase;
   letter-spacing: 0.03em;
@@ -23,7 +23,7 @@
   height: 52px;
 }
 
-.index-list--cell {
+.cf-index-list--cell {
   height: calc(100% - #{$cf-border});
   padding: $cf-marg-a + $cf-marg-b;
   background-color: $g3-castle;
@@ -36,60 +36,60 @@
 }
 
 // Alignment modifiers
-.index-list--align-left {
+.cf-index-list--align-left {
   text-align: left;
 }
-.index-list--align-left .index-list--cell {
+.cf-index-list--align-left .cf-index-list--cell {
   justify-content: flex-start;
 }
 
-.index-list--align-right {
+.cf-index-list--align-right {
   text-align: right;
 }
-.index-list--align-right .index-list--cell {
+.cf-index-list--align-right .cf-index-list--cell {
   justify-content: flex-end;
 }
 
-.index-list--align-center {
+.cf-index-list--align-center {
   text-align: center;
 }
-.index-list--align-center .index-list--cell {
+.cf-index-list--align-center .cf-index-list--cell {
   justify-content: center;
 }
 
 // TD Style
-.index-list--row-cell {
+.cf-index-list--row-cell {
   position: relative;
   height: 52px;
 
-  &:first-child .index-list--cell {
+  &:first-child .cf-index-list--cell {
     border-radius: $cf-radius 0 0 $cf-radius;
   }
 
-  &:last-child .index-list--cell {
+  &:last-child .cf-index-list--cell {
     border-radius: 0 $cf-radius $cf-radius 0;
   }
 }
 
 // Row hover State
-.index-list--row:hover .index-list--cell {
+.cf-index-list--row:hover .cf-index-list--cell {
   background-color: $g4-onyx;
   color: $g18-cloud;
 }
 
 // Show cell contents on row hover
-.index-list--show-hover .index-list--cell > * {
+.cf-index-list--show-hover .cf-index-list--cell > * {
   transition: opacity 0.25s ease;
   opacity: 0;
 }
-.index-list--row:hover .index-list--show-hover .index-list--cell > * {
+.cf-index-list--row:hover .cf-index-list--show-hover .cf-index-list--cell > * {
   opacity: 1;
 }
 
 // Row Disabled State
-.index-list--row.index-list--row-disabled
-  .index-list--row-cell
-  .index-list--cell {
+.cf-index-list--row.cf-index-list--row-disabled
+  .cf-index-list--row-cell
+  .cf-index-list--cell {
   background-color: rgba($g3-castle, 0.5);
   color: $g9-mountain;
   font-style: italic;
@@ -104,9 +104,9 @@
 }
 
 // Row Disabled Hover State
-.index-list--row.index-list--row-disabled:hover
-  .index-list--row-cell
-  .index-list--cell {
+.cf-index-list--row.cf-index-list--row-disabled:hover
+  .cf-index-list--row-cell
+  .cf-index-list--cell {
   background-color: rgba($g3-castle, 0.7);
   color: $g15-platinum;
 
@@ -119,7 +119,7 @@
 }
 
 // Empty state
-.index-list--empty-cell {
+.cf-index-list--empty-cell {
   background-color: rgba($g3-castle, 0.5);
   border-radius: $cf-radius;
   display: flex;
@@ -133,24 +133,24 @@
   ------------------------------------------------------------------------------
 */
 
-.tabs--contents,
+.cf-tabs--contents,
 // TODO: Remove this .tabbed-page rule when the component is phased out
-.tabbed-page {
-  .index-list--cell {
+.cf-tabbed-page {
+  .cf-index-list--cell {
     background-color: $g4-onyx;
   }
-  .index-list--row:hover .index-list--cell {
+  .cf-index-list--row:hover .cf-index-list--cell {
     background-color: $g5-pepper;
   }
-  .index-list--row-cell.index-list--row-disabled .index-list--cell {
+  .cf-index-list--row-cell.cf-index-list--row-disabled .cf-index-list--cell {
     background-color: rgba($g4-onyx, 0.5);
   }
-  .index-list--row:hover
-    .index-list--row-cell.index-list--row-disabled
-    .index-list--cell {
+  .cf-index-list--row:hover
+    .cf-index-list--row-cell.cf-index-list--row-disabled
+    .cf-index-list--cell {
     background-color: rgba($g4-onyx, 0.7);
   }
-  .index-list--empty-cell {
+  .cf-index-list--empty-cell {
     background-color: rgba($g4-onyx, 0.5);
   }
 }
@@ -160,7 +160,7 @@
   ------------------------------------------------------------------------------
 */
 
-.index-list--sort-arrow {
+.cf-index-list--sort-arrow {
   display: inline-block;
   vertical-align: middle;
   width: 20px;
@@ -179,7 +179,7 @@
   }
 }
 
-.index-list--header-cell.index-list--sortable {
+.cf-index-list--header-cell.cf-index-list--sortable {
   transition: color 0.25s ease;
 
   &:hover {
@@ -188,17 +188,17 @@
   }
 }
 
-.index-list--header-cell.index-list--sort-ascending,
-.index-list--header-cell.index-list--sort-descending {
+.cf-index-list--header-cell.cf-index-list--sort-ascending,
+.cf-index-list--header-cell.cf-index-list--sort-descending {
   color: $g17-whisper;
 }
 
-.index-list--sort-ascending .index-list--sort-arrow {
+.cf-index-list--sort-ascending .cf-index-list--sort-arrow {
   opacity: 1;
   transform: rotate(180deg);
 }
 
-.index-list--sort-descending .index-list--sort-arrow {
+.cf-index-list--sort-descending .cf-index-list--sort-arrow {
   opacity: 1;
   transform: rotate(00deg);
 }
@@ -208,10 +208,10 @@
   ------------------------------------------------------------------------------
 */
 
-.index-list--labels {
+.cf-index-list--labels {
   margin-left: $cf-marg-b;
 }
 
-.index-list--row-cell .index-list--cell a {
+.cf-index-list--row-cell .cf-index-list--cell a {
   white-space: nowrap;
 }
diff --git a/src/Components/IndexList/IndexList.tsx b/src/Components/IndexList/IndexList.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {forwardRef} from 'react'
+import classnames from 'classnames'
 
 // Types
 import {StandardFunctionProps} from '../../Types'
@@ -13,12 +14,14 @@ export type IndexListRef = HTMLTableElement
 
 export const IndexListRoot = forwardRef<IndexListRef, IndexListProps>(
   ({children, className, id, style, testID = 'index-list'}, ref) => {
-    const IndexListClass = className ? `index-list ${className}` : 'index-list'
+    const indexListClass = classnames('cf-index-list', {
+      [`${className}`]: className,
+    })
 
     return (
       <table
         ref={ref}
-        className={IndexListClass}
+        className={indexListClass}
         data-testid={testID}
         id={id}
         style={style}

diff --git a/src/Components/IndexList/IndexListBody.tsx b/src/Components/IndexList/IndexListBody.tsx
@@ -3,6 +3,7 @@ import React, {forwardRef} from 'react'
 
 // Types
 import {StandardFunctionProps} from '../../Types'
+import classnames from 'classnames'
 
 export interface IndexListBodyProps extends StandardFunctionProps {
   /** Rendered when no children are passed in */
@@ -26,14 +27,14 @@ export const IndexListBody = forwardRef<IndexListBodyRef, IndexListBodyProps>(
     },
     ref
   ) => {
-    const IndexListBodyClass = className
-      ? `index-list--body ${className}`
-      : 'index-list--body'
+    const indexListBodyClass = classnames('cf-index-list--body', {
+      [`${className}`]: className,
+    })
 
     if (React.Children.count(children)) {
       return (
         <tbody
-          className={IndexListBodyClass}
+          className={indexListBodyClass}
           data-testid={testID}
           id={id}
           style={style}
@@ -46,12 +47,15 @@ export const IndexListBody = forwardRef<IndexListBodyRef, IndexListBodyProps>(
     return (
       <tbody
         ref={ref}
-        className="index-list--empty"
+        className="cf-index-list--empty"
         data-testid={`${testID} empty`}
       >
-        <tr className="index-list--empty-row">
+        <tr className="cf-index-list--empty-row">
           <td colSpan={columnCount}>
-            <div className="index-list--empty-cell" data-testid="empty-state">
+            <div
+              className="cf-index-list--empty-cell"
+              data-testid="empty-state"
+            >
               {emptyState}
             </div>
           </td>

diff --git a/src/Components/IndexList/IndexListHeader.tsx b/src/Components/IndexList/IndexListHeader.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {forwardRef} from 'react'
+import classnames from 'classnames'
 
 // Types
 import {StandardFunctionProps} from '../../Types'
@@ -12,17 +13,17 @@ export const IndexListHeader = forwardRef<
   IndexListHeaderRef,
   IndexListHeaderProps
 >(({className, children, id, style, testID = 'index-list--header'}, ref) => {
-  const IndexListHeaderClass = className
-    ? `index-list--header ${className}`
-    : 'index-list--header'
+  const indexListHeaderClass = classnames('cf-index-list--header', {
+    [`${className}`]: className,
+  })
 
   return (
     <thead
       id={id}
       ref={ref}
       style={style}
       data-testid={testID}
-      className={IndexListHeaderClass}
+      className={indexListHeaderClass}
     >
       <tr>{children}</tr>
     </thead>