diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx index 10618c19de93f..b59f47e4c32b3 100644 --- a/packages/components/src/disabled/index.tsx +++ b/packages/components/src/disabled/index.tsx @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -12,9 +7,10 @@ import { createContext } from '@wordpress/element'; /** * Internal dependencies */ -import { StyledWrapper } from './styles/disabled-styles'; +import { disabledStyles } from './styles/disabled-styles'; import type { DisabledProps } from './types'; import type { WordPressComponentProps } from '../ui/context'; +import { useCx } from '../utils'; const Context = createContext< boolean >( false ); const { Consumer, Provider } = Context; @@ -56,20 +52,28 @@ function Disabled( { ...props }: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) { const ref = useDisabled(); - + const cx = useCx(); if ( ! isDisabled ) { - return { children }; + return ( + +
{ children }
+
+ ); } return ( - { children } - + ); } diff --git a/packages/components/src/disabled/styles/disabled-styles.tsx b/packages/components/src/disabled/styles/disabled-styles.tsx index b0ebeef887397..28e617efcbe0d 100644 --- a/packages/components/src/disabled/styles/disabled-styles.tsx +++ b/packages/components/src/disabled/styles/disabled-styles.tsx @@ -1,9 +1,9 @@ /** * External dependencies */ -import styled from '@emotion/styled'; +import { css } from '@emotion/react'; -export const StyledWrapper = styled.div` +export const disabledStyles = css` position: relative; pointer-events: none;