From 7e93b887617c610eb26c24e411f09e279625ba75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ru=C5=BEevi=C4=87?= Date: Thu, 29 Aug 2024 15:27:59 +0200 Subject: [PATCH] adding forms style (#444) --- CHANGELOG.md | 8 ++++++++ eightshift-forms.php | 2 +- src/Blocks/components/date/date.php | 3 ++- src/Blocks/components/file/file.php | 15 ++++++++++----- src/Blocks/components/form/assets/utils.js | 10 ++++++++++ src/Blocks/components/input/input.php | 6 +++--- .../components/progress-bar/progress-bar.php | 5 +++-- src/Blocks/components/step/step.php | 9 +++++---- src/Hooks/Filters.php | 1 + 9 files changed, 43 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19b322d2..6bc263cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/). +## [5.0.8] + +### Added + +- Additional Tailwind selectors for forms fields. +- Range field not supports progress CSS variable. + ## [5.0.7] ### Added @@ -631,6 +638,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a - Initial production release. +[5.0.8]: https://github.com/infinum/eightshift-forms/compare/5.0.7...5.0.8 [5.0.7]: https://github.com/infinum/eightshift-forms/compare/5.0.6...5.0.7 [5.0.6]: https://github.com/infinum/eightshift-forms/compare/5.0.5...5.0.6 [5.0.5]: https://github.com/infinum/eightshift-forms/compare/5.0.4...5.0.5 diff --git a/eightshift-forms.php b/eightshift-forms.php index 4d5c91ee..36def026 100644 --- a/eightshift-forms.php +++ b/eightshift-forms.php @@ -6,7 +6,7 @@ * Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level. * Author: WordPress team @Infinum * Author URI: https://eightshift.com/ - * Version: 5.0.7 + * Version: 5.0.8 * Text Domain: eightshift-forms * * @package EightshiftForms diff --git a/src/Blocks/components/date/date.php b/src/Blocks/components/date/date.php index 289d607f..2408d5fc 100644 --- a/src/Blocks/components/date/date.php +++ b/src/Blocks/components/date/date.php @@ -7,6 +7,7 @@ */ use EightshiftForms\Helpers\FormsHelper; +use EightshiftForms\Hooks\FiltersOuputMock; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsGeneralHelper; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper; use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers; @@ -40,7 +41,7 @@ $dateFieldLabel = $attributes[Helpers::getAttrKey('dateFieldLabel', $attributes, $manifest)] ?? ''; $dateClass = Helpers::classnames([ - Helpers::selector($componentClass, $componentClass), + FiltersOuputMock::getTwSelectors($componentClass, $attributes), Helpers::selector($additionalClass, $additionalClass), ]); diff --git a/src/Blocks/components/file/file.php b/src/Blocks/components/file/file.php index 5c8fe4d7..81135467 100644 --- a/src/Blocks/components/file/file.php +++ b/src/Blocks/components/file/file.php @@ -9,6 +9,7 @@ use EightshiftForms\Helpers\FormsHelper; use EightshiftForms\Hooks\FiltersOuputMock; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsGeneralHelper; +use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHooksHelper; use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers; $manifest = Helpers::getManifestByDir(__DIR__); @@ -48,17 +49,21 @@ $infoText = !empty($fileCustomInfoText) ? $fileCustomInfoText : __('Drag and drop files here', 'eighitshift-forms'); $infoButton = !empty($fileCustomInfoButtonText) ? $fileCustomInfoButtonText : __('Add files', 'eighitshift-forms'); -$infoTextContent = '
' . esc_html($infoText) . '
'; -if (!$fileCustomInfoTextUse) { - $infoTextContent = ''; +$infoTextContent = ''; +if ($fileCustomInfoTextUse) { + $infoTextContent .= '
' . wp_kses_post($infoText) . '
'; } -$infoButtonContent = '' . esc_html($infoButton) . ''; +$filter = UtilsHooksHelper::getFilterName(['block', 'file', 'infoAdditionalContent']); +if (has_filter($filter)) { + $infoTextContent .= apply_filters($filter, '', $attributes); +} + +$infoTextContent .= '' . esc_html($infoButton) . ''; $customFile = '
' . $infoTextContent . ' - ' . $infoButtonContent . '
'; diff --git a/src/Blocks/components/form/assets/utils.js b/src/Blocks/components/form/assets/utils.js index 69c7f01a..3e199842 100644 --- a/src/Blocks/components/form/assets/utils.js +++ b/src/Blocks/components/form/assets/utils.js @@ -1218,6 +1218,16 @@ export class Utils { */ setRangeCurrentValue(formId, name) { const current = this.state.getStateElementRangeCurrent(name, formId); + const input = this.state.getStateElementInput(name, formId); + + // Set range current value as css variable due to inconsistency in browsers. + if (input) { + const min = input.min || 0; + const max = input.max || 100; + const parsedProgress = Number(((input.value - min) * 100) / (max - min)); + + input.style.setProperty('--es-form-range-progress', `${parsedProgress}%`); + } if (!current) { return; diff --git a/src/Blocks/components/input/input.php b/src/Blocks/components/input/input.php index 26b7c1fc..19c1d287 100644 --- a/src/Blocks/components/input/input.php +++ b/src/Blocks/components/input/input.php @@ -86,14 +86,14 @@ if ($inputRangeShowMin) { $cssSelector = Helpers::classnames([ UtilsHelper::getStateSelector('inputRangeMin'), - Helpers::selector($componentClass, $componentClass, 'range', 'min'), + FiltersOuputMock::getTwSelectors("{$componentClass}__range--min", $attributes), ]); $additionalContent .= wp_kses_post("{$inputRangeShowMinPrefix}{$inputAttrs['min']}{$inputRangeShowMinSuffix}"); } if ($inputRangeShowCurrent) { - $cssSelector = Helpers::selector($componentClass, $componentClass, 'range', 'current'); + $cssSelector = FiltersOuputMock::getTwSelectors("{$componentClass}__range--current", $attributes); $cssJsSelector = UtilsHelper::getStateSelector('inputRangeCurrent'); $additionalContent .= wp_kses_post("{$inputRangeShowCurrentPrefix}{$inputAttrs['value']}{$inputRangeShowCurrentSuffix}"); @@ -102,7 +102,7 @@ if ($inputRangeShowMax) { $cssSelector = Helpers::classnames([ UtilsHelper::getStateSelector('inputRangeMax'), - Helpers::selector($componentClass, $componentClass, 'range', 'max'), + FiltersOuputMock::getTwSelectors("{$componentClass}__range--max", $attributes), ]); $additionalContent .= wp_kses_post("{$inputRangeShowMaxPrefix}{$inputAttrs['max']}{$inputRangeShowMaxSuffix}"); diff --git a/src/Blocks/components/progress-bar/progress-bar.php b/src/Blocks/components/progress-bar/progress-bar.php index 3bde127d..2ffb9a5b 100644 --- a/src/Blocks/components/progress-bar/progress-bar.php +++ b/src/Blocks/components/progress-bar/progress-bar.php @@ -6,6 +6,7 @@ * @package EightshiftForms */ +use EightshiftForms\Hooks\FiltersOuputMock; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper; use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers; @@ -29,11 +30,11 @@ $progressBarMultiflowUse = Helpers::checkAttr('progressBarMultiflowUse', $attributes, $manifest); $progressBarClass = Helpers::classnames([ - Helpers::selector($componentClass, $componentClass), + FiltersOuputMock::getTwSelectors($componentClass, $attributes), + $progressBarMultiflowUse ? FiltersOuputMock::getTwSelectors("{$componentClass}--multiflow", $attributes) : FiltersOuputMock::getTwSelectors("{$componentClass}--multistep", $attributes), Helpers::selector($progressBarMultiflowUse, $componentClass, '', 'multiflow'), Helpers::selector(!$progressBarMultiflowUse, UtilsHelper::getStateSelector('stepProgressBar')), Helpers::selector($progressBarMultiflowUse, UtilsHelper::getStateSelector('stepProgressBarMultiflow')), - Helpers::selector(!$progressBarMultiflowUse, $componentClass, '', 'multistep'), Helpers::selector($additionalClass, $additionalClass), ]); diff --git a/src/Blocks/components/step/step.php b/src/Blocks/components/step/step.php index 48d43468..d86dc134 100644 --- a/src/Blocks/components/step/step.php +++ b/src/Blocks/components/step/step.php @@ -6,6 +6,7 @@ * @package EightshiftForms */ +use EightshiftForms\Hooks\FiltersOuputMock; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper; use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHooksHelper; use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers; @@ -26,7 +27,7 @@ $stepIsActive = Helpers::checkAttr('stepIsActive', $attributes, $manifest); $stepClass = Helpers::classnames([ - Helpers::selector($componentClass, $componentClass), + FiltersOuputMock::getTwSelectors($componentClass, $attributes), UtilsHelper::getStateSelector('step'), Helpers::selector($stepIsActive, UtilsHelper::getStateSelector('isActive')), ]); @@ -62,11 +63,11 @@ ?> -
"> +
"> -
"> -
"> +
"> +
"> [ 'additionalContent', + 'infoAdditionalContent', 'previewRemoveLabel', ], 'checkboxes' => [