fix to coderabbit's qa

Author: kaeizen

src/components/sortable-picker/index.js

@@ -207,7 +207,7 @@ const LabeledItemIndicator = props => {
 								}
 							} }
 							isPressed={ isOpen }
-							data-item-key={ item.key }
+							data-item-key={ item.key || item.slug || item.name }
 						>
 							<HStack justify="flex-start">
 								<ItemPreview item={ item } />

src/lazy-components/modal-tour/tours/advanced-hover-states.js

@@ -164,14 +164,17 @@ export const advancedHoverStates = {
 			position: 'left',
 			glowTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="parent-hover"]',
 			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="parent-hover"]',
+			modalDelay: 150,
 			preStep: () => {
 				setTimeout( () => {
 					const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
 					const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
-					editorSidebar.scrollTo( {
-						top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
-						behavior: 'smooth',
-					} )
+					if ( editorSidebar && typeof targetElTop === 'number' ) {
+						editorSidebar.scrollTo( {
+							top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
+							behavior: 'smooth',
+						} )
+					}
 
 					document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
 				}, 100 )

src/lazy-components/modal-tour/tours/block-backgrounds.js

@@ -119,7 +119,7 @@ export const blockBackgrounds = {
 					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
 				}
 
-				waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' ).then( () => {
+				waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' ).then( () => {
 					// Click the tab
 					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
 				} )

src/lazy-components/modal-tour/tours/global-color-schemes.js

@@ -204,10 +204,10 @@ export const globalColorSchemes = {
 					const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
 					if ( columnsBlock ) {
 						dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
-						await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )
+						await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' )
 						document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
 
-						await waitForElement( '.ugb-block-background-panel:not(.is-opened) button' )
+						await waitForElement( '.ugb-block-background-panel button' )
 						document.querySelector( '.ugb-block-background-panel:not(.is-opened) button' )?.click()
 					}
 				}

src/lazy-components/modal-tour/tours/hover-states.js

@@ -22,7 +22,7 @@ export const hoverStates = {
 		// Select the inner columns block for the tour
 		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
 
-		waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' ).then( () => {
+		waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' ).then( () => {
 			document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
 			setTimeout( () => {
 				document.querySelector( '.ugb-panel--image:not(.is-opened)' )?.click()
@@ -114,7 +114,7 @@ export const hoverStates = {
 			},
 			postStep: () => {
 				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
-				waitForElement( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' ).then( () => {
+				waitForElement( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]' ).then( () => {
 					document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' )?.click()
 				} )
 			},

src/lazy-components/modal-tour/tours/responsive-controls.js

@@ -92,11 +92,11 @@ export const responsiveControls = {
 				if ( columnsBlock ) {
 					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
 				}
-				await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )
+				await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--layout' )
 				// Open Layout tab if it's not open
 				document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
 
-				await waitForElement( '.ugb-panel--layout:not(.is-opened)' )
+				await waitForElement( '.ugb-panel--layout' )
 				document.querySelector( '.ugb-panel--layout:not(.is-opened)' )?.click()
 			},
 			postStep: () => {
@@ -173,7 +173,7 @@ export const responsiveControls = {
 			postStep: async () => {
 				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
 
-				await waitForElement( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )
+				await waitForElement( '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]' )
 				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )?.click()
 			},
 		},

src/welcome/admin.scss

@@ -207,7 +207,7 @@ body[class*="page_stk-"] {
 		justify-content: flex-end;
 	}
 
-	:not(.s-quick-buttons-arrow) svg {
+	svg {
 		height: 24px;
 		width: 24px;
 	}

src/welcome/getting-started.scss

@@ -271,6 +271,7 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 		right: 69px;
 		svg {
 			width: 64px;
+			height: auto;
 			transform: scaleX(-1);
 		}
 		span {