https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41151

--- Comment #64 from Martin Renvoize (ashimema) 
<[email protected]> ---
Created attachment 204758
  -->
https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=204758&action=edit
Bug 41151: Address QA feedback for Vue clear button

Follow-up to QA review:
 - Consolidate duplicated .clear-button / .input-with-clear-* rules
   into koha-tmpl/intranet-tmpl/prog/css/vue.css and drop the scoped
   <style> blocks from InputText, InputNumber, TextArea and
   AdditionalFieldsEntry.
 - Replace the inline <svg> clear icon with <i class="fa fa-xmark">
   (bold via CSS) to reuse the existing FontAwesome glyph already in
   use elsewhere (cataloguing/addbiblio.tt, circ/returns.tt).
 - In AdditionalFieldsEntry.vue, switch the repeatable input wrapper
   from Bootstrap's .input-group to .input-with-clear-wrapper. The
   .input-group class forced border-top-right-radius: 0 and
   border-bottom-right-radius: 0 on the input because Bootstrap expects
   an appended addon button; our clear button is absolutely positioned
   so no input-group behavior is wanted.
 - Remove the empty <label></label> placeholder from the "Additional
   fields" header and align the heading with CSS padding on the <li>
   instead.
 - Simplify FormElement.vue's :clearable binding. The ternary
   "attr.clearable !== undefined ? attr.clearable : undefined"
   evaluates identically to attr.clearable: when undefined is passed,
   Vue treats the prop as not passed and the child default (true)
   kicks in. The simpler form is equivalent and easier to read.

To test:
 1. yarn js:build && yarn css:build inside KTD.
 2. Staff -> ERM -> Agreements -> Edit. Text/textarea fields show the
    fa-xmark clear button; clicking clears.
 3. Any form with repeatable additional text fields: the input keeps
    proper rounded corners on the right side (no Bootstrap input-group
    border-radius reset).
 4. Inspect DOM: no <label></label> in the additional-fields-header.
 5. Inspect CSS: clear-button styles load once from vue.css, not from
    per-component scoped styles.

-- 
You are receiving this mail because:
You are watching all bug changes.
_______________________________________________
Koha-bugs mailing list -- [email protected]
To unsubscribe send an email to [email protected]
website : http://www.koha-community.org/
git : http://git.koha-community.org/
bugs : http://bugs.koha-community.org/

Reply via email to