Skip to content

fix error fields style when underline is used as field shape type#1982

Merged
Crabcyborg merged 6 commits into
masterfrom
issue-fix/ff-style-editor
Sep 16, 2024
Merged

fix error fields style when underline is used as field shape type#1982
Crabcyborg merged 6 commits into
masterfrom
issue-fix/ff-style-editor

Conversation

@Liviu-p
Copy link
Copy Markdown
Contributor

@Liviu-p Liviu-p commented Sep 13, 2024

No description provided.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Sep 13, 2024

Walkthrough

The changes introduce a new case, border_width_error, in the css_var_prepare_value method of the FrmStylesHelper class, enhancing its capability to handle border width errors. Additionally, the CSS styling for error states is updated to utilize a CSS variable var(--border-width-error) instead of directly echoing a PHP variable, improving the flexibility and maintainability of the styling. Other modifications include refinements in font size settings and enhancements in various components related to user interactions and styling.

Changes

Files Change Summary
classes/helpers/FrmStylesHelper.php Added a new case border_width_error in the css_var_prepare_value method to manage border width errors. Modified the update_base_font_size method to check for the string value 'false'.
css/_single_theme.css.php Updated error state styling to use a CSS variable var(--border-width-error) instead of a direct PHP variable, and changed the error message color to use text_color_error.
classes/models/FrmStyle.php Converted shorthand CSS property values to longhand equivalents for clarity and consistency in the get_defaults method.
classes/views/styles/_quick-settings.php Changed the hidden input field value for use_base_font_size from true to false when advanced settings are not used, and added a new class frm-base-font-size.
classes/views/styles/components/FrmSliderStyleComponent.php Enhanced unit measurement handling and value assignments, including checks for empty units and adjustments to the detect_unit_measurement method.
classes/views/styles/components/FrmStyleComponent.php Added a conditional statement to dynamically append class names in the get_default_wrapper_class_names method.
classes/views/styles/components/templates/slider.php Replaced (int) casting with esc_attr() for input values to enhance security and prevent XSS vulnerabilities.
css/admin/style-components.css Introduced new CSS rules for the .frm-slider-component.frm-disabled.frm-empty class to set specific widths for input and select elements.
js/formidable_styles.js Implemented enhancements for radio buttons, sliders, and tab navigation, including event listeners and debouncing for performance optimization.
js/src/admin/styles/slider-style-component.js Improved slider element handling based on user interactions, including checks for empty units and updates to hidden input fields for the "Base Font Size" setting.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant FrmStylesHelper
    participant CSS

    User->>FrmStylesHelper: Trigger border width error
    FrmStylesHelper->>CSS: Process border_width_error case
    CSS-->>FrmStylesHelper: Return updated border width
    FrmStylesHelper-->>User: Apply new border styling
Loading

Possibly related PRs


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    -- I pushed a fix in commit <commit_id>, please review it.
    -- Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    -- @coderabbitai generate unit testing code for this file.
    -- @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    -- @coderabbitai generate interesting stats about this repository and render them as a table.
    -- @coderabbitai read src/utils.ts and generate unit testing code.
    -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@Liviu-p Liviu-p marked this pull request as draft September 13, 2024 12:25
…gate when a the sized is changed only, fix error text description color
@Liviu-p Liviu-p self-assigned this Sep 16, 2024
@Liviu-p Liviu-p marked this pull request as ready for review September 16, 2024 12:33
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 9ef88ea and 30c73f1.

Files ignored due to path filters (5)
  • js/form-templates.js.map is excluded by !**/*.map, !**/*.map
  • js/formidable_dashboard.js.map is excluded by !**/*.map, !**/*.map
  • js/formidable_overlay.js.map is excluded by !**/*.map, !**/*.map
  • js/formidable_styles.js.map is excluded by !**/*.map, !**/*.map
  • js/onboarding-wizard.js.map is excluded by !**/*.map, !**/*.map
Files selected for processing (10)
  • classes/helpers/FrmStylesHelper.php (2 hunks)
  • classes/models/FrmStyle.php (4 hunks)
  • classes/views/styles/_quick-settings.php (2 hunks)
  • classes/views/styles/components/FrmSliderStyleComponent.php (5 hunks)
  • classes/views/styles/components/FrmStyleComponent.php (1 hunks)
  • classes/views/styles/components/templates/slider.php (9 hunks)
  • css/_single_theme.css.php (2 hunks)
  • css/admin/style-components.css (1 hunks)
  • js/formidable_styles.js (1 hunks)
  • js/src/admin/styles/slider-style-component.js (3 hunks)
Files skipped from review due to trivial changes (1)
  • classes/models/FrmStyle.php
Files skipped from review as they are similar to previous changes (2)
  • classes/helpers/FrmStylesHelper.php
  • css/_single_theme.css.php
Additional context used
Biome
js/formidable_styles.js

