From 745399800a3e894016ab547127d90ef502d9b127 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Mon, 26 Apr 2021 11:27:52 -0700 Subject: [PATCH] components: Remove ui/button and ui/button-group (#31205) --- packages/components/src/button/index.js | 3 +- packages/components/src/button/next.js | 79 --- .../src/ui/base-button/component.js | 166 ----- .../components/src/ui/base-button/hook.js | 124 ---- .../components/src/ui/base-button/index.js | 3 - .../src/ui/base-button/loading-overlay.js | 22 - .../components/src/ui/base-button/styles.js | 243 ------- .../test/__snapshots__/index.js.snap | 188 ----- .../src/ui/base-button/test/index.js | 16 - .../components/src/ui/base-button/types.ts | 156 ----- .../components/src/ui/button-group/README.md | 40 -- .../src/ui/button-group/component.js | 124 ---- .../components/src/ui/button-group/context.js | 10 - .../components/src/ui/button-group/index.js | 2 - .../src/ui/button-group/stories/index.js | 36 - .../components/src/ui/button-group/styles.js | 18 - .../test/__snapshots__/index.js.snap | 364 ---------- .../src/ui/button-group/test/index.js | 23 - .../components/src/ui/button-group/types.ts | 56 -- packages/components/src/ui/button/README.md | 159 ----- .../components/src/ui/button/component.js | 146 ---- packages/components/src/ui/button/index.js | 1 - .../components/src/ui/button/stories/index.js | 67 -- packages/components/src/ui/button/styles.js | 305 -------- .../button/test/__snapshots__/index.js.snap | 651 ------------------ .../components/src/ui/button/test/index.js | 155 ----- .../src/ui/tooltip-button/README.md | 24 - .../src/ui/tooltip-button/component.tsx | 95 --- .../components/src/ui/tooltip-button/index.js | 2 - .../src/ui/tooltip-button/stories/index.js | 74 -- .../src/ui/tooltip-button/test/index.js | 32 - 31 files changed, 1 insertion(+), 3383 deletions(-) delete mode 100644 packages/components/src/button/next.js delete mode 100644 packages/components/src/ui/base-button/component.js delete mode 100644 packages/components/src/ui/base-button/hook.js delete mode 100644 packages/components/src/ui/base-button/index.js delete mode 100644 packages/components/src/ui/base-button/loading-overlay.js delete mode 100644 packages/components/src/ui/base-button/styles.js delete mode 100644 packages/components/src/ui/base-button/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/base-button/test/index.js delete mode 100644 packages/components/src/ui/base-button/types.ts delete mode 100644 packages/components/src/ui/button-group/README.md delete mode 100644 packages/components/src/ui/button-group/component.js delete mode 100644 packages/components/src/ui/button-group/context.js delete mode 100644 packages/components/src/ui/button-group/index.js delete mode 100644 packages/components/src/ui/button-group/stories/index.js delete mode 100644 packages/components/src/ui/button-group/styles.js delete mode 100644 packages/components/src/ui/button-group/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/button-group/test/index.js delete mode 100644 packages/components/src/ui/button-group/types.ts delete mode 100644 packages/components/src/ui/button/README.md delete mode 100644 packages/components/src/ui/button/component.js delete mode 100644 packages/components/src/ui/button/index.js delete mode 100644 packages/components/src/ui/button/stories/index.js delete mode 100644 packages/components/src/ui/button/styles.js delete mode 100644 packages/components/src/ui/button/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/button/test/index.js delete mode 100644 packages/components/src/ui/tooltip-button/README.md delete mode 100644 packages/components/src/ui/tooltip-button/component.tsx delete mode 100644 packages/components/src/ui/tooltip-button/index.js delete mode 100644 packages/components/src/ui/tooltip-button/stories/index.js delete mode 100644 packages/components/src/ui/tooltip-button/test/index.js diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index 3415fb2a276369..d3804056cd2a89 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -16,7 +16,6 @@ import { forwardRef } from '@wordpress/element'; import Tooltip from '../tooltip'; import Icon from '../icon'; import VisuallyHidden from '../visually-hidden'; -import { withNextComponent } from './next'; const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ]; @@ -164,4 +163,4 @@ export function Button( props, ref ) { ); } -export default withNextComponent( forwardRef( Button ) ); +export default forwardRef( Button ); diff --git a/packages/components/src/button/next.js b/packages/components/src/button/next.js deleted file mode 100644 index 59e99860ab1336..00000000000000 --- a/packages/components/src/button/next.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Internal dependencies - */ -import { withNext } from '../ui/context'; -import { TooltipButton as NextButton } from '../ui/tooltip-button'; - -const Button = - process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextButton : undefined; - -const getVariant = ( { - isPrimary, - isTertiary, - isSecondary, - isLink, - isDefault, -} ) => { - if ( isPrimary ) { - return 'primary'; - } - - if ( isTertiary ) { - return 'tertiary'; - } - - if ( isSecondary ) { - return 'secondary'; - } - - if ( isDefault ) { - return 'plain'; - } - - if ( isLink ) { - return 'link'; - } - - return 'plain'; -}; - -const adapter = ( { - isPrimary, - isTertiary, - isSecondary, - isLink, - isDefault, - isSmall, - isBusy, - label, - 'aria-label': ariaLabel, - describedBy, - shortcut, - tooltipPosition, - text, - ...props -} ) => ( { - ...props, - describedBy, - variant: getVariant( { - isPrimary, - isTertiary, - isSecondary, - isLink, - isDefault, - } ), - isActive: isBusy, - isLoading: isBusy, - size: isSmall ? 'small' : undefined, - 'aria-label': ariaLabel || label, - pre: text, - tooltip: { - content: describedBy ? describedBy : ariaLabel || label, - position: tooltipPosition, - shortcut, - }, -} ); - -export function withNextComponent( Component ) { - return withNext( Component, Button, 'WPComponentsButton', adapter ); -} diff --git a/packages/components/src/ui/base-button/component.js b/packages/components/src/ui/base-button/component.js deleted file mode 100644 index 9918ea56ff20cd..00000000000000 --- a/packages/components/src/ui/base-button/component.js +++ /dev/null @@ -1,166 +0,0 @@ -/** - * External dependencies - */ -import { cx, ui } from '@wp-g2/styles'; -// eslint-disable-next-line no-restricted-imports -import { Radio as ReakitRadio } from 'reakit'; - -/** - * WordPress dependencies - */ -import { Icon, chevronDown } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import { contextConnect } from '../context'; -import { useButtonGroupContext } from '../button-group'; -import { Elevation } from '../elevation'; -import { FlexItem } from '../flex'; -import { View } from '../view'; -import * as styles from './styles'; -import LoadingOverlay from './loading-overlay'; -import { useBaseButton } from './hook'; - -/** - * @param {import('../context').ViewOwnProps} props - * @param {import('react').Ref} forwardedRef - */ -function BaseButton( props, forwardedRef ) { - const { - as: asProp, - children, - disabled = false, - elevation = 0, - elevationActive, - elevationFocus, - elevationHover, - hasCaret = false, - href, - icon, - iconPosition = 'left', - iconSize = 16, - isActive = false, - isDestructive = false, - isFocused = false, - isLoading = false, - noWrap = true, - pre, - suffix, - ...otherProps - } = useBaseButton( props ); - const { buttonGroup } = useButtonGroupContext(); - const buttonGroupState = buttonGroup || {}; - - const BaseComponent = buttonGroup ? ReakitRadio : View; - const as = asProp || ( href && ! disabled ? 'a' : 'button' ); - - return ( - // @ts-ignore No idea why TS is confused about this but ReakitRadio and View are definitely renderable - - - { pre && ( - - { pre } - - ) } - { icon && iconPosition === 'left' && ( - - - - ) } - { children && ( - - { children } - - ) } - { icon && iconPosition === 'right' && ( - - - - ) } - { suffix && ( - - { suffix } - - ) } - { hasCaret && ( - - - - ) } - - - ); -} - -/** - * `BaseButton` is a primitive component used to create actionable components (e.g. `Button`). - */ -const ConnectedBaseButton = contextConnect( BaseButton, 'BaseButton' ); - -export default ConnectedBaseButton; diff --git a/packages/components/src/ui/base-button/hook.js b/packages/components/src/ui/base-button/hook.js deleted file mode 100644 index 457c76eccb817f..00000000000000 --- a/packages/components/src/ui/base-button/hook.js +++ /dev/null @@ -1,124 +0,0 @@ -/** - * External dependencies - */ -import { css, cx } from 'emotion'; - -/** - * Internal dependencies - */ -import { useContextSystem } from '../context'; -import { useControlGroupContext } from '../control-group'; -import { useFlex } from '../flex'; -import * as styles from './styles'; - -/** - * @type {('onMouseDown' | 'onClick')[]} - */ -const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ]; - -/** - * @param {import('../context').ViewOwnProps} props - */ -export function useBaseButton( props ) { - const { - children, - className, - currentColor, - disabled = false, - elevation = 0, - elevationActive, - elevationFocus, - elevationHover, - gap = 2, - hasCaret = false, - href, - icon, - iconSize = 16, - isBlock = false, - isControl = false, - isDestructive = false, - isFocusable = true, - isLoading = false, - isNarrow = false, - isRounded = false, - isSplit = false, - isSubtle = false, - justify = 'center', - noWrap = true, - pre, - size = 'medium', - suffix, - textAlign = 'center', - ...otherProps - } = useContextSystem( props, 'BaseButton' ); - - const { className: flexClassName, ...flexProps } = useFlex( { - gap, - justify, - } ); - - /** @type {import('react').ElementType} */ - const as = href ? 'a' : 'button'; - const { styles: controlGroupStyles } = useControlGroupContext(); - const isIconOnly = !! icon && ! children; - - const classes = cx( - flexClassName, - styles.Button, - isBlock && styles.block, - isDestructive && styles.destructive, - styles[ size ], - isIconOnly && styles.icon, - isSubtle && styles.subtle, - isControl && styles.control, - isSubtle && isControl && styles.subtleControl, - controlGroupStyles, - isRounded && styles.rounded, - isNarrow && styles.narrow, - isSplit && styles.split, - currentColor && styles.currentColor, - css( { textAlign } ), - className - ); - - const trulyDisabled = disabled && ! isFocusable; - - const returnProps = { - ...flexProps, - as, - href, - children, - disabled: trulyDisabled, - elevation, - className: classes, - elevationActive, - elevationFocus, - elevationHover, - hasCaret, - icon, - isDestructive, - pre, - suffix, - iconSize, - isLoading, - noWrap, - ...otherProps, - }; - - if ( disabled && isFocusable ) { - // In this case, the button will be disabled, but still focusable and - // perceivable by screen reader users. - returnProps[ 'aria-disabled' ] = true; - - for ( const disabledEvent of disabledEventsOnDisabledButton ) { - returnProps[ disabledEvent ] = ( - /** @type {import('react').MouseEvent} */ event - ) => { - event.stopPropagation(); - event.preventDefault(); - }; - } - } - - return returnProps; -} diff --git a/packages/components/src/ui/base-button/index.js b/packages/components/src/ui/base-button/index.js deleted file mode 100644 index 1d2598562bebc9..00000000000000 --- a/packages/components/src/ui/base-button/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as BaseButton } from './component'; - -export * from './hook'; diff --git a/packages/components/src/ui/base-button/loading-overlay.js b/packages/components/src/ui/base-button/loading-overlay.js deleted file mode 100644 index c014ca2621733b..00000000000000 --- a/packages/components/src/ui/base-button/loading-overlay.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Internal dependencies - */ -import { Flex } from '../flex'; -import { Spinner } from '../spinner'; -import * as styles from './styles'; - -export function LoadingOverlay( { isLoading = false } ) { - if ( ! isLoading ) return null; - - return ( - - ); -} - -export default LoadingOverlay; diff --git a/packages/components/src/ui/base-button/styles.js b/packages/components/src/ui/base-button/styles.js deleted file mode 100644 index ecde123176fbd9..00000000000000 --- a/packages/components/src/ui/base-button/styles.js +++ /dev/null @@ -1,243 +0,0 @@ -/** - * External dependencies - */ -import { css, ui } from '@wp-g2/styles'; - -export const Button = css` - align-items: center; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: ${ ui.get( 'controlBorderRadius' ) }; - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 ${ ui.get( 'controlBoxShadowFocusSize' ) } transparent; - box-sizing: border-box; - color: ${ ui.color.text }; - cursor: pointer; - display: inline-flex; - font-size: ${ ui.get( 'fontSize' ) }; - height: auto; - line-height: 1; - min-height: ${ ui.get( 'controlHeight' ) }; - outline: none; - padding-bottom: ${ ui.space( 1 ) }; - padding-left: ${ ui.get( 'controlPaddingX' ) }; - padding-right: ${ ui.get( 'controlPaddingX' ) }; - padding-top: ${ ui.space( 1 ) }; - position: relative; - text-decoration: none; - touch-action: manipulation; /* Prevents zooming on mobile */ - user-select: none; - width: auto; - - &:hover, - &:active, - &:focus { - transition: all ${ ui.get( 'transitionDuration' ) } - cubic-bezier( 0.12, 0.8, 0.32, 1 ); - } - - &[disabled]:not( [aria-busy='true'] ), - &[aria-disabled='true']:not( [aria-busy='true'] ) { - ${ ui.opacity.muted }; - cursor: auto; - } - - &:focus { - box-shadow: ${ ui.get( 'controlBoxShadowFocus' ) }; - } - - &[data-destructive='true'] { - &:focus { - box-shadow: ${ ui.get( 'controlDestructiveBoxShadowFocus' ) }; - } - } - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeight' ) }; - } - - svg { - display: block; - } -`; - -export const destructive = css` - color: ${ ui.color.destructive }; -`; - -export const block = css` - display: flex; - width: 100%; -`; - -export const rounded = css` - ${ ui.borderRadius.circle }; -`; - -export const xLarge = css` - min-height: ${ ui.get( 'controlHeightXLarge' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXLarge' ) }; - } -`; - -export const large = css` - min-height: ${ ui.get( 'controlHeightLarge' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightLarge' ) }; - } -`; - -export const medium = css``; - -export const small = css` - ${ ui.padding.y( ui.space( 0.5 ) ) }; - ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; - min-height: ${ ui.get( 'controlHeightSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlPaddingXSmall' ) }; - } -`; - -export const xSmall = css` - ${ ui.padding.y( ui.space( 0.5 ) ) }; - ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; - min-height: ${ ui.get( 'controlHeightXSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXXSmall' ) }; - } -`; - -export const xxSmall = css` - ${ ui.padding( 0 ) }; - min-height: ${ ui.get( 'controlHeightXXSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXXSmall' ) }; - } -`; - -export const icon = css` - ${ ui.padding.x( 0 ) }; -`; - -export const loading = css` - opacity: 0; -`; - -export const Content = css` - font-size: ${ ui.get( 'fontSize' ) }; - /* line-height: 0; */ - opacity: 1; -`; - -export const noWrap = css` - white-space: nowrap; -`; - -export const PrefixSuffix = css` - opacity: 1; - - svg { - display: block; - user-select: none; - } -`; - -export const CaretWrapper = css` - margin-left: 0 !important; - position: relative; - right: ${ ui.space( -2 ) }; -`; - -export const LoadingOverlay = css` - bottom: 0; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: 0; -`; - -export const subtle = css` - border-color: ${ ui.get( 'controlBorderColorSubtle' ) }; - color: ${ ui.color.text }; - - &:hover, - &:active, - &:focus { - border-color: ${ ui.get( 'controlBorderColorSubtle' ) }; - color: ${ ui.color.text }; - } - - &:focus { - border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; - } -`; - -export const control = css` - background-color: ${ ui.get( 'controlBackgroundColor' ) }; - border: 1px solid; - border-color: ${ ui.get( 'controlBorderColor' ) }; - color: ${ ui.color.text }; - font-family: ${ ui.get( 'fontFamily' ) }; - font-size: ${ ui.get( 'fontSize' ) }; - - &:hover, - &:active, - &:focus { - color: ${ ui.color.text }; - } - - &:focus { - border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; - box-shadow: ${ ui.get( 'controlBoxShadowFocus' ) }; - } -`; - -export const subtleControl = css` - background-color: transparent; - - &:hover, - &:focus { - background-color: ${ ui.get( 'controlBackgroundColor' ) }; - } - - &:focus { - border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; - } - - &:active { - background-color: ${ ui.get( 'controlBackgroundColorActive' ) }; - } - - &[data-active='true'] { - background: ${ ui.get( 'colorText' ) }; - color: ${ ui.get( 'colorTextInverted' ) }; - } -`; - -export const narrow = css` - padding-left: ${ ui.get( 'controlPaddingX' ) }; - padding-right: ${ ui.get( 'controlPaddingX' ) }; -`; - -export const currentColor = css` - color: currentColor; - - &:hover, - &:focus { - color: currentColor; - } -`; - -export const split = css` - border-bottom-left-radius: 0px; - border-top-left-radius: 0px; -`; diff --git a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap deleted file mode 100644 index 44a1f7b0795593..00000000000000 --- a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,188 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`props should render correctly 1`] = ` -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:hover, -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:active, -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[disabled]:not( [aria-busy='true'] ), -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - display: var(--wp-g2-flex-item-display); - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -.emotion-0 { - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-5 { - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; -} - -.emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - text-align: center; -} - -.emotion-11 > * + *:not(marquee) { - margin-left: calc(4px * 2); -} - -.emotion-11 > * { - min-width: 0; -} - - -`; diff --git a/packages/components/src/ui/base-button/test/index.js b/packages/components/src/ui/base-button/test/index.js deleted file mode 100644 index 80f67cbafb0b57..00000000000000 --- a/packages/components/src/ui/base-button/test/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * External dependencies - */ -import { render } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import { BaseButton } from '../index'; - -describe( 'props', () => { - test( 'should render correctly', () => { - const { container } = render( Code is Poetry ); - expect( container.firstChild ).toMatchSnapshot(); - } ); -} ); diff --git a/packages/components/src/ui/base-button/types.ts b/packages/components/src/ui/base-button/types.ts deleted file mode 100644 index c0409b7847e3f1..00000000000000 --- a/packages/components/src/ui/base-button/types.ts +++ /dev/null @@ -1,156 +0,0 @@ -/** - * External dependencies - */ -// eslint-disable-next-line no-restricted-imports -import type { CSSProperties, ReactElement } from 'react'; - -/** - * Internal dependencies - */ -import type { SizeRangeDefault } from '../utils/types'; - -type BaseButtonSize = SizeRangeDefault; - -export type Props = { - /** - * @default false - */ - currentColor?: boolean; - /** - * Renders `Button` in a disabled state. - * - * @default false - */ - disabled?: boolean; - /** - * Renders `Elevation` styles for the `Button`. - * - * @default 0 - */ - elevation?: number; - /** - * Renders `Elevation` styles for the `Button` when active. - */ - elevationActive?: number; - /** - * Renders `Elevation` styles for the `Button` when focused. - */ - elevationFocus?: number; - /** - * Renders `Elevation` styles for the `Button` when hovered. - */ - elevationHover: number; - /** - * The amount of space between each child element within `Button`. - * - * @default 2 - */ - gap?: number; - /** - * Determines if a caret `Icon` should render within the `Button` - * - * @default false - */ - hasCaret?: boolean; - /** - * An HTML anchor link. Transforms the `Button` in a `` element. - */ - href?: string; - target?: string; - /** - * Renders an `Icon` within the `Button`. - */ - icon?: ReactElement; - iconPosition?: 'left' | 'right'; - /** - * Adjusts the size of the `Icon` within the `Button` (from the `icon` prop). - */ - iconSize?: number; - /** - * Passed to `data-active`. - */ - isActive?: boolean; - /** - * Determines if `Button` should render as a block element, rather than inline. - * - * @default false - */ - isBlock?: boolean; - /** - * Renders `Button` with control styles, similar to `TextInput` or `Select`. - * - * @default false - */ - isControl?: boolean; - /** - * Renders destructive variant. - * - * @default false - */ - isDestructive?: boolean; - /** - * Passed to `data-focused`. - */ - isFocused?: boolean; - isFocusable?: boolean; - /** - * Renders loading, disabling `Button` and renders a `Spinner`. - * - * @default false - */ - isLoading?: boolean; - /** - * Renders a narrower `Button`. - * - * @default false - */ - isNarrow?: boolean; - /** - * Renders a rounded `Button`. - * - * @default false - */ - isRounded?: boolean; - /** - * @default false - */ - isSplit?: boolean; - /** - * Renders a subtle `Button`. - * - * @default false - */ - isSubtle?: boolean; - /** - * Determines how inner content is aligned. - * - * @default 'center' - */ - justify?: CSSProperties[ 'justifyContent' ]; - /** - * Determines if inner content should be wrapped. - * - * @default false - */ - noWrap?: boolean; - /** - * Renders prefix content within `Button`. - */ - pre?: ReactElement; - /** - * Determines the size of `Button`. - * - * @default 'medium' - */ - size?: BaseButtonSize; - /** - * Renders suffix content within `Button`. - */ - suffix?: ReactElement; - /** - * Modifies the text-align (CSS) styles of `Button` content. - * - * @default 'center' - */ - textAlign?: CSSProperties[ 'textAlign' ]; -}; diff --git a/packages/components/src/ui/button-group/README.md b/packages/components/src/ui/button-group/README.md deleted file mode 100644 index cbd8689ec442d1..00000000000000 --- a/packages/components/src/ui/button-group/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# ButtonGroup - -`ButtonGroup` is a form component that groups related buttons together. It can also coordinate the checked state of multiple `Button` components. - -## Usage - -```jsx -import { Button, ButtonGroup } from '@wordpress/components/ui'; - -const Example = () => { - return ( - - - - - - ); -}; -``` - -### Radio group - -A `ButtonGroup` can also be used to create a [radio group](https://www.w3.org/TR/wai-aria-practices/#radiobutton), highlighting a single selected value within the group. - -```jsx -import { Button, ButtonGroup } from '@wordpress/components/ui'; -import { useState } from '@wordpress/element'; - -const Example = () => { - const [ value, setValue ] = useState( 'code' ); - - return ( - - - - - - ); -}; -``` diff --git a/packages/components/src/ui/button-group/component.js b/packages/components/src/ui/button-group/component.js deleted file mode 100644 index dc18fba828db27..00000000000000 --- a/packages/components/src/ui/button-group/component.js +++ /dev/null @@ -1,124 +0,0 @@ -/** - * External dependencies - */ -import { - contextConnect, - ContextSystemProvider, - useContextSystem, -} from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; -import { noop, useUpdateEffect } from '@wp-g2/utils'; -// eslint-disable-next-line no-restricted-imports -import { RadioGroup, useRadioState } from 'reakit'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useMemo } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { ControlGroup } from '../control-group'; -import { ButtonGroupContext } from './context'; -import * as styles from './styles'; - -/** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props - * @param {import('react').Ref} forwardedRef - */ -function ButtonGroup( props, forwardedRef ) { - const { - baseId, - className, - children, - enableSelectNone = false, - expanded = false, - segmented = false, - id, - label = __( 'ButtonGroup' ), - value, - onChange = noop, - ...otherProps - } = useContextSystem( props, 'ButtonGroup' ); - - const radio = useRadioState( { - baseId: baseId || id, - state: value, - } ); - - useUpdateEffect( () => { - onChange( radio.state ); - }, [ radio.state ] ); - - useUpdateEffect( () => { - radio.setState( value ); - }, [ value ] ); - - const contextProps = useMemo( - () => ( { - buttonGroup: radio, - enableSelectNone, - } ), - [ enableSelectNone, radio ] - ); - - const contextSystemProps = useMemo( () => { - return { - Button: { - isBlock: expanded, - isSubtle: ! segmented, - isControl: true, - }, - ControlGroup: { - isItemBlock: expanded, - }, - }; - }, [ expanded, segmented ] ); - - const classes = cx( - segmented && styles.segmented, - expanded && styles.expanded, - className - ); - const BaseComponent = segmented ? ControlGroup : styles.ButtonGroupView; - - return ( - - - - { children } - - - - ); -} - -/** - * `ButtonGroup` is a form component that groups related buttons together. It can also coordinate the checked state of multiple `Button` components. - * - * @example - * ```jsx - * import { ButtonGroup, Button } from `@wordpress/components/ui`; - * - * function Example() { - * return ( - * - * - * - * - * - * ); - * } - * ``` - */ -const ConnectedButtonGroup = contextConnect( ButtonGroup, 'ButtonGroup' ); - -export default ConnectedButtonGroup; diff --git a/packages/components/src/ui/button-group/context.js b/packages/components/src/ui/button-group/context.js deleted file mode 100644 index 9260c5d9cf40e8..00000000000000 --- a/packages/components/src/ui/button-group/context.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * WordPress dependencies - */ -import { createContext, useContext } from '@wordpress/element'; - -/** @type {import('./types').ButtonGroupContext} */ -const defaultContext = {}; - -export const ButtonGroupContext = createContext( defaultContext ); -export const useButtonGroupContext = () => useContext( ButtonGroupContext ); diff --git a/packages/components/src/ui/button-group/index.js b/packages/components/src/ui/button-group/index.js deleted file mode 100644 index f32201f17dd1ef..00000000000000 --- a/packages/components/src/ui/button-group/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ButtonGroup } from './component'; -export * from './context'; diff --git a/packages/components/src/ui/button-group/stories/index.js b/packages/components/src/ui/button-group/stories/index.js deleted file mode 100644 index 7b7cfff06d916a..00000000000000 --- a/packages/components/src/ui/button-group/stories/index.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * External dependencies - */ -import { boolean } from '@storybook/addon-knobs'; -/** - * WordPress dependencies - */ -import { formatBold, formatItalic, formatUnderline } from '@wordpress/icons'; -import { useState } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { Button } from '../../button'; -import { ButtonGroup } from '..'; - -export default { - component: ButtonGroup, - title: 'G2 Components (Experimental)/ButtonGroup', -}; - -export const _default = () => { - const [ value, setValue ] = useState( 'bold' ); - const props = { - expanded: boolean( 'expanded', false ), - segmented: boolean( 'segmented', false ), - }; - - return ( - - - - - -`; diff --git a/packages/components/src/ui/button-group/test/index.js b/packages/components/src/ui/button-group/test/index.js deleted file mode 100644 index cec03c22d5d3ca..00000000000000 --- a/packages/components/src/ui/button-group/test/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * External dependencies - */ -import { render } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import { Button } from '../../button'; -import { ButtonGroup } from '../index'; - -describe( 'props', () => { - test( 'should render correctly', () => { - const { container } = render( - - - - - - ); - expect( container.firstChild ).toMatchSnapshot(); - } ); -} ); diff --git a/packages/components/src/ui/button-group/types.ts b/packages/components/src/ui/button-group/types.ts deleted file mode 100644 index 4d79d59aca7c92..00000000000000 --- a/packages/components/src/ui/button-group/types.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** - * External dependencies - */ -// eslint-disable-next-line no-restricted-imports -import type { - RadioStateReturn, - RadioGroupProps as ReakitRadioGroupProps, -} from 'reakit'; - -export type Props = ReakitRadioGroupProps & { - /** - * ID that will serve as a base for all the items IDs. - * - * @see https://reakit.io/docs/radio/#useradiostate - */ - baseId?: string; - /** - * Determines if `Radio` is disabled. - */ - disabled?: boolean; - /** - * Allows for value to reset if clicking the current active item. - */ - enableSelectNone?: boolean; - /** - * Renders inner `Button` with a full-width expanded UI. - */ - expanded?: boolean; - /** - * When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set. - * - * @see https://reakit.io/docs/radio/#radiogroup - */ - focusable?: boolean; - /** - * Label for `Radio` components. - */ - label?: string; - /** - * Callback when a `Button` `checked` value changes. - */ - onChange?: ( ...args: any ) => void; - /** - * Renders inner `Button` with a segmented UI. - */ - segmented?: boolean; - /** - * Value of `Button`. - */ - value?: string | number; -}; - -export type ButtonGroupContext = { - buttonGroup?: RadioStateReturn; - enableSelectNone?: Props[ 'enableSelectNone' ]; -}; diff --git a/packages/components/src/ui/button/README.md b/packages/components/src/ui/button/README.md deleted file mode 100644 index f00ab3735068ed..00000000000000 --- a/packages/components/src/ui/button/README.md +++ /dev/null @@ -1,159 +0,0 @@ -# Button - -`Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. - -## Usage - -```jsx -import { Button } from '@wordpress/components/ui'; - -function Example() { - return ; -} -``` - -## Props - -##### disabled - -**Type**: `boolean` - -Renders `Button` in a disabled state. - -##### elevation - -**Type**: `number` - -Renders `Elevation` styles for the `Button`. - -##### elevationActive - -**Type**: `number` - -Renders `Elevation` styles for the `Button` when active. - -##### elevationFocus - -**Type**: `number` - -Renders `Elevation` styles for the `Button` when focused. - -##### elevationHover - -**Type**: `number` - -Renders `Elevation` styles for the `Button` when hovered. - -##### gap - -**Type**: `number` - -The amount of space between each child element within `Button`. - -##### hasCaret - -**Type**: `boolean` - -Determines if a caret `Icon` should render within the `Button` - -##### href - -**Type**: `string` - -An HTML anchor link. Transforms the `Button` in a `` element. - -##### icon - -**Type**: `React.ReactElement` - -Renders an `Icon` within the `Button`. - -##### iconSize - -**Type**: `number` - -Adjusts the size of the `Icon` within the `Button` (from the `icon` prop). - -##### isBlock - -**Type**: `boolean` - -Determines if `Button` should render as a block element, rather than inline. - -##### isControl - -**Type**: `boolean` - -Renders `Button` with control styles, similar to `TextInput` or `Select`. - -##### isDestructive - -**Type**: `boolean` - -Renders destructive variant. - -##### isLoading - -**Type**: `boolean` - -Renders loading, disabling `Button` and renders a `Spinner`. - -##### isNarrow - -**Type**: `boolean` - -Renders a narrower `Button`. - -##### isRounded - -**Type**: `boolean` - -Renders a rounded `Button`. - -##### isSubtle - -**Type**: `boolean` - -Renders a subtle `Button`. - -##### justify - -**Type**: `CSS['justifyContent']` - -Determines how inner content is aligned. - -##### noWrap - -**Type**: `boolean` - -Determines if inner content should be wrapped. - -##### pre - -**Type**: `React.ReactElement` - -Renders prefix content within `Button`. - -##### size - -**Type**: `"xLarge"`,`"large"`,`"medium"`,`"small"`,`"xSmall"` - -Determines the size of `Button`. - -##### suffix - -**Type**: `React.ReactElement` - -Renders suffix content within `Button`. - -##### textAlign - -**Type**: `CSS['textAlign']` - -Modifies the text-align (CSS) styles of `Button` content. - -##### variant - -**Type**: `"primary"`,`"secondary"`,`"tertiary"`,`"plain"`,`"link"` - -Determines the `Button` variant to render. diff --git a/packages/components/src/ui/button/component.js b/packages/components/src/ui/button/component.js deleted file mode 100644 index fbe3a5a05b4fe0..00000000000000 --- a/packages/components/src/ui/button/component.js +++ /dev/null @@ -1,146 +0,0 @@ -/** - * External dependencies - */ -import { cx } from 'emotion'; -import { noop, uniqueId } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useCallback } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { contextConnect, useContextSystem } from '../context'; -import { BaseButton } from '../base-button'; -import { useButtonGroupContext } from '../button-group'; -import { VisuallyHidden } from '../visually-hidden'; -import * as styles from './styles'; - -/** - * @typedef {'primary' | 'secondary' | 'tertiary' | 'plain' | 'link'} ButtonVariant - */ - -/** - * @typedef OwnProps - * @property {ButtonVariant} [variant='secondary'] Determinds the `Button` variant to render. - * @property {string} [describedBy] Text for element pointed to by aria-describedby (id is auto-generated if aria-describedby is not provided). - */ - -/** - * @typedef {import('../base-button/types').Props & OwnProps} Props - */ - -/** - * @param {import('../context').ViewOwnProps} props - * @param {import('react').Ref} forwardedRef - */ -function Button( props, forwardedRef ) { - const { - children, - className, - currentColor, - icon, - isActive: isActiveProp = false, - isControl = false, - isSubtle = false, - onClick = noop, - size = 'medium', - type = 'button', - variant = 'secondary', - describedBy, - ...otherProps - } = useContextSystem( props, 'Button' ); - - const { buttonGroup, enableSelectNone } = useButtonGroupContext(); - const isWithinButtonGroup = !! buttonGroup; - const isButtonGroupActive = - isWithinButtonGroup && buttonGroup?.state === otherProps.value; - - const isActive = isActiveProp || isButtonGroupActive; - const isIconOnly = !! icon && ! children; - - const descriptionId = describedBy ? uniqueId() : undefined; - const describedById = otherProps[ 'aria-describedby' ] || descriptionId; - - const handleOnClickWithinButtonGroup = useCallback( - ( event ) => { - if ( - isWithinButtonGroup && - enableSelectNone && - isButtonGroupActive && - buttonGroup - ) { - event.preventDefault(); - event.stopPropagation(); - buttonGroup.setState( undefined ); - } - }, - [ - buttonGroup, - enableSelectNone, - isButtonGroupActive, - isWithinButtonGroup, - ] - ); - - const handleOnClick = useCallback( - ( event ) => { - onClick( event ); - handleOnClickWithinButtonGroup( event ); - }, - [ handleOnClickWithinButtonGroup, onClick ] - ); - - const classes = cx( - styles.Button, - styles[ variant ], - styles[ size ], - isControl && styles.control, - isSubtle && styles.subtle, - isSubtle && isControl && styles.subtleControl, - isButtonGroupActive && styles.subtleControlActive, - isIconOnly && styles.icon, - currentColor && styles.currentColor, - className - ); - - return ( - <> - - { children } - - { describedBy && ( - - { describedBy } - - ) } - - ); -} - -/** - * `Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. - * - * @example - * ```jsx - * import { Button } from `@wordpress/components/ui`; - * - * function Example() { - * return ; - * } - * ``` - */ -const ConnectedButton = contextConnect( Button, 'Button' ); - -export default ConnectedButton; diff --git a/packages/components/src/ui/button/index.js b/packages/components/src/ui/button/index.js deleted file mode 100644 index 7c802d3a671c5d..00000000000000 --- a/packages/components/src/ui/button/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Button } from './component'; diff --git a/packages/components/src/ui/button/stories/index.js b/packages/components/src/ui/button/stories/index.js deleted file mode 100644 index 5fa545d152f089..00000000000000 --- a/packages/components/src/ui/button/stories/index.js +++ /dev/null @@ -1,67 +0,0 @@ -/** - * External dependencies - */ -import { boolean, number, select, text } from '@storybook/addon-knobs'; -/** - * Internal dependencies - */ -import { Button } from '..'; - -export default { - component: Button, - title: 'G2 Components (Experimental)/Button', -}; - -const createSelectProps = ( collection ) => - collection.reduce( ( data, item ) => ( { ...data, [ item ]: item } ), {} ); - -export const _default = () => { - const disabled = boolean( 'disabled', false ); - const elevation = number( 'elevation', 0 ); - const hasCaret = boolean( 'hasCaret', false ); - const isActive = boolean( 'isActive', false ); - const isBlock = boolean( 'isBlock', false ); - const isControl = boolean( 'isControl', false ); - const isDestructive = boolean( 'isDestructive', false ); - const isLoading = boolean( 'isLoading', false ); - const isRounded = boolean( 'isRounded', false ); - const isSplit = boolean( 'isSplit', false ); - const isSubtle = boolean( 'isSubtle', false ); - const size = select( - 'size', - createSelectProps( [ 'large', 'medium', 'small', 'xSmall' ] ), - 'medium' - ); - const describedBy = text( 'describedBy', undefined ); - - const variant = select( - 'variant', - createSelectProps( [ - 'primary', - 'secondary', - 'tertiary', - 'plain', - 'link', - ] ), - 'secondary' - ); - - const props = { - disabled, - elevation, - hasCaret, - isActive, - isBlock, - isControl, - isDestructive, - isLoading, - isRounded, - isSplit, - isSubtle, - size, - variant, - describedBy, - }; - - return ; -}; diff --git a/packages/components/src/ui/button/styles.js b/packages/components/src/ui/button/styles.js deleted file mode 100644 index d9e54070e6c927..00000000000000 --- a/packages/components/src/ui/button/styles.js +++ /dev/null @@ -1,305 +0,0 @@ -/** - * External dependencies - */ -import { css, ui } from '@wp-g2/styles'; - -/** - * Internal dependencies - */ -import * as baseButtonStyles from '../base-button/styles'; - -export const Button = css` - color: ${ ui.get( 'buttonTextColor' ) }; - font-weight: 600; - padding-left: ${ ui.get( 'buttonPaddingX' ) }; - padding-right: ${ ui.get( 'buttonPaddingX' ) }; - - &:active { - color: ${ ui.get( 'buttonTextColorActive' ) }; - } -`; - -export const xLarge = css` - min-height: ${ ui.get( 'controlHeightXLarge' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXLarge' ) }; - } -`; - -export const large = css` - min-height: ${ ui.get( 'controlHeightLarge' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightLarge' ) }; - } -`; - -export const medium = css``; - -export const small = css` - ${ ui.padding.x( ui.get( 'controlPaddingX' ) ) }; - min-height: ${ ui.get( 'controlHeightSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightSmall' ) }; - } -`; - -export const xSmall = css` - ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; - min-height: ${ ui.get( 'controlHeightXSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXSmall' ) }; - } -`; - -export const xxSmall = css` - ${ ui.padding.x( ui.get( 'controlHeightXXSmall' ) ) }; - min-height: ${ ui.get( 'controlHeightXXSmall' ) }; - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightXXSmall' ) }; - } -`; - -export const half = css` - min-height: calc( ${ ui.get( 'controlHeight' ) } / 2 ); - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeight' ) }; - } -`; - -export const halfLarge = css` - min-height: calc( ${ ui.get( 'controlHeightLarge' ) } / 2 ); - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightLarge' ) }; - } -`; - -export const halfSmall = css` - min-height: calc( ${ ui.get( 'controlHeightSmall' ) } / 2 ); - - &[data-icon='true'] { - min-width: ${ ui.get( 'controlHeightSmall' ) }; - } -`; - -export const icon = css` - ${ ui.padding( 0 ) }; -`; - -export const plain = css``; - -export const primary = css` - background-color: ${ ui.get( 'buttonPrimaryColor' ) }; - border-color: ${ ui.get( 'buttonPrimaryBorderColor' ) }; - color: ${ ui.get( 'buttonPrimaryTextColor' ) }; - - &:active { - color: ${ ui.get( 'buttonPrimaryTextColorActive' ) }; - } - - &:hover { - background-color: ${ ui.get( 'buttonPrimaryColorHover' ) }; - border-color: ${ ui.get( 'buttonPrimaryBorderColorHover' ) }; - color: ${ ui.get( 'buttonPrimaryTextColorHover' ) }; - } - - &:focus, - &[data-focused='true'] { - background-color: ${ ui.get( 'buttonPrimaryColorFocus' ) }; - border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; - color: ${ ui.get( 'buttonPrimaryTextColorFocus' ) }; - } - - &:active { - background-color: ${ ui.get( 'buttonPrimaryColorActive' ) }; - border-color: ${ ui.get( 'buttonPrimaryBorderColorActive' ) }; - } - - &[data-destructive='true'] { - background-color: ${ ui.color.destructive }; - border-color: ${ ui.color.destructive }; - - &:hover, - &:focus, - &[data-focused='true'] { - background-color: ${ ui.color.destructive }; - border-color: ${ ui.color.destructive }; - } - - &:active { - background-color: ${ ui.color.text }; - } - } -`; - -export const secondary = css` - background-color: ${ ui.get( 'buttonSecondaryColor' ) }; - border-color: ${ ui.get( 'buttonSecondaryBorderColor' ) }; - color: ${ ui.get( 'buttonSecondaryTextColor' ) }; - - &:hover { - background-color: ${ ui.get( 'buttonSecondaryColorHover' ) }; - border-color: ${ ui.get( 'buttonSecondaryBorderColorHover' ) }; - } - - &:focus, - &[data-focused='true'] { - background-color: ${ ui.get( 'buttonSecondaryColorFocus' ) }; - border-color: ${ ui.get( 'buttonSecondaryBorderColorFocus' ) }; - color: ${ ui.get( 'buttonSecondaryTextColorFocus' ) }; - } - - &:active { - background-color: ${ ui.get( 'buttonSecondaryColorActive' ) }; - border-color: ${ ui.get( 'buttonSecondaryBorderColorActive' ) }; - color: ${ ui.get( 'buttonSecondaryTextColorActive' ) }; - } - - &[data-destructive='true'] { - border-color: ${ ui.color.destructive }; - color: ${ ui.color.destructive }; - - &:hover, - &:active, - &:focus, - &[data-focused='true'] { - border-color: ${ ui.color.destructive }; - color: ${ ui.color.destructive }; - } - - &:active { - color: ${ ui.color.text }; - } - } -`; - -export const tertiary = css` - background-color: ${ ui.get( 'buttonTertiaryColor' ) }; - border-color: ${ ui.get( 'buttonTertiaryBorderColor' ) }; - color: ${ ui.get( 'buttonTertiaryTextColor' ) }; - - &:hover { - background-color: ${ ui.get( 'buttonTertiaryColorHover' ) }; - border-color: ${ ui.get( 'buttonTertiaryBorderColorHover' ) }; - } - - &:focus, - &[data-focused='true'] { - background-color: ${ ui.get( 'buttonTertiaryColorFocus' ) }; - border-color: ${ ui.get( 'buttonTertiaryBorderColorFocus' ) }; - color: ${ ui.get( 'buttonTertiaryTextColorFocus' ) }; - } - - &:active { - background-color: ${ ui.get( 'buttonTertiaryColorActive' ) }; - border-color: ${ ui.get( 'buttonTertiaryBorderColorActive' ) }; - color: ${ ui.get( 'buttonTertiaryTextColorActive' ) }; - } - - &[data-destructive='true'] { - color: ${ ui.color.destructive }; - - &:hover, - &:focus { - border-color: ${ ui.color.destructive }; - } - - &:active { - color: ${ ui.color.text }; - } - } -`; - -export const link = css` - background: none; - border-color: transparent; - color: ${ ui.get( 'linkColor' ) }; - - &:active { - color: ${ ui.get( 'linkColorActive' ) }; - } - - &[data-destructive='true'] { - color: ${ ui.color.destructive }; - - &:active { - color: ${ ui.color.text }; - } - } -`; - -export const plainLink = css` - ${ ui.padding.x( 0 ) }; - background: none; - border-color: transparent; - color: ${ ui.get( 'linkColor' ) }; - - &:hover, - &:active, - &:focus, - &[data-focused='true'] { - background-color: transparent; - text-decoration: underline; - } - - &:active { - color: ${ ui.get( 'linkColorActive' ) }; - } - - &[data-destructive='true'] { - color: ${ ui.color.destructive }; - - &:active { - color: ${ ui.color.text }; - } - } -`; - -export const subtle = baseButtonStyles.subtle; -export const control = baseButtonStyles.control; - -const subtleControlActiveTransition = css( { - transition: [ - 'all', - ui.get( 'transitionDuration' ), - ui.get( 'transitionTimingFunctionControl' ), - ].join( ' ' ), -} ); - -export const subtleControlActive = css` - &[data-active='true'] { - ${ subtleControlActiveTransition }; - ${ ui.zIndex( 'ControlFocus', 1 ) }; - - background: ${ ui.get( 'buttonControlActiveStateColor' ) }; - border-color: ${ ui.get( 'buttonControlActiveStateColor' ) }; - color: ${ ui.get( 'buttonControlActiveStateTextColor' ) }; - - &:hover { - background: ${ ui.get( 'buttonControlActiveStateColorHover' ) }; - } - &:focus { - background: ${ ui.get( 'buttonControlActiveStateColorFocus' ) }; - box-shadow: ${ ui.get( 'buttonControlActiveStateBoxShadowFocus' ) }; - border-color: ${ ui.get( - 'buttonControlActiveStateBorderColorFocus' - ) }; - } - &:active { - background: ${ ui.get( 'buttonControlActiveStateColorActive' ) }; - } - } -`; - -export const subtleControl = css` - ${ baseButtonStyles.subtleControl }; - ${ subtleControlActive }; -`; - -export const currentColor = baseButtonStyles.currentColor; diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap deleted file mode 100644 index c4da08359a6668..00000000000000 --- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,651 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`props should render (Flex) gap 1`] = ` -Snapshot Diff: -Compared values have no visual difference. -`; - -exports[`props should render as link (href) 1`] = ` -Snapshot Diff: -- First value -+ Second value - -@@ -1,15 +1,14 @@ -- - -- -+ -`; - -exports[`props should render correctly 1`] = ` -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:hover, -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:active, -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[disabled]:not( [aria-busy='true'] ), -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 svg { - display: block; -} - -.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11 { - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); -} - -.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12 { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:focus, -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:hover, -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active, -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:focus, -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - display: var(--wp-g2-flex-item-display); - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -.emotion-0 { - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-5 { - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; -} - -.emotion-14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - text-align: center; -} - -.emotion-14 > * + *:not(marquee) { - margin-left: calc(4px * 2); -} - -.emotion-14 > * { - min-width: 0; -} - - -`; - -exports[`props should render describedBy 1`] = ` -Snapshot Diff: -- First value -+ Second value - -@@ -1,8 +1,7 @@ - ); - } ); - - test( 'should render correctly', () => { - expect( base.container.firstChild ).toMatchSnapshot(); - } ); - - test( 'should render disabled', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render elevation', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render (Flex) gap', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render hasCaret', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render as link (href)', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render icon', () => { - const { container } = render( - - ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isControl', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isDestructive', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isLoading', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isNarrow', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isRounded', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render isSubtle', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render prefix', () => { - const { container } = render( - - ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render size', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render suffix', () => { - const { container } = render( - - ); - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render variant', () => { - const { container } = render( - - ); - expect( container.firstChild ).toMatchStyleDiffSnapshot( - base.container.firstChild - ); - } ); - - test( 'should render describedBy', () => { - const { container } = render( - - ); - - expect( container.firstChild ).toMatchDiffSnapshot( - base.container.firstChild - ); - } ); -} ); diff --git a/packages/components/src/ui/tooltip-button/README.md b/packages/components/src/ui/tooltip-button/README.md deleted file mode 100644 index cf0ba7987b0454..00000000000000 --- a/packages/components/src/ui/tooltip-button/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# TooltipButton - -`TooltipButton` is a simple component that composes `Button` with a `Tooltip`. It mostly exists as an adaptive layer between the `Button` it uses and the original `Button`. - -## Usage - -```jsx -import { TooltipButton } from '@wordpress/components/ui'; - -function Example() { - return ( - - Code is Poetry - - ); -} -``` - -## Props - -`TooltipButton` accepts all the regular `Button` props as well as a special `tooltip` prop. Pass any props you would pass to the `Tooltip` component to the `tooltip` prop and they'll get passed along for you to the wrapping tooltip. diff --git a/packages/components/src/ui/tooltip-button/component.tsx b/packages/components/src/ui/tooltip-button/component.tsx deleted file mode 100644 index dd9bc5d9102bfb..00000000000000 --- a/packages/components/src/ui/tooltip-button/component.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/** - * External dependencies - */ -import type { ViewOwnProps } from '@wp-g2/create-styles'; -// eslint-disable-next-line no-restricted-imports -import type { Ref } from 'react'; -import { useContextSystem, contextConnect } from '@wp-g2/context'; - -/** - * Internal dependencies - */ -import type { Props as ButtonProps } from '../button/component'; -import type { Props as TooltipProps } from '../tooltip/types'; -import { Button } from '../button'; -import { Tooltip } from '../tooltip'; - -export interface TooltipButtonProps extends ButtonProps { - tooltip?: TooltipProps; -} - -function TooltipButton( - props: ViewOwnProps< TooltipButtonProps, 'button' >, - forwardedRef: Ref< any > -): JSX.Element { - const { - tooltip, - disabled = false, - isFocusable = true, - children, - ...buttonProps - } = useContextSystem( props, 'TooltipButton' ); - - const trulyDisabled = disabled && ! isFocusable; - - // Should show the tooltip if... - const shouldShowTooltip = - tooltip && - ! trulyDisabled && - // an explicit tooltip is passed or... - ( tooltip.content || - // there's a shortcut or... - tooltip.shortcut || - // there's a label and... - ( !! buttonProps[ 'aria-label' ] && - // the children are empty - ( ! children || - ( Array.isArray( children ) && ! children.length ) ) ) ); - - if ( ! shouldShowTooltip ) { - return ( - - ); - } - - return ( - - - - ); -} - -/** - * `TooltipButton` is a simple component that composes `Button` with a `Tooltip`. - * It mostly exists as an adaptive layer between the `Button` it uses and the original `Button`. - * - * ```jsx - * import { TooltipButton } from `@wordpress/components/ui`; - * - * function Example() { - * return ( - * - * Code is Poetry - * - * ); - * } - * ``` - */ -export default contextConnect( TooltipButton, 'TooltipButton' ); diff --git a/packages/components/src/ui/tooltip-button/index.js b/packages/components/src/ui/tooltip-button/index.js deleted file mode 100644 index cead4df48ae1e9..00000000000000 --- a/packages/components/src/ui/tooltip-button/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as TooltipButton } from './component'; -export * from './component'; diff --git a/packages/components/src/ui/tooltip-button/stories/index.js b/packages/components/src/ui/tooltip-button/stories/index.js deleted file mode 100644 index c73373ec3aa0f8..00000000000000 --- a/packages/components/src/ui/tooltip-button/stories/index.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * External dependencies - */ -import { boolean, number, select, text } from '@storybook/addon-knobs'; -/** - * Internal dependencies - */ -import { TooltipButton } from '..'; - -export default { - component: TooltipButton, - title: 'G2 Components (Experimental)/TooltipButton', -}; - -const createSelectProps = ( collection ) => - collection.reduce( ( data, item ) => ( { ...data, [ item ]: item } ), {} ); - -export const _default = () => { - const tooltipContent = text( - 'tooltip.content', - 'This is some sample tooltip content' - ); - const disabled = boolean( 'disabled', false ); - const elevation = number( 'elevation', 0 ); - const hasCaret = boolean( 'hasCaret', false ); - const isActive = boolean( 'isActive', false ); - const isBlock = boolean( 'isBlock', false ); - const isControl = boolean( 'isControl', false ); - const isDestructive = boolean( 'isDestructive', false ); - const isLoading = boolean( 'isLoading', false ); - const isRounded = boolean( 'isRounded', false ); - const isSplit = boolean( 'isSplit', false ); - const isSubtle = boolean( 'isSubtle', false ); - const size = select( - 'size', - createSelectProps( [ 'large', 'medium', 'small', 'xSmall' ] ), - 'medium' - ); - const describedBy = text( 'describedBy', undefined ); - - const variant = select( - 'variant', - createSelectProps( [ - 'primary', - 'secondary', - 'tertiary', - 'plain', - 'link', - ] ), - 'secondary' - ); - - const props = { - disabled, - elevation, - hasCaret, - isActive, - isBlock, - isControl, - isDestructive, - isLoading, - isRounded, - isSplit, - isSubtle, - size, - variant, - describedBy, - tooltip: { - content: tooltipContent, - }, - }; - - return TooltipButton; -}; diff --git a/packages/components/src/ui/tooltip-button/test/index.js b/packages/components/src/ui/tooltip-button/test/index.js deleted file mode 100644 index 93af8b2efb391f..00000000000000 --- a/packages/components/src/ui/tooltip-button/test/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { render, screen } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import { TooltipButton } from '..'; - -describe( 'TooltipButton', () => { - it( 'should render a button without a tooltip if provided no tooltip props', () => { - const { container } = render( - WordPress.org - ); - expect( container.firstChild.tagName ).toBe( 'BUTTON' ); - } ); - - it( 'should render a button with a tooltip', () => { - render( - - WordPress.org - - ); - const button = screen.queryByText( 'WordPress.org' ); - expect( button ).not.toBeNull(); - const tooltipContent = screen.queryByText( 'Code is Poetry' ); - expect( tooltipContent ).not.toBeNull(); - } ); -} );