fixed o-field: message slot not passed down on o-field-body

[amicus-veritatis]

Fixed o-field: message slot not passed down if horizonal === true

Proposed Changes

• FieldBody.vue checks this.parent.hasMessageSlot
• if (this.parent.hasMessageSlot AND first) => render message slot

[jtommy]

It looks like a breaking change and also it removes p using a slot. What happens in a form with a mix of message slot and message prop?

[amicus-veritatis]

1. I intended to remove p wrapper from message slot for following reasons:

• Accessibillity concern: Current p wrapper lacks several wai-aria attributes, such as role="alert", aria-label or aria-labelledby or etc.
• There could be a case where an user want to insert their message slot into flex wrapper; like tooltip.
• In general, it would make customization much easier without headache.

2. Currently, messageClass doesn't pass down to p tag if horizontal===true. While this could be solved by passing down this.parent.messageClasses to FieldBody.vue, I considered it also can be solved by using message slot.
3. In a form with a mix of message slot and message prop, messageSlot takes precedence. but it does not prevent user from inserting message into message slot itself; like following code. However, I did not rule out message props completely since it can be accessed via Javascript.

<o-field horizontal label="Age" name="age" id="fieldAge" message="This message will be ignored">
<template #message>
<a href="https://examplewebsite.exampletld" title="Error occured">
<p role="alert" :aria-label="customMessage">
 {{customMessage}}
</p>
</a>
</template>
<input type="text" inputmode="numeric" pattern="[0-9]*">
</o-field>

[jtommy]

I understand your point but keep in mind that a user that uses message prop in a field and message slot in on other field could be see a different style (margin, padding etc) because in the first case there is p

[netlify[bot]]

✅ Deploy Preview for oruga-documentation-preview ready!

Name	Link
🔨 Latest commit	6e2bc7022e51e55f67265952a4acb4e8dd2632ed
🔍 Latest deploy log	https://app.netlify.com/sites/oruga-documentation-preview/deploys/63f5563fc56ea60008ac581b
😎 Deploy Preview	https://deploy-preview-365--oruga-documentation-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov[bot]]

Codecov Report

Base: 62.80% // Head: 62.72% // Decreases project coverage by -0.08% :warning:

Coverage data is based on head (6e2bc70) compared to base (53e7d0f). Patch coverage: 22.22% of modified lines in pull request are covered.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #365      +/-   ##
===========================================
- Coverage    62.80%   62.72%   -0.08%     
===========================================
  Files           79       79              
  Lines         5527     5535       +8     
  Branches      1535     1539       +4     
===========================================
+ Hits          3471     3472       +1     
- Misses        1946     1953       +7     
  Partials       110      110              

Flag	Coverage Δ
oruga	65.87% <0.00%> (-0.05%)	:arrow_down:
oruga-next	48.56% <33.33%> (-0.15%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ages/oruga-next/src/components/field/FieldBody.vue	5.00% <0.00%> (-1.25%)	:arrow_down:
packages/oruga/src/components/field/Field.vue	83.67% <ø> (ø)
packages/oruga/src/components/field/FieldBody.vue	53.33% <0.00%> (-13.34%)	:arrow_down:
packages/oruga-next/src/components/field/Field.vue	59.32% <100.00%> (+0.70%)	:arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[mlmoravek]

Ideas are transferred to #906