Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Forms: add border options to select, radio, and checkbox blocks #40866

Open
wants to merge 11 commits into
base: trunk
Choose a base branch
from
Open

Forms: add border options to select, radio, and checkbox blocks #40866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
14564f6
Fix: #39675
enejb Jan 7, 2025
1596fc3
changelog
enejb Jan 7, 2025
7b1cf3f
fix the editor color for single checkbox
enejb Jan 7, 2025
9b2cac9
Fix single checkbox styling
enejb Jan 9, 2025
13ac043
Fix some themes that remove the checkbox
enejb Jan 9, 2025
9d6a134
Add blocksyles to the consent checkbox
enejb Jan 9, 2025
9f49b5b
style hardening makes sure that the radio and checkboxes look more li…
enejb Jan 10, 2025
2f3450b
fix opacity
enejb Jan 17, 2025
7555606
Fix up the button styles colour when you have radio buttons
enejb Jan 18, 2025
5394f1c
Improve alignment.
enejb Jan 18, 2025
25fba72
Fix form color overwrite
enejb Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/add-border-styling-radio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Fixes the styling options for multi select options
5 changes: 5 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,11 @@ function JetpackFieldCheckbox( props ) {
onChange: value => setAttributes( { labelColor: value } ),
label: __( 'Label Text', 'jetpack-forms' ),
},
{
value: attributes.borderColor,
onChange: value => setAttributes( { borderColor: value } ),
label: __( 'Border', 'jetpack-forms' ),
},
] }
/>
<PanelBody
Expand Down
1 change: 1 addition & 0 deletions projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const JetpackFieldChoiceEdit = props => {
const classes = clsx( className, 'jetpack-field jetpack-field-multiple', {
'is-selected': isSelected,
'has-placeholder': ( options && options.length ) || innerBlocks.length,
'has-colors': attributes.inputColor || attributes.labelColor,
} );
const formStyle = useFormStyle( clientId );
const { blockStyle } = useJetpackFieldStyles( attributes );
Expand Down
8 changes: 8 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { withSharedFieldAttributes } from '../util/with-shared-field-attributes'
import JetpackFieldLabel from './jetpack-field-label';
import JetpackFieldWidth from './jetpack-field-width';
import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
import { useJetpackFieldStyles } from './use-jetpack-field-styles';

const JetpackFieldConsent = ( {
instanceId,
Expand All @@ -16,9 +17,11 @@ const JetpackFieldConsent = ( {
setAttributes,
attributes,
} ) => {
const { blockStyle } = useJetpackFieldStyles( attributes );
const blockProps = useBlockProps( {
id: `jetpack-field-consent-${ instanceId }`,
className: 'jetpack-field jetpack-field-consent',
style: blockStyle,
} );

return (
Expand Down Expand Up @@ -66,6 +69,11 @@ const JetpackFieldConsent = ( {
onChange: value => setAttributes( { labelColor: value } ),
label: __( 'Label Text', 'jetpack-forms' ),
},
{
value: attributes.borderColor,
onChange: value => setAttributes( { borderColor: value } ),
label: __( 'Border', 'jetpack-forms' ),
},
] }
/>
<PanelBody title={ __( 'Consent Settings', 'jetpack-forms' ) }>
Expand Down
14 changes: 11 additions & 3 deletions projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,14 @@ const JetpackFieldControls = ( {
extraFieldSettings = [],
} ) => {
const formStyle = useFormStyle( clientId );
const blockStyle = getBlockStyle( blockClassNames );

const blockStyle =
getBlockStyle( blockClassNames ) !== ''
? getBlockStyle( blockClassNames )
: attributes?.className && getBlockStyle( attributes.className );

const isChoicesBlock = [ 'radio', 'checkbox' ].includes( type );
const isRadioButton = type === 'radio' && blockStyle === 'button';

const setNumberAttribute =
( key, parse = parseInt ) =>
Expand Down Expand Up @@ -78,21 +84,23 @@ const JetpackFieldControls = ( {
},
];

if ( isChoicesBlock && blockStyle === 'button' ) {
if ( blockStyle === 'button' ) {
colorSettings.push( {
value: attributes.buttonBackgroundColor,
onChange: value => setAttributes( { buttonBackgroundColor: value } ),
label: __( 'Button Background', 'jetpack-forms' ),
} );
}

if ( ! isChoicesBlock || formStyle === FORM_STYLE.OUTLINED ) {
if ( formStyle === FORM_STYLE.OUTLINED ) {
colorSettings.push( {
value: attributes.fieldBackgroundColor,
onChange: value => setAttributes( { fieldBackgroundColor: value } ),
label: backgroundColorLabel,
} );
}

if ( ! isRadioButton ) {
colorSettings.push( {
value: attributes.borderColor,
onChange: value => setAttributes( { borderColor: value } ),
Expand Down
57 changes: 41 additions & 16 deletions projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
&[data-type='jetpack/field-checkbox'],
&[data-type='jetpack/field-consent'] {
align-self: center;
align-items: center;
}
}
}
Expand Down Expand Up @@ -328,28 +329,26 @@
margin-bottom: 0;
}

&.jetpack-field-consent .jetpack-field-consent__checkbox,
&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox,
&.jetpack-field-consent .jetpack-field-consent__checkbox {
margin: 0 0.75rem 0 0;
border-color: currentColor;
opacity: 1;
}

.jetpack-option__type.jetpack-option__type {
align-items: center;
all: initial;
appearance: none;
color: var(--jetpack--contact-form--text-color);
color: var(--jetpack--contact-form--border-color);
display: flex;
border: none;
font-size: var(--jetpack--contact-form--font-size, 16px );
font-family: var(--jetpack--contact-form--font-family);
height: var(--jetpack--contact-form--font-size, 16px );
opacity: 1;
justify-content: center;
margin: 0 10px 0 0;
outline: none;
position: relative;
width: var(--jetpack--contact-form--font-size, 16px);
min-width: var(--jetpack--contact-form--font-size, 16px);
flex-shrink: inherit;
pointer-events: none;

&::after, &::before {
Expand All @@ -361,24 +360,43 @@

&::before {
align-items: center;
border-color: currentColor;
border-color: var(--jetpack--contact-form--border-color);
border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
content: ' ';
display: flex;
font-weight: bold;
height: var(--jetpack--contact-form--font-size, 16px);
justify-content: center;
height: var(--jetpack--contact-form--font-size, 16px);
width: var(--jetpack--contact-form--font-size, 16px);
min-width: var(--jetpack--contact-form--font-size, 16px);
background:var( --jetpack--contact-form--input-background );
}

&[type="radio"]::before {
border-radius: 50%;
}
}

&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox:checked::before {
position: absolute;
content: "\2713";

top: calc(var(--jetpack--contact-form--font-size) / 2);
left: calc(var(--jetpack--contact-form--font-size) / 2);

display: flex;

font-size: var(--jetpack--contact-form--font-size);
line-height: 1;

transform: translate(-50%, -50%);
color: var(--jetpack--contact-form--text-color);
opacity: 1;
}

&.jetpack-field-multiple {

&.is-style-button {
Expand Down Expand Up @@ -439,10 +457,6 @@
}
}

.jetpack-field-consent__checkbox + .jetpack-field-label {
line-height: normal;
}

.jetpack-field-option {
display: flex;
align-items: center;
Expand Down Expand Up @@ -473,6 +487,19 @@
}
}

.jetpack-field.has-colors {
.jetpack-field-option.field-option-checkbox,
.jetpack-field-option.field-option-radio,
.wp-block-jetpack-field-option-checkbox,
.wp-block-jetpack-field-option-radio {
color: var(--jetpack--contact-form--text-color);

.jetpack-option__type:before {
color: var(--jetpack--contact-form--border-color);
}
}
}

:where(:not(.contact-form)) > .jetpack-field {
.jetpack-field__input, .jetpack-field__textarea {
padding-left: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
Expand Down Expand Up @@ -557,15 +584,13 @@
}

.jetpack-field-checkbox {
align-items: baseline;

.jetpack-field-label {
display: block;
line-height: 1;
}
}

.jetpack-field-consent {
align-items: center;

.jetpack-field-label {
flex-grow: 1;
Expand Down
30 changes: 22 additions & 8 deletions projects/packages/forms/src/contact-form/css/grunion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@

.contact-form label.checkbox {
font-weight: normal;
margin-bottom: 0;
line-height: 1;
}

.contact-form label.checkbox-multiple,
Expand Down Expand Up @@ -143,10 +145,12 @@
.contact-form .grunion-checkbox-multiple-options .contact-form-field,
.contact-form .grunion-radio-options .contact-form-field {
display: flex;
align-items: baseline;

align-items: center;
margin: 0;
}
.contact-form .grunion-radio-options .contact-form-field {
align-items: baseline;
}

.contact-form label span.required,
.grunion-label-required {
Expand Down Expand Up @@ -570,28 +574,38 @@ on production builds, the attributes are being reordered, causing side-effects
padding-top: 8px;
}

.contact-form .grunion-field-wrap input.consent,
.contact-form .grunion-field-wrap input.checkbox,
.contact-form .grunion-field-wrap input.checkbox-multiple,
.contact-form .grunion-field-wrap input.radio {
position: relative;

box-sizing: border-box;
width: var(--jetpack--contact-form--font-size);
min-width: var(--jetpack--contact-form--font-size);
height: var(--jetpack--contact-form--font-size);
margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2);
padding: 0;

appearance: none;
opacity: 1;
border: solid 1px currentColor;

outline-offset: 4px;
color: var( --jetpack--contact-form--border-color );
background-color: var(--jetpack--contact-form--input-background);
font-family: var( --jetpack--contact-form--font-family );
flex-basis: content;
text-align: left;
}

.contact-form .grunion-field-wrap input.radio {
border-radius: 50%;

transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */
}

.contact-form .grunion-field-wrap input.consent:checked::before,
.contact-form .grunion-field-wrap input.checkbox:checked::before,
.contact-form .grunion-field-wrap input.checkbox-multiple:checked::before {
content: "\2713";

Expand All @@ -604,7 +618,8 @@ on production builds, the attributes are being reordered, causing side-effects
font-size: var(--jetpack--contact-form--font-size);
line-height: 1;

transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: var(--jetpack--contact-form--text-color);
}

.contact-form .grunion-field-wrap input.radio:checked::before {
Expand All @@ -617,6 +632,7 @@ on production builds, the attributes are being reordered, causing side-effects
position: absolute;
transform: translate(-50%, -50%);
width: calc(var(--jetpack--contact-form--font-size) / 2);
color: var(--jetpack--contact-form--text-color);
}

.contact-form .grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field,
Expand Down Expand Up @@ -784,10 +800,8 @@ on production builds, the attributes are being reordered, causing side-effects
font-style: normal;
font-weight: bold;
}

.contact-form__checkbox-wrap {
.contact-form .contact-form__checkbox-wrap {
display: inline-flex;
align-items: baseline;
}

.contact-form :is([type="submit"],button:not([type="reset"])) {
Expand All @@ -806,7 +820,7 @@ on production builds, the attributes are being reordered, causing side-effects
display: block;
}

.visually-hidden {
.contact-form .visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/add-border-styling-radio
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: bugfix

Form: fixes the colour styling options of multiselect inputs
Loading