update popover

Author: kaeizen

src/components/icon-search-popover/index.js

@@ -11,7 +11,9 @@ import {
 	PanelBody, TextControl, Spinner,
 } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
-import { useState, useEffect } from '@wordpress/element'
+import {
+	useState, useEffect, Fragment,
+} from '@wordpress/element'
 
 /**
  * External dependencies
@@ -25,7 +27,7 @@ import {
 import { faGetIcon, faFetchIcon } from '~stackable/util'
 import { FileDrop } from 'react-file-drop'
 import classnames from 'classnames'
-import { applyFilters } from '@wordpress/hooks'
+import { applyFilters, doAction } from '@wordpress/hooks'
 
 let searchTimeout = null
 let tempMediaUpload = null
@@ -152,9 +154,7 @@ const IconSearchPopover = props => {
 				setIsDropping( false )
 				const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
 
-				if ( isPro && props.showPrompt ) {
-					applyFilters( 'stackable.global-settings.inspector.icon-library.prompt', null, svgString )
-				}
+				doAction( 'stackable.icon-search-popover.svg-upload', svgString )
 
 				props.onChange( svgString )
 				props.onClose()
@@ -173,6 +173,8 @@ const IconSearchPopover = props => {
 		'ugb-icon--has-reset': props.allowReset,
 	} )
 
+	const IconLibraryIcons = applyFilters( 'stackable.global-settings.inspector.icon-library.icons', Fragment )
+
 	const content = (
 		<div className="stk-icon-search-popover-container">
 			<FileDrop
@@ -249,9 +251,11 @@ const IconSearchPopover = props => {
 				</div>
 				<div className="ugb-icon-popover__iconlist">
 					{ isBusy && <Spinner /> }
-					{ ! isBusy && applyFilters( 'stackable.global-settings.inspector.icon-library.icons', null, {
-						icons: results.iconLibrary, onChange: props.onChange, onClose: props.onClose,
-					} ) }
+					{ ! isBusy && <IconLibraryIcons
+						icons={ results.iconLibrary }
+						onChange={ props.onChange }
+						onClose={ props.onClose }
+					/> }
 					{ ! isBusy && results.faIcons.map( ( { prefix, iconName }, i ) => {
 						const iconValue = `${ prefix }-${ iconName }`
 						return <button
@@ -326,7 +330,6 @@ IconSearchPopover.defaultProps = {
 	onClose: noop,
 	returnSVGValue: true, // If true, the value provided in onChange will be the SVG markup of the icon. If false, the value will be a prefix-iconName value.
 	allowReset: true,
-	showPrompt: true,
 	__deprecatedAnchorRef: undefined,
 	__deprecatedPosition: 'center',
 	__deprecatedOnClickOutside: noop,

src/components/sortable-picker/index.js

@@ -20,6 +20,12 @@ import {
 import { useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 
+const addItemPopoverProps = {
+	placement: 'left-start',
+	offset: 236,
+	shift: true,
+}
+
 const popoverProps = {
 	placement: 'left-start',
 	offset: 36,
@@ -59,6 +65,7 @@ const SortablePicker = props => {
 	return (
 		<BaseControl className={ classNames } label={ props.label }>
 			<Dropdown
+				popoverProps={ addItemPopoverProps }
 				renderToggle={ ( { onToggle, isOpen } ) => (
 					<Button
 						className="ugb-global-settings-color-picker__add-button"
@@ -189,9 +196,7 @@ const LabeledItemIndicator = props => {
 					)
 				} }
 				renderContent={ () => (
-					<div className="stk-color-palette-control__popover-content">
-						<ItemPicker item={ item } onChange={ onChange } />
-					</div>
+					<ItemPicker item={ item } onChange={ onChange } />
 				) }
 			/>
 			<Button

src/plugins/global-settings/colors/color-picker.js

@@ -135,14 +135,16 @@ const ColorPickers = props => {
 	  }
 
 	  const ItemPicker = ( { item, onChange } ) => {
-		return <ColorPicker
-			onChange={ value => onChange( {
-				...item,
-				color: value,
-			} ) }
-			color={ item.color }
-			enableAlpha={ true }
-		/>
+		return <div className="stk-color-palette-control__popover-content">
+			<ColorPicker
+				onChange={ value => onChange( {
+					...item,
+					color: value,
+				} ) }
+				color={ item.color }
+				enableAlpha={ true }
+			/>
+		</div>
 	  }
 
 	return (

src/plugins/global-settings/editor.scss

@@ -1,5 +1,5 @@
 .ugb-global-settings__inspector.components-panel {
-	.components-panel__body-title {
+	.components-panel__body  .components-panel__body-title {
 		top: 48px;
 	}
 }