diff --git a/css/src/tooltips.css b/css/src/tooltips.css index 4e087d2cbfc..73143a1d3d0 100644 --- a/css/src/tooltips.css +++ b/css/src/tooltips.css @@ -72,7 +72,6 @@ button.yoast-tooltip { animation-name: yoast-tooltip-appear; animation-duration: 0.1s; animation-timing-function: ease-in; - animation-delay: 0.4s; animation-fill-mode: forwards; } diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js index 3569bb3328e..4f3e96d7ef6 100644 --- a/packages/components/src/AIFixesButton.js +++ b/packages/components/src/AIFixesButton.js @@ -23,9 +23,7 @@ const gradientEffect = { const AIFixesButtonBase = styled( IconButtonBase )` overflow: hidden; - border: ${ props => props.pressed ? "none" : "1px solid transparent" }; - border-image: ${ props => props.pressed ? "none" : gradientEffect.defaultStateBorder }; - clip-path: inset(0 round 3px); + border: ${ props => props.pressed ? "none" : "1px solid #A5B4FC" }; /*indigo-300*/ background-image: ${ props => props.pressed ? gradientEffect.pressedStateBackground : gradientEffect.defaultStateBackground } !important; diff --git a/packages/components/src/IconAIFixesButton.js b/packages/components/src/IconAIFixesButton.js index 4aa0200144a..a8e2711a4f1 100644 --- a/packages/components/src/IconAIFixesButton.js +++ b/packages/components/src/IconAIFixesButton.js @@ -21,6 +21,8 @@ const IconAIFixesButton = function( props ) { type="button" onClick={ props.onClick } pressed={ props.pressed } + onMouseEnter={ props.onMouseEnter } + onMouseLeave={ props.onMouseLeave } unpressedBoxShadowColor={ props.unpressedBoxShadowColor } pressedBoxShadowColor={ props.pressedBoxShadowColor } pressedBackground={ props.pressedBackground } @@ -29,8 +31,6 @@ const IconAIFixesButton = function( props ) { aria-label={ props.ariaLabel } aria-pressed={ props.pressed } pressedIconColor={ props.pressedIconColor } - hoverBackgroundColor={ props.hoverBackgroundColor } - unpressedBorderColor={ props.unpressedBorderColor } className={ props.className } > { props.children } @@ -44,14 +44,14 @@ IconAIFixesButton.propTypes = { id: PropTypes.string.isRequired, ariaLabel: PropTypes.string.isRequired, onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, unpressedBoxShadowColor: PropTypes.string, pressedBoxShadowColor: PropTypes.string, pressedBackground: PropTypes.string, unpressedBackground: PropTypes.string, pressedIconColor: PropTypes.string, pressed: PropTypes.bool.isRequired, - unpressedBorderColor: PropTypes.string, - hoverBackgroundColor: PropTypes.string, className: PropTypes.string, }; @@ -62,8 +62,9 @@ IconAIFixesButton.defaultProps = { pressedBackground: "linear- gradient(to bottom right, #A61E69, #3B82F6)", unpressedBackground: "linear-gradient(to bottom right, #FAF3F7, #EFF6FF)", pressedIconColor: colors.$color_white, - unpressedBorderColor: "linear-gradient(to bottom right, #CD82AB, #93C5FD)", - hoverBackgroundColor: "linear-gradient(to bottom right, #F3E5ED, #DBEAFE)", + onClick: () => {}, + onMouseEnter: () => {}, + onMouseLeave: () => {}, }; export default IconAIFixesButton; diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap index 0940e65214f..e0c89238aad 100644 --- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap +++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap @@ -35,9 +35,6 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = ` .c1 { overflow: hidden; border: none; - border-image: none; - -webkit-clip-path: inset(0 round 3px); - clip-path: inset(0 round 3px); background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important; box-shadow: inset 0 -2px 0 #B94986; } @@ -53,6 +50,8 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = ` disabled={false} id="keyphraseInIntroductionAIFixes" onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} type="button" /> `; @@ -91,10 +90,7 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = ` .c1 { overflow: hidden; - border: 1px solid transparent; - border-image: linear-gradient(to bottom right,#CD82AB,#93C5FD) 1; - -webkit-clip-path: inset(0 round 3px); - clip-path: inset(0 round 3px); + border: 1px solid #A5B4FC; background-image: linear-gradient(to bottom right,#FAF3F7,#EFF6FF) !important; box-shadow: 0 1px 0 rgba( 204,204,204,0.7 ); } @@ -110,6 +106,8 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = ` disabled={true} id="keyphraseDensityAIFixes" onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} type="button" /> `; diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index a488200d8f9..c0380ebf0d4 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { __ } from "@wordpress/i18n"; -import { useCallback, useRef } from "@wordpress/element"; +import { useCallback, useRef, useState } from "@wordpress/element"; import { doAction } from "@wordpress/hooks"; import { useSelect, useDispatch } from "@wordpress/data"; @@ -23,12 +23,13 @@ import { SparklesIcon } from "./sparkles-icon"; */ const AIAssessmentFixesButton = ( { id, isPremium } ) => { const aiFixesId = id + "AIFixes"; - const ariaLabel = __( "Fix with AI", "wordpress-seo" ); + const ariaLabel = __( "Optimize with AI", "wordpress-seo" ); const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false ); const activeAIButtonId = useSelect( select => select( "yoast-seo/editor" ).getActiveAIFixesButton(), [] ); const activeMarker = useSelect( select => select( "yoast-seo/editor" ).getActiveMarker(), [] ); const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch( "yoast-seo/editor" ); const focusElementRef = useRef( null ); + const [ buttonClass, setButtonClass ] = useState( "" ); /** * Handles the button press state. @@ -50,6 +51,9 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { } else { setActiveAIFixesButton( aiFixesId ); } + + // Dismiss the tooltip when the button is pressed. + setButtonClass( "" ); }; const handleClick = useCallback( () => { @@ -67,16 +71,26 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { // The button is pressed when the active AI button id is the same as the current button id. const isButtonPressed = activeAIButtonId === aiFixesId; - // Don't show the tooltip when the button is pressed. - const className = isButtonPressed ? "" : "yoast-tooltip yoast-tooltip-w"; + // Add tooltip classes on mouse enter and remove them on mouse leave. + const handleMouseEnter = useCallback( () => { + // Add tooltip classes on mouse enter + setButtonClass( "yoast-tooltip yoast-tooltip-w" ); + }, [] ); + + const handleMouseLeave = useCallback( () => { + // Remove tooltip classes on mouse leave + setButtonClass( "" ); + }, [] ); return ( <> diff --git a/packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js b/packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js index a8c88a8ee99..122ab2964f8 100644 --- a/packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js +++ b/packages/js/tests/ai-assessment-fixes/components/AIAssessmentFixesButton.test.js @@ -29,7 +29,7 @@ describe( "AIAssessmentFixesButton", () => { test( "should find the correct aria-label in the document", () => { render( ); - const labelText = document.querySelector( 'button[aria-label="Fix with AI"]' ); + const labelText = document.querySelector( 'button[aria-label="Optimize with AI"]' ); expect( labelText ).toBeInTheDocument(); } ); @@ -39,11 +39,11 @@ describe( "AIAssessmentFixesButton", () => { expect( button ).toBeInTheDocument(); } ); - test( "should find the button with tooltip when the button is NOT pressed", () => { + test( "should find the button without tooltip when the button is NOT hovered", () => { render( ); - const buttonWithTooltip = document.getElementsByClassName( "yoast-tooltip yoast-tooltip-w" ); - expect( buttonWithTooltip ).toHaveLength( 1 ); + const buttonWithOutTooltip = document.getElementsByClassName( "ai-button" ); + expect( buttonWithOutTooltip ).toHaveLength( 1 ); } ); test( "should find the button without tooltip when the button is pressed", () => {