Feature/condition rule sr only labels - #19601
Draft
brianjhanson wants to merge 14 commits into
Draft
Conversation
…ms into feature/condition-rule-groups
A reactive controller, modeled on Web Awesome's, that reports whether a host's slots have content so it can skip rendering empty slot wrappers. It watches the light DOM rather than relying on slotchange, since a slot that isn't rendered never fires one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Don't render .form-field__label when the heading has nothing to show, or .form-field__help-text without instructions. Lion always generates the light-DOM label and help-text nodes, so presence is judged by their text. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Replace the margins below the label and help text with a flex gap on .form-field, so elements that aren't rendered or are out of flow leave no space behind. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Visually hide the label while keeping it available to screen readers. When the label is the only heading content, the whole heading is hidden so it leaves the flow and takes no gap. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Passed through to craft-field by both the Vue renderer and the HTML fallback. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Condition rule fields previously hid their slotted labels with CSS, which left craft-field's heading in the layout. Mark them labelSrOnly instead, keeping date field labels visible as before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
Fields provide their labelSrOnly state to their control, and Choice selects pass it to craft-select so its empty heading stays out of the layout, e.g. for condition rule operators. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
baseFormControlStyles subtracted the border from min-height, which only holds for content-box sizing. The CP's border-box reset made inputs and selects 2px shorter than buttons (32px instead of 34px). Size controls border-box with the full --c-input-height instead. Also drop the extra 2px taken off small selects, remove an invalid min-height: none, and keep the switch track content-box so it keeps its size. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
…nto feature/condition-rule-sr-only-labels Conflicts: - form.styles.ts: both sides made the same control height fix; kept ours. - ConditionGroup.vue: took theirs (the operator buttons became a select, making our size="small" on them moot). - switch-button.ts: dropped our content-box track, which upstream's thumb offsets were tuned against. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
The group operator's All/Any buttons became a select, so pick the operator through it instead of clicking a button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016bBBVYBkMG1tj5rwTSPmX7
📚 Storybook previews@craftcms/ui — open Storybook Changed components: resources/js — open Storybook No changed components detected in this Storybook. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The goal of this quest was just to get the fields in the condition builder to line up properly, fixing this.
When all is said and done we come out the other side with some new tricks as well. The big one being a
HasSlotControllerwhich is modeled after the one provided in Web Awesome. The goal is to make it easier to avoid rendering a slot when we don't need to.This also makes some improvements so condition rules are properly getting the
label-sr-onlyproperty.Finally, this adjusts the heights of a few components so when they all get in a line, everyone is equal. Like in our most utopian of dreams.