From 0169fac0c22c78f4873bfca6c8cfaaf35117ba01 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Tue, 11 Jun 2024 15:10:48 +0200 Subject: [PATCH 01/13] Removes unused props --- packages/components/src/IconAIFixesButton.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/IconAIFixesButton.js b/packages/components/src/IconAIFixesButton.js index 4aa0200144a..ed34d1c5b5e 100644 --- a/packages/components/src/IconAIFixesButton.js +++ b/packages/components/src/IconAIFixesButton.js @@ -29,7 +29,7 @@ const IconAIFixesButton = function( props ) { aria-label={ props.ariaLabel } aria-pressed={ props.pressed } pressedIconColor={ props.pressedIconColor } - hoverBackgroundColor={ props.hoverBackgroundColor } + // hoverBackgroundColor={ props.hoverBackgroundColor } unpressedBorderColor={ props.unpressedBorderColor } className={ props.className } > @@ -51,7 +51,7 @@ IconAIFixesButton.propTypes = { pressedIconColor: PropTypes.string, pressed: PropTypes.bool.isRequired, unpressedBorderColor: PropTypes.string, - hoverBackgroundColor: PropTypes.string, + // hoverBackgroundColor: PropTypes.string, className: PropTypes.string, }; @@ -63,7 +63,7 @@ IconAIFixesButton.defaultProps = { 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)", + // hoverBackgroundColor: "linear-gradient(to bottom right, #F3E5ED, #DBEAFE)", }; export default IconAIFixesButton; From f6ecd129adfb95ad1d6e8d9afd98e7ceca1346fc Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Tue, 11 Jun 2024 16:36:07 +0200 Subject: [PATCH 02/13] Changes the tooltip text --- .../components/ai-assessment-fixes-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..22d069db473 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 @@ -23,7 +23,7 @@ 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(), [] ); From 5a3c75c04305cd423f3052a3c8f665756d81a7ca Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Tue, 11 Jun 2024 20:42:22 +0200 Subject: [PATCH 03/13] Creates a uniformed border color --- packages/components/src/AIFixesButton.js | 4 +--- packages/components/src/IconAIFixesButton.js | 6 ------ 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js index 3569bb3328e..237c3d57bf3 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 #c7d2fe" }; /*indigo-200*/ 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 ed34d1c5b5e..81272758f9c 100644 --- a/packages/components/src/IconAIFixesButton.js +++ b/packages/components/src/IconAIFixesButton.js @@ -29,8 +29,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 } @@ -50,8 +48,6 @@ IconAIFixesButton.propTypes = { unpressedBackground: PropTypes.string, pressedIconColor: PropTypes.string, pressed: PropTypes.bool.isRequired, - unpressedBorderColor: PropTypes.string, - // hoverBackgroundColor: PropTypes.string, className: PropTypes.string, }; @@ -62,8 +58,6 @@ 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)", }; export default IconAIFixesButton; From 1c2a3379c99c3a66350f564fb81537e0527fde09 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 09:52:46 +0200 Subject: [PATCH 04/13] Adjusts border color to indigo-300 --- packages/components/src/AIFixesButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js index 237c3d57bf3..4f3e96d7ef6 100644 --- a/packages/components/src/AIFixesButton.js +++ b/packages/components/src/AIFixesButton.js @@ -23,7 +23,7 @@ const gradientEffect = { const AIFixesButtonBase = styled( IconButtonBase )` overflow: hidden; - border: ${ props => props.pressed ? "none" : "1px solid #c7d2fe" }; /*indigo-200*/ + border: ${ props => props.pressed ? "none" : "1px solid #A5B4FC" }; /*indigo-300*/ background-image: ${ props => props.pressed ? gradientEffect.pressedStateBackground : gradientEffect.defaultStateBackground } !important; From 805231d209767c324606b113c3e2fdf3b055d105 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 10:51:39 +0200 Subject: [PATCH 05/13] Refactors the tooltip logic --- packages/components/src/IconAIFixesButton.js | 4 ++++ .../components/ai-assessment-fixes-button.js | 21 +++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/components/src/IconAIFixesButton.js b/packages/components/src/IconAIFixesButton.js index 81272758f9c..0630009d46e 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 } @@ -42,6 +44,8 @@ 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, 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 22d069db473..507259d66a9 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 @@ -3,6 +3,7 @@ import { __ } from "@wordpress/i18n"; import { useCallback, useRef } from "@wordpress/element"; import { doAction } from "@wordpress/hooks"; import { useSelect, useDispatch } from "@wordpress/data"; +import React, { useState } from 'react'; /* Yoast dependencies */ import { IconAIFixesButton } from "@yoast/components"; @@ -21,7 +22,7 @@ import { SparklesIcon } from "./sparkles-icon"; * * @returns {JSX.Element} The AI Assessment Fixes button. */ -const AIAssessmentFixesButton = ( { id, isPremium } ) => { +const AIAssessmentFixesButton = ({ id, isPremium, className } ) => { const aiFixesId = id + "AIFixes"; const ariaLabel = __( "Optimize with AI", "wordpress-seo" ); const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false ); @@ -29,6 +30,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { 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. @@ -67,16 +69,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 ( <> @@ -97,6 +109,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { AIAssessmentFixesButton.propTypes = { id: PropTypes.string.isRequired, isPremium: PropTypes.bool, + className: PropTypes.string, }; AIAssessmentFixesButton.defaultProps = { From b574bbc3556394a8b2a21135788e25764b771733 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 10:57:38 +0200 Subject: [PATCH 06/13] Removes tooltip animation delay --- css/src/tooltips.css | 1 - 1 file changed, 1 deletion(-) 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; } From 8005c7bb7144232cb4d0b80305f69e1b800b5797 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 11:23:44 +0200 Subject: [PATCH 07/13] Corrects Linter errors --- .../components/ai-assessment-fixes-button.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 507259d66a9..4891a8ba3ed 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,9 +1,8 @@ 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"; -import React, { useState } from 'react'; /* Yoast dependencies */ import { IconAIFixesButton } from "@yoast/components"; @@ -22,7 +21,7 @@ import { SparklesIcon } from "./sparkles-icon"; * * @returns {JSX.Element} The AI Assessment Fixes button. */ -const AIAssessmentFixesButton = ({ id, isPremium, className } ) => { +const AIAssessmentFixesButton = ( { id, isPremium } ) => { const aiFixesId = id + "AIFixes"; const ariaLabel = __( "Optimize with AI", "wordpress-seo" ); const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false ); @@ -30,7 +29,7 @@ const AIAssessmentFixesButton = ({ id, isPremium, className } ) => { 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(''); + const [buttonClass, setButtonClass] = useState( "" ); /** * Handles the button press state. From 6a2027322b0c1bf20be4c555d96b88429ef148ed Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 11:32:28 +0200 Subject: [PATCH 08/13] Removes unnecessary prop --- .../components/ai-assessment-fixes-button.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 4891a8ba3ed..7920ace4cf9 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 @@ -29,7 +29,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { 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( "" ); + const [ buttonClass, setButtonClass ] = useState( "" ); /** * Handles the button press state. @@ -108,7 +108,6 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { AIAssessmentFixesButton.propTypes = { id: PropTypes.string.isRequired, isPremium: PropTypes.bool, - className: PropTypes.string, }; AIAssessmentFixesButton.defaultProps = { From c58ffc72818699966ec33e3fe2ac3b21fde98a90 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 12:41:35 +0200 Subject: [PATCH 09/13] Updates unit tests --- .../components/ai-assessment-fixes-button.js | 2 +- .../components/AIAssessmentFixesButton.test.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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 7920ace4cf9..4f6c0079743 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 @@ -87,7 +87,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } id={ aiFixesId } - className={ buttonClass } + className={ `ai-button ${buttonClass}` } pressed={ isButtonPressed } > 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", () => { From c2f5c2ee8a36de86f5a68890818a003b242bd3b4 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 14:14:19 +0200 Subject: [PATCH 10/13] Removes the tooltip if the button is pressed --- .../components/ai-assessment-fixes-button.js | 3 +++ 1 file changed, 3 insertions(+) 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 4f6c0079743..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 @@ -51,6 +51,9 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { } else { setActiveAIFixesButton( aiFixesId ); } + + // Dismiss the tooltip when the button is pressed. + setButtonClass( "" ); }; const handleClick = useCallback( () => { From d58d03e52c84bcede15e1d0fe8765aa9ac7501f5 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 14:22:37 +0200 Subject: [PATCH 11/13] Updates snapshots tests --- .../tests/__snapshots__/IconAIFixesButtonTest.js.snap | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap index 0940e65214f..21243c4db01 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; } @@ -91,10 +88,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 ); } From b85b618f15affd3676165256efc5ccb477e31ee1 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 17:22:50 +0200 Subject: [PATCH 12/13] Adds default props --- packages/components/src/IconAIFixesButton.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/IconAIFixesButton.js b/packages/components/src/IconAIFixesButton.js index 0630009d46e..a8e2711a4f1 100644 --- a/packages/components/src/IconAIFixesButton.js +++ b/packages/components/src/IconAIFixesButton.js @@ -62,6 +62,9 @@ IconAIFixesButton.defaultProps = { pressedBackground: "linear- gradient(to bottom right, #A61E69, #3B82F6)", unpressedBackground: "linear-gradient(to bottom right, #FAF3F7, #EFF6FF)", pressedIconColor: colors.$color_white, + onClick: () => {}, + onMouseEnter: () => {}, + onMouseLeave: () => {}, }; export default IconAIFixesButton; From 4631d2626275b7aa57f5afcf342be451a4fe94f1 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Wed, 12 Jun 2024 17:29:19 +0200 Subject: [PATCH 13/13] Updates snapshot tests --- .../tests/__snapshots__/IconAIFixesButtonTest.js.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap index 21243c4db01..e0c89238aad 100644 --- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap +++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap @@ -50,6 +50,8 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = ` disabled={false} id="keyphraseInIntroductionAIFixes" onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} type="button" /> `; @@ -104,6 +106,8 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = ` disabled={true} id="keyphraseDensityAIFixes" onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} type="button" /> `;