[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

Additional comments not posted (24)
classes/views/styles/components/FrmSliderStyleComponent.php (8)

36-36: LGTM!

The assignment of value_label based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


57-57: LGTM!

The inclusion of an empty string as the first element in the returned array when no units are provided allows for more flexible unit selection and aligns with the AI-generated summary.


94-94: LGTM!

The assignment of the value property based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


99-99: LGTM!

The assignment of the value property based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


104-104: LGTM!

The assignment of the value property based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


109-109: LGTM!

The assignment of the value property based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


114-114: LGTM!

The assignment of the value property based on the detected unit measurement ensures consistent formatting and aligns with the AI-generated summary.


119-119: LGTM!

The changes in the detect_unit_measurement method and the assignment of the value property based on the detected unit measurement align with the AI-generated summary and improve the robustness of the code.

Also applies to: 154-156, 158-158

classes/views/styles/components/FrmStyleComponent.php (1)

136-138: LGTM!

The conditional statement to append a custom class name to the default wrapper class is a useful addition. It enhances the flexibility of the component by allowing dynamic class names based on the provided data, which can be beneficial for styling purposes.

The change is implemented correctly and does not introduce any apparent issues or side effects. The existing logic for appending a specific class when will_change is set remains intact, ensuring backward compatibility.

classes/views/styles/_quick-settings.php (2)

135-135: LGTM!

The hidden input field ensures that the base font size is not applied when advanced settings are not enabled. This change aligns with the PR objective of fixing the error fields style issue.


145-145: LGTM!

The added frm-base-font-size class to the slider component provides a way to target and customize the base font size slider specifically. This change aligns with the PR objective of fixing the error fields style issue.

classes/views/styles/components/templates/slider.php (6)

19-19: LGTM!

The change from (int) casting to esc_attr() for the value attribute of the vertical value input field is a good security enhancement. It ensures proper escaping of the value for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.


41-41: LGTM!

The change from (int) casting to esc_attr() for the value attribute of the top value input field is a good security enhancement. It ensures proper escaping of the value for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.


63-63: LGTM!

The change from (int) casting to esc_attr() for the value attribute of the bottom value input field is a good security enhancement. It ensures proper escaping of the value for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.


85-85: LGTM!

The change from (int) casting to esc_attr() for the value attribute of the horizontal value input field is a good security enhancement. It ensures proper escaping of the value for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.


107-107: LGTM!

The change from (int) casting to esc_attr() for the value attribute of the left value input field is a good security enhancement. It ensures proper escaping of the value for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.


129-129: LGTM!

The changes from (int) casting to esc_attr() for the value attributes of the right value, field value, and independent field value input fields are good security enhancements. They ensure proper escaping of the values for HTML output, preventing potential XSS vulnerabilities and handling non-integer values correctly.

Also applies to: 158-158, 183-183, 210-210

css/admin/style-components.css (2)

377-379: LGTM!

The CSS rule is correctly scoped to the disabled and empty state of the slider component, and setting an explicit width for the input field in this state is a good practice for better layout control.


380-382: LGTM!

The CSS rule is correctly scoped to the disabled and empty state of the slider component, and setting an explicit width for the select element in this state is a good practice for better layout control.

js/src/admin/styles/slider-style-component.js (4)

133-136: LGTM!

The code segment correctly handles the case when the selected unit is an empty string by adding the frm-disabled and frm-empty classes to the element and preventing further processing.


146-146: LGTM!

The code segment correctly removes the frm-disabled and frm-empty classes from the element when a valid unit is selected, ensuring that the slider is enabled and the empty state is cleared.


288-290: LGTM!

The code segment correctly adds a check to exit early from the initSliderWidth method if the slider is disabled. This prevents unnecessary calculations and updates to the slider width when it is in a disabled state, improving efficiency.


456-463: LGTM!

The code segment correctly updates a hidden input field when the slider is associated with the "Base Font Size" setting. This change helps avoid conflicts with other font size adjustments in different settings by indicating that the "Base Font Size" has been adjusted.

js/formidable_styles.js (1)

1-1: Suggestion: Review the original, unminified source code.

The provided code is heavily minified, making it hard to read and understand. For a more effective code review, it's recommended to review the original, unminified source code instead. Reviewing minified code can miss potential issues and make maintenance harder.

Tools
Biome

[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)


[error] 1-1: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

Comment thread classes/views/styles/components/FrmSliderStyleComponent.php Outdated
@Liviu-p Liviu-p requested a review from Crabcyborg September 16, 2024 13:16
Comment thread classes/views/styles/_quick-settings.php
@Crabcyborg Crabcyborg added this to the 6.14.1 milestone Sep 16, 2024
@codecov
Copy link
Copy Markdown

codecov Bot commented Sep 16, 2024

Codecov Report

Attention: Patch coverage is 85.71429% with 1 line in your changes missing coverage. Please review.

Project coverage is 27.40%. Comparing base (afb9a7d) to head (d2b2e65).
Report is 128 commits behind head on master.

Files with missing lines Patch % Lines
classes/helpers/FrmStylesHelper.php 50.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##             master    #1982      +/-   ##
============================================
- Coverage     27.42%   27.40%   -0.02%     
- Complexity     7960     8002      +42     
============================================
  Files           125      125              
  Lines         26568    26693     +125     
============================================
+ Hits           7287     7316      +29     
- Misses        19281    19377      +96     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Crabcyborg Crabcyborg requested review from shervElmi and removed request for garretlaxton September 16, 2024 16:12
Copy link
Copy Markdown
Contributor

@Crabcyborg Crabcyborg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't tested this yet but it looks good to me.

I assigned @shervElmi to review as well to get some additional eyes on this.

Thanks @Liviu-p!

🚀

@shervElmi
Copy link
Copy Markdown
Contributor

@Liviu-p, I'm working on QA and reviewing the changes as well. Could you provide some details about this PR, please? Thanks.

@Liviu-p
Copy link
Copy Markdown
Contributor Author

Liviu-p commented Sep 16, 2024

@Liviu-p, I'm working on QA and reviewing the changes as well. Could you provide some details about this PR, please? Thanks.

Hey @shervElmi, it provides fixes for few reported issues:
https://github.com/Strategy11/formidable-pro/issues/5369
https://github.com/Strategy11/formidable-pro/issues/5368
https://github.com/Strategy11/formidable-pro/issues/5360
https://github.com/Strategy11/formidable-pro/issues/5375

@Crabcyborg Crabcyborg merged commit e1c18e0 into master Sep 16, 2024
@Crabcyborg Crabcyborg deleted the issue-fix/ff-style-editor branch September 16, 2024 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants