diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bac69b9..3f4551f1 100644 --- 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 index df2e1dc3..99bde9f1 100644 --- a/src/Components/EmptyState/EmptyState.tsx +++ b/src/Components/EmptyState/EmptyState.tsx @@ -27,7 +27,7 @@ export const EmptyStateRoot = forwardRef( }, 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( ref={ref} style={style} data-testid={testID} - className={EmptyStateClass} + className={emptyStateClass} > {children} diff --git a/src/Components/EmptyState/EmptyStateSubText.tsx b/src/Components/EmptyState/EmptyStateSubText.tsx index 0761fc32..6689641a 100644 --- 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,7 +11,9 @@ 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 (

{children}

diff --git a/src/Components/EmptyState/EmptyStateText.tsx b/src/Components/EmptyState/EmptyStateText.tsx index dde0b472..3c034dec 100644 --- 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,9 +11,9 @@ 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 (

{children}

diff --git a/src/Components/IndexList/IndexList.scss b/src/Components/IndexList/IndexList.scss index 3e06809b..b20a8185 100644 --- 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 index 759ced03..5041221c 100644 --- 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( ({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 ( ( }, 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 ( ( return ( - + diff --git a/src/Components/IndexList/IndexListHeader.tsx b/src/Components/IndexList/IndexListHeader.tsx index 7717ca23..cc52b8ee 100644 --- 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,9 +13,9 @@ 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 ( {children} diff --git a/src/Components/IndexList/IndexListHeaderCell.tsx b/src/Components/IndexList/IndexListHeaderCell.tsx index db4c3242..40be9772 100644 --- a/src/Components/IndexList/IndexListHeaderCell.tsx +++ b/src/Components/IndexList/IndexListHeaderCell.tsx @@ -40,13 +40,13 @@ export const IndexListHeaderCell = forwardRef< }, ref ) => { - const IndexListHeaderCellClass = classnames('index-list--header-cell', { - 'index-list--align-left': alignment === Alignment.Left, - 'index-list--align-center': alignment === Alignment.Center, - 'index-list--align-right': alignment === Alignment.Right, - 'index-list--sortable': isSortable(sort), - 'index-list--sort-descending': sort === Sort.Descending, - 'index-list--sort-ascending': sort === Sort.Ascending, + const IndexListHeaderCellClass = classnames('cf-index-list--header-cell', { + 'cf-index-list--align-left': alignment === Alignment.Left, + 'cf-index-list--align-center': alignment === Alignment.Center, + 'cf-index-list--align-right': alignment === Alignment.Right, + 'cf-index-list--sortable': isSortable(sort), + 'cf-index-list--sort-descending': sort === Sort.Descending, + 'cf-index-list--sort-ascending': sort === Sort.Ascending, }) const handleClick = (): void => { @@ -84,7 +84,7 @@ IndexListHeaderCell.displayName = 'IndexListHeaderCell' const SortIndicator: FunctionComponent<{sortable: boolean}> = ({sortable}) => { if (sortable) { return ( - + ) diff --git a/src/Components/IndexList/IndexListRow.tsx b/src/Components/IndexList/IndexListRow.tsx index d24ac425..8f9451b6 100644 --- a/src/Components/IndexList/IndexListRow.tsx +++ b/src/Components/IndexList/IndexListRow.tsx @@ -17,9 +17,9 @@ export const IndexListRow = forwardRef( {children, id, style, className, disabled = false, testID = 'table-row'}, ref ) => { - const IndexListRowClass = classnames('index-list--row', { - 'index-list--row-disabled': disabled, - [`${className}`]: !!className, + const IndexListRowClass = classnames('cf-index-list--row', { + 'cf-index-list--row-disabled': disabled, + [`${className}`]: className, }) return ( diff --git a/src/Components/IndexList/IndexListRowCell.tsx b/src/Components/IndexList/IndexListRowCell.tsx index ca69a2bc..9b31270e 100644 --- a/src/Components/IndexList/IndexListRowCell.tsx +++ b/src/Components/IndexList/IndexListRowCell.tsx @@ -30,11 +30,11 @@ export const IndexListRowCell = forwardRef< }, ref ) => { - const IndexListRowCellClass = classnames('index-list--row-cell', { - 'index-list--show-hover': revealOnHover, - 'index-list--align-left': alignment === Alignment.Left, - 'index-list--align-center': alignment === Alignment.Center, - 'index-list--align-right': alignment === Alignment.Right, + const IndexListRowCellClass = classnames('cf-index-list--row-cell', { + 'cf-index-list--show-hover': revealOnHover, + 'cf-index-list--align-left': alignment === Alignment.Left, + 'cf-index-list--align-center': alignment === Alignment.Center, + 'cf-index-list--align-right': alignment === Alignment.Right, [`${className}`]: className, }) @@ -44,7 +44,7 @@ export const IndexListRowCell = forwardRef< id={id} style={style} data-testid={testID} - className="index-list--cell" + className="cf-index-list--cell" > {children} diff --git a/src/Components/NavMenu/NavMenu.tsx b/src/Components/NavMenu/NavMenu.tsx index 3e0c9909..b73d1e0c 100644 --- a/src/Components/NavMenu/NavMenu.tsx +++ b/src/Components/NavMenu/NavMenu.tsx @@ -17,15 +17,14 @@ export const NavMenuRoot = forwardRef( ({id, style, children, className, testID = 'nav-menu'}, ref) => { const [menuVisible, setMenuVisible] = useState(false) - const NavMenuRootClass = classnames('cf-nav', { + const navMenuRootClass = classnames('cf-nav', { 'cf-nav__expanded': menuVisible, [`${className}`]: className, }) - const toggleClassName = (): string => { - return classnames('cf-nav--toggle', { - 'cf-nav--toggle__expanded': menuVisible, - }) - } + + const toggleClassName = classnames('cf-nav--toggle', { + 'cf-nav--toggle__expanded': menuVisible, + }) const handleToggleMenu = (): void => { setMenuVisible(!menuVisible) @@ -33,7 +32,7 @@ export const NavMenuRoot = forwardRef( return ( <> -
+
@@ -45,7 +44,7 @@ export const NavMenuRoot = forwardRef( ref={ref} style={style} data-testid={testID} - className={NavMenuRootClass} + className={navMenuRootClass} >
{children}
diff --git a/src/Components/NavMenu/NavMenuItem.tsx b/src/Components/NavMenu/NavMenuItem.tsx index ba0a2dd9..36b8655c 100644 --- a/src/Components/NavMenu/NavMenuItem.tsx +++ b/src/Components/NavMenu/NavMenuItem.tsx @@ -30,7 +30,7 @@ export const NavMenuItem = forwardRef( }, ref ) => { - const NavMenuItemClass = classnames('cf-nav--item', { + const navMenuItemClass = classnames('cf-nav--item', { active, [`${className}`]: className, }) @@ -38,7 +38,7 @@ export const NavMenuItem = forwardRef( return (
( const darkText = textColor() === InfluxColors.Kevlar - const TabClass = classnames('cf-tabs--tab', { + const tabClass = classnames('cf-tabs--tab', { [`cf-tabs--tab__${size}`]: size, 'cf-tabs--tab__active': active, 'cf-tabs--tab__dark-text': darkText, @@ -88,7 +88,7 @@ export const Tab = forwardRef( return (
( }, ref ) => { - const TabContentsClass = classnames('cf-tabs--tab-contents', { + const tabContentsClass = classnames('cf-tabs--tab-contents', { [`cf-tabs--tab-contents__${padding}`]: padding, [`${className}`]: className, }) @@ -35,7 +35,7 @@ export const TabContents = forwardRef( return (
( }, ref ) => { - const TabsClass = classnames('cf-tabs', { + const tabsClass = classnames('cf-tabs', { [`cf-tabs__align-${alignment}`]: alignment, [`cf-tabs__${orientation}`]: orientation, [`cf-tabs__padding-${padding}`]: padding, @@ -52,7 +52,7 @@ export const TabsRoot = forwardRef( return (
-
+
{emptyState}