diff --git a/assets/css/src/components/formEditor/components/_sidebar.scss b/assets/css/src/components/formEditor/components/_sidebar.scss index 3e382e801e..beab8b2bee 100644 --- a/assets/css/src/components/formEditor/components/_sidebar.scss +++ b/assets/css/src/components/formEditor/components/_sidebar.scss @@ -191,6 +191,13 @@ $form-placement-option-oval-border: #969ca1; width: 13px; } +.form-placement-settings-check { + height: 13px; + pointer-events: none; + width: 13px; + z-index: 4; +} + .form-placement-settings-icon { height: 14px; pointer-events: none; diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/checkbox_icon.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/checkbox_icon.tsx new file mode 100644 index 0000000000..3581677220 --- /dev/null +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/checkbox_icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { + SVG, + Path, + Rect, + G, +} from '@wordpress/components'; + +export default ( + +); diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx index c1ed17e261..55514891dd 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import classnames from 'classnames'; import SettingsIcon from './settings_icon'; +import CheckIcon from './checkbox_icon'; type Props = { label: string, @@ -51,9 +52,17 @@ const FormPlacementOption = ({ {SettingsIcon} { - hover + hover && !active &&
} + { + active + && ( +