woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +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

12
modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
View file

@ -11,7 +11,7 @@
gap: 6px 0; gap: 6px 0;
} }
.ppcp-r-settings-block__header { .ppcp--header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
@ -21,7 +21,7 @@
} }
} }
.ppcp-r-settings-block__title { .ppcp--title {
@include font(11, 22, 600); @include font(11, 22, 600);
color: var(--color-text-title); color: var(--color-text-title);
display: block; display: block;
@ -42,14 +42,14 @@
} }
} }
.ppcp-r-settings-block__title-wrapper { .ppcp--title-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
&.ppcp-r-settings-block__feature { &.ppcp-r-settings-block__feature {
.ppcp-r-settings-block__title { .ppcp--title {
@include font(13, 20, 600); @include font(13, 20, 600);
color: var(--color-text-main); color: var(--color-text-main);
text-transform: none; text-transform: none;
@ -72,7 +72,7 @@
} }
} }
.ppcp-r-settings-block__description { .ppcp--description {
@include font(13, 20, 400); @include font(13, 20, 400);
margin: 0; margin: 0;
color: var(--color-text-description); color: var(--color-text-description);
@ -90,7 +90,7 @@
} }
} }
.ppcp-r-settings-block__supplementary-title-label { .ppcp--title-extra {
@include font(13, 20, 400); @include font(13, 20, 400);
color: var(--color-text-teriary); color: var(--color-text-teriary);
text-transform: none; text-transform: none;

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

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

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

@ -1,7 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
const Content = ( { children, asCard = true, className = '', id = '' } ) => { 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, '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; return null;
} }
const elementClasses = classNames( const elementClasses = classNames( 'ppcp--description', className );
'ppcp-r-settings-block__description',
className
);
if ( 'string' !== typeof children ) { if ( 'string' !== typeof children ) {
return <span className={ elementClasses }>{ children }</span>; 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; return null;
} }
const elementClasses = classNames( const elementClasses = classNames( 'ppcp--header', className );
'ppcp-r-settings-block__header',
className
);
return <div className={ elementClasses }>{ children }</div>; 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; return null;
} }
const elementClasses = classNames( const elementClasses = classNames( 'ppcp--title', className, {
'ppcp-r-settings-block__title', 'ppcp--no-caps': noCaps,
className, 'ppcp--big': big,
{ } );
'ppcp--no-caps': noCaps,
'ppcp--big': big,
}
);
return <span className={ elementClasses }>{ children }</span>; 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 null;
} }
return ( return <span className="ppcp--title-extra">{ children }</span>;
<span className="ppcp-r-settings-block__supplementary-title-label">
{ children }
</span>
);
}; };
export default TitleExtra; export default TitleExtra;

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

@ -1,5 +1,5 @@
const TitleWrapper = ( { children } ) => ( const TitleWrapper = ( { children } ) => (
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span> <span className="ppcp--title-wrapper">{ children }</span>
); );
export default TitleWrapper; 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'; import { Action, Description } from '../Elements';
const ControlToggleButton = ( { label, description, value, onChange } ) => { const ControlToggleButton = ( { label, description, value, onChange } ) => {
const descriptionContent = description ? (
<Description>{ description }</Description>
) : null;
return ( return (
<Action> <Action>
<ToggleControl <ToggleControl
className="ppcp-r-settings-block__toggle-control" className="ppcp--control-toggle"
__nextHasNoMarginBottom={ true } __nextHasNoMarginBottom={ true }
checked={ value } checked={ value }
onChange={ onChange } onChange={ onChange }
label={ label } label={ label }
help={ <Description>{ description }</Description> } help={ descriptionContent }
/> />
</Action> </Action>
); );