woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 16:24:33 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Shorten generic CSS class names

Browse source
This commit is contained in:
Philipp Stracker 2025-01-22 17:19:23 +01:00
parent 765793b94b
commit cb474dcce7
No known key found for this signature in database
9 changed files with 22 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js
View file

@ -1,5 +1,5 @@
const Action = ( { children } ) => (
<div className="ppcp-r-settings-block__action">{ children }</div>
<div className="ppcp--action">{ children }</div>
);
export default Action;

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js
View file

@ -1,7 +1,7 @@
import classNames from 'classnames';
const Content = ( { children, asCard = true, className = '', id = '' } ) => {
const elementClasses = classNames( 'ppcp-r-settings-content', className, {
const elementClasses = classNames( 'ppcp--content', className, {
'ppcp--is-card': asCard,
} );

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js
View file

@ -6,10 +6,7 @@ const Description = ( { children, className = '' } ) => {
return null;
}
const elementClasses = classNames(
'ppcp-r-settings-block__description',
className
);
const elementClasses = classNames( 'ppcp--description', className );
if ( 'string' !== typeof children ) {
return <span className={ elementClasses }>{ children }</span>;

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js
View file

@ -5,10 +5,7 @@ const Header = ( { children, className = '' } ) => {
return null;
}
const elementClasses = classNames(
'ppcp-r-settings-block__header',
className
);
const elementClasses = classNames( 'ppcp--header', className );
return <div className={ elementClasses }>{ children }</div>;
};

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js
View file

@ -5,14 +5,10 @@ const Title = ( { children, noCaps = false, big = false, className = '' } ) => {
return null;
}
const elementClasses = classNames(
'ppcp-r-settings-block__title',
className,
{
'ppcp--no-caps': noCaps,
'ppcp--big': big,
}
);
const elementClasses = classNames( 'ppcp--title', className, {
'ppcp--no-caps': noCaps,
'ppcp--big': big,
} );
return <span className={ elementClasses }>{ children }</span>;
};

6
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleExtra.js
View file

@ -3,11 +3,7 @@ const TitleExtra = ( { children } ) => {
return null;
}
return (
<span className="ppcp-r-settings-block__supplementary-title-label">
{ children }
</span>
);
return <span className="ppcp--title-extra">{ children }</span>;
};
export default TitleExtra;

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js
View file

@ -1,5 +1,5 @@
const TitleWrapper = ( { children } ) => (
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
<span className="ppcp--title-wrapper">{ children }</span>
);
export default TitleWrapper;

8
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlToggleButton.js
View file

@ -2,15 +2,19 @@ import { ToggleControl } from '@wordpress/components';
import { Action, Description } from '../Elements';
const ControlToggleButton = ( { label, description, value, onChange } ) => {
const descriptionContent = description ? (
<Description>{ description }</Description>
) : null;
return (
<Action>
<ToggleControl
className="ppcp-r-settings-block__toggle-control"
className="ppcp--control-toggle"
__nextHasNoMarginBottom={ true }
checked={ value }
onChange={ onChange }
label={ label }
help={ <Description>{ description }</Description> }
help={ descriptionContent }
/>
</Action>
);