diff --git a/projects/packages/forms/changelog/add-border-styling-radio b/projects/packages/forms/changelog/add-border-styling-radio new file mode 100644 index 0000000000000..e83b870deba5b --- /dev/null +++ b/projects/packages/forms/changelog/add-border-styling-radio @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixes the styling options for multi select options diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js index 54608cb294afb..2e252081d1726 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js @@ -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' ), + }, ] } /> { 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 ); diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js index 06cadae1c2c12..6d4e2852cfbdd 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js @@ -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, @@ -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 ( @@ -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' ), + }, ] } /> diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js index f9cefdd0bed6c..aa28c7d3bcdc2 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js @@ -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 ) => @@ -78,7 +84,7 @@ const JetpackFieldControls = ( { }, ]; - if ( isChoicesBlock && blockStyle === 'button' ) { + if ( blockStyle === 'button' ) { colorSettings.push( { value: attributes.buttonBackgroundColor, onChange: value => setAttributes( { buttonBackgroundColor: value } ), @@ -86,13 +92,15 @@ const JetpackFieldControls = ( { } ); } - 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 } ), diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 753ddabb7dd42..efbb8a12c356e 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -87,6 +87,7 @@ &[data-type='jetpack/field-checkbox'], &[data-type='jetpack/field-consent'] { align-self: center; + align-items: center; } } } @@ -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 { @@ -361,7 +360,7 @@ &::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; @@ -369,9 +368,11 @@ 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 { @@ -379,6 +380,23 @@ } } + &.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 { @@ -439,10 +457,6 @@ } } - .jetpack-field-consent__checkbox + .jetpack-field-label { - line-height: normal; - } - .jetpack-field-option { display: flex; align-items: center; @@ -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)); @@ -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; diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index db3af87444d3e..540133e8412f5 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -96,6 +96,8 @@ .contact-form label.checkbox { font-weight: normal; + margin-bottom: 0; + line-height: 1; } .contact-form label.checkbox-multiple, @@ -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 { @@ -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"; @@ -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 { @@ -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, @@ -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"])) { @@ -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; diff --git a/projects/plugins/jetpack/changelog/add-border-styling-radio b/projects/plugins/jetpack/changelog/add-border-styling-radio new file mode 100644 index 0000000000000..5090c4b1d9137 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-border-styling-radio @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Form: fixes the colour styling options of multiselect inputs