adding forms style (#444)

infinum · Aug 29, 2024 · 7e93b88 · 7e93b88
1 parent eba600f
commit 7e93b88
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = '<div class="' . esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__info", $attributes)) . '">' . esc_html($infoText) . '</div>';
-if (!$fileCustomInfoTextUse) {
-	$infoTextContent = '';
+$infoTextContent = '';
+if ($fileCustomInfoTextUse) {
+	$infoTextContent .= '<div class="' . esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__info", $attributes)) . '">' . wp_kses_post($infoText) . '</div>';
 }
 
-$infoButtonContent = '<a tabindex="-1" href="#" class="' . esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__button", $attributes)) . '">' . esc_html($infoButton) . '</a>';
+$filter = UtilsHooksHelper::getFilterName(['block', 'file', 'infoAdditionalContent']);
+if (has_filter($filter)) {
+	$infoTextContent .= apply_filters($filter, '', $attributes);
+}
+
+$infoTextContent .= '<a tabindex="-1" href="#" class="' . esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__button", $attributes)) . '">' . esc_html($infoButton) . '</a>';
 
 $customFile = '
 	<div class="' . esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__custom-wrap", $attributes)) . '">
 		' . $infoTextContent . '
-		' . $infoButtonContent . '
 	</div>
 ';
 

diff --git 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
@@ -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("<span class='{$cssSelector}'>{$inputRangeShowMinPrefix}{$inputAttrs['min']}{$inputRangeShowMinSuffix}</span>");
 	}
 
 	if ($inputRangeShowCurrent) {
-		$cssSelector = Helpers::selector($componentClass, $componentClass, 'range', 'current');
+		$cssSelector = FiltersOuputMock::getTwSelectors("{$componentClass}__range--current", $attributes);
 		$cssJsSelector = UtilsHelper::getStateSelector('inputRangeCurrent');
 
 		$additionalContent .= wp_kses_post("<span class='{$cssSelector}'>{$inputRangeShowCurrentPrefix}<span class='{$cssJsSelector}'>{$inputAttrs['value']}</span>{$inputRangeShowCurrentSuffix}</span>");
@@ -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("<span class='{$cssSelector}'>{$inputRangeShowMaxPrefix}{$inputAttrs['max']}{$inputRangeShowMaxSuffix}</span>");

diff --git 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
@@ -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 @@
 		?>
 	</div>
 
-	<div class="<?php echo esc_attr("{$componentClass}__inner"); ?>">
+	<div class="<?php echo esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__inner", $attributes)); ?>">
 		<?php echo $stepContent; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>
 
-		<div class="<?php echo esc_attr("{$componentFieldClass} {$componentClass}__navigation"); ?>">
-			<div class="<?php echo esc_attr("{$componentFieldClass} {$componentClass}__navigation-inner"); ?>">
+		<div class="<?php echo esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__navigation", $attributes, $componentFieldClass)); ?>">
+			<div class="<?php echo esc_attr(FiltersOuputMock::getTwSelectors("{$componentClass}__navigation-inner", $attributes)); ?>">
 				<?php
 
 				$filterNameComponentPrev = UtilsHooksHelper::getFilterName(['block', 'step', 'component_prev']);

diff --git a/src/Hooks/Filters.php b/src/Hooks/Filters.php
@@ -106,6 +106,7 @@ private static function getPublicFilters(): array
 				],
 				'file' => [
 					'additionalContent',
+					'infoAdditionalContent',
 					'previewRemoveLabel',
 				],
 				'checkboxes' => [