Fix eslint cyclomatic complexity issues in assets/js/googlesitekit/components-gm2/Button.js

Feature Description

The current value for maximum cyclomatic complexity is 15. Currently in assets/js/googlesitekit/components-gm2/Button.js, this is overridden with

  /* eslint complexity: [ "error", 19 ] */

Fix the eslint cyclomatic complexity issues in this file such that we do not need to override this rule in file-level and above file-level eslint rule can be removed.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

ESLint complexity overrides in assets/js/googlesitekit/components-gm2/Button.js are removed.
Simplify the Button component to lower its complexity such that it is no no longer flagged by eslint.

Implementation Brief

Create a directory Button inside assets/js/googlesitekit/components-gm2/

Create index.js file inside the directory where the main Button component will reside.

Create a component SemanticButton. It should return ButtonTag (either <a> or <button>) as in the current component.

site-kit-wp/assets/js/googlesitekit/components-gm2/Button.js

Lines 101 to 126 in f00a02f

    
           <SemanticButton 
        
           	className={ classnames( 'mdc-button', className, { 
        
           		'mdc-button--raised': ! text && ! tertiary && ! callout, 
        
           		'mdc-button--danger': danger, 
        
           		'mdc-button--inverse': inverse, 
        
           		'mdc-button--tertiary': tertiary, 
        
           		'mdc-button--callout': callout, 
        
           		'mdc-button--callout-primary': 
        
           			callout || calloutStyle === 'primary', 
        
           		'mdc-button--callout-warning': calloutStyle === 'warning', 
        
           		'mdc-button--callout-error': calloutStyle === 'error', 
        
           	} ) } 
        
           	href={ disabled ? undefined : href } 
        
           	ref={ mergedRefs } 
        
           	disabled={ !! disabled } 
        
           	aria-label={ getAriaLabel() } 
        
           	target={ target || '_self' } 
        
           	role={ 'a' === SemanticButton ? 'button' : undefined } 
        
           	{ ...extraProps } 
        
           > 
        
           	{ icon } 
        
           	{ children && ( 
        
           		<span className="mdc-button__label">{ children }</span> 
        
           	) } 
        
           	{ trailingIcon } 
        
           </SemanticButton>

Accept all necessary props in the SemanticButton component which are being used as shown in above snippet.

Create a component MaybeTooltip in assets/js/googlesitekit/components-gm2/Button/ to indicate its conditionality, like this MaybePlaceholderTile.

This should accept the children prop along with other necessary props as can be seen for the below part of the code in current component.

site-kit-wp/assets/js/googlesitekit/components-gm2/Button.js

Lines 139 to 145 in f00a02f

    
           	<Tooltip 
        
           		title={ tooltipTitle } 
        
           		enterDelay={ tooltipEnterDelayInMS } 
        
           	> 
        
           		{ ButtonComponent } 
        
           	</Tooltip> 
        
           );

It should wrap the children with the Tooltip component only when the condition is satisfied, else return the children without wrapping.

site-kit-wp/assets/js/googlesitekit/components-gm2/Button.js

Lines 133 to 137 in f00a02f

    
           if ( 
        
           	! disabled && 
        
           	( ( tooltip && tooltipTitle ) || 
        
           		( icon && tooltipTitle && children === undefined ) ) 
        
           ) {

Update the main Button component inside assets/js/googlesitekit/components-gm2/Button/index.js
- Import the above created components in Button and use them in the render method.
Move the stories file for the Button component to the new Button folder.
Remove the old Button component and update the imports across code.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature Description

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<SemanticButton
	className={ classnames( 'mdc-button', className, {
	'mdc-button--raised': ! text && ! tertiary && ! callout,
	'mdc-button--danger': danger,
	'mdc-button--inverse': inverse,
	'mdc-button--tertiary': tertiary,
	'mdc-button--callout': callout,
	'mdc-button--callout-primary':
	callout \|\| calloutStyle === 'primary',
	'mdc-button--callout-warning': calloutStyle === 'warning',
	'mdc-button--callout-error': calloutStyle === 'error',
	} ) }
	href={ disabled ? undefined : href }
	ref={ mergedRefs }
	disabled={ !! disabled }
	aria-label={ getAriaLabel() }
	target={ target \|\| '_self' }
	role={ 'a' === SemanticButton ? 'button' : undefined }
	{ ...extraProps }
	>
	{ icon }
	{ children && (
	<span className="mdc-button__label">{ children }</span>
	) }
	{ trailingIcon }
	</SemanticButton>

	<Tooltip
	title={ tooltipTitle }
	enterDelay={ tooltipEnterDelayInMS }
	>
	{ ButtonComponent }
	</Tooltip>
	);

	if (
	! disabled &&
	( ( tooltip && tooltipTitle ) \|\|
	( icon && tooltipTitle && children === undefined ) )
	) {

Description

Feature Description

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions