Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show one help text when user clicks help button (#41435) 

* Fix styles

* Add className to Tooltip component

* Add prop in edit-attribute-modal

* Add changelogs

* Add tooltip class to section
This commit is contained in:
Fernando Marichal 2023-11-16 11:59:25 -03:00 committed by GitHub
parent b61b86545a
commit 4e383b647b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-40205_show_one_help_text_when_user_clicks_button Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Add className prop to Tooltip component #41435

10
packages/js/components/src/tooltip/tooltip.tsx
View File

@ -2,6 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Button, Popover } from '@wordpress/components';
import { createElement, Fragment, useState } from '@wordpress/element';
import { FocusEvent, KeyboardEvent } from 'react';
@ -23,10 +24,12 @@ type TooltipProps = {
helperText?: string;
position?: Position;
text: JSX.Element | string;
className?: string;
};
export const Tooltip: React.FC< TooltipProps > = ( {
children = <Icon icon={ help } />,
className = '',
helperText = __( 'Help', 'woocommerce' ),
position = 'top center',
text,
@ -37,7 +40,10 @@ export const Tooltip: React.FC< TooltipProps > = ( {
<>
<div className="woocommerce-tooltip">
<Button
className="woocommerce-tooltip__button"
className={ classnames(
'woocommerce-tooltip__button',
className
) }
onKeyDown={ (
event: KeyboardEvent< HTMLButtonElement >
) => {
@ -60,7 +66,7 @@ export const Tooltip: React.FC< TooltipProps > = ( {
onFocusOutside={ ( event: FocusEvent ) => {
if (
event.relatedTarget?.classList.contains(
'woocommerce-tooltip__button'
className
)
) {
return;

4
packages/js/product-editor/changelog/fix-40205_show_one_help_text_when_user_clicks_button Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Show one help text when user clicks tooltip button #41435

3
packages/js/product-editor/src/blocks/generic/section/edit.tsx
View File

@ -20,6 +20,7 @@ import { ProductEditorBlockEditProps } from '../../../types';
export function Edit( {
attributes,
clientId,
}: ProductEditorBlockEditProps< SectionBlockAttributes > ) {
const { description, title, blockGap } = attributes;
const blockProps = useWooBlockProps( attributes );
@ -34,6 +35,7 @@ export function Edit( {
);
const SectionTagName = title ? 'fieldset' : 'div';
const HeadingTagName = SectionTagName === 'fieldset' ? 'legend' : 'div';
const tooltipClassName = `wp-block-woocommerce-product-section__heading-tooltip-${ clientId }`;
return (
<SectionTagName { ...blockProps }>
@ -43,6 +45,7 @@ export function Edit( {
{ title }
{ description && (
<Tooltip
className={ tooltipClassName }
text={
<p
className="wp-block-woocommerce-product-section__heading-description"

2
packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.scss
View File

@ -32,7 +32,7 @@
flex-direction: row;
align-items: center;
.components-checkbox-control .components-base-control__field {
.components-base-control, .components-base-control__field {
margin-bottom: 0;
}
}

15
packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.tsx
View File

@ -232,7 +232,10 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
checked={ editableAttribute?.isDefault }
label={ isDefaultLabel }
/>
<Tooltip text={ isDefaultTooltip } />
<Tooltip
className="woocommerce-edit-attribute-modal__tooltip-set-default-value"
text={ isDefaultTooltip }
/>
</div>
) }
@ -247,7 +250,10 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
checked={ editableAttribute?.visible }
label={ visibleLabel }
/>
<Tooltip text={ visibleTooltip } />
<Tooltip
className="woocommerce-edit-attribute-modal__tooltip-show-in-product-details"
text={ visibleTooltip }
/>
</div>
{ attribute.id !== 0 && (
/* Only supported for global attributes, and disabled for now as the 'Filter by Attributes' block does not support this yet. */
@ -260,7 +266,10 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
checked={ true }
label={ useAsFilterLabel }
/>
<Tooltip text={ useAsFilterTooltip } />
<Tooltip
className="woocommerce-edit-attribute-modal__tooltip-use-as-filter"
text={ useAsFilterTooltip }
/>
</div>
) }
</div>