Merge pull request #12055 from owncloud/fix/input-clear-action-padding

owncloud · Dec 23, 2024 · 0d13368 · 0d13368
2 parents 297d601 + 43dacdd
commit 0d13368
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/...og/unreleased/bugfix-add-more-padding-to-input-when-clear-actions-is-visible.md b/...og/unreleased/bugfix-add-more-padding-to-input-when-clear-actions-is-visible.md
@@ -0,0 +1,6 @@
+Bugfix: Add more padding to input when clear action is visible
+
+We've fixed the issue where the clear action of the text input would overlap the text entered into the input. When the clear action becomes visible, the right padding of the input will be increased by the size of the clear action.
+
+https://github.com/owncloud/web/pull/12055
+https://github.com/owncloud/web/issues/11543
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -20,7 +20,8 @@
         :class="{
           'oc-text-input-warning': !!warningMessage,
           'oc-text-input-danger': !!errorMessage,
-          'oc-pl-l': !!readOnly
+          'oc-pl-l': !!readOnly,
+          'clear-action-visible': showClearButton
         }"
         :type="type"
         :value="displayValue"
@@ -408,6 +409,10 @@ export default defineComponent({
     margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
+
+  &.clear-action-visible {
+    padding-right: ($oc-size-icon-default * 0.7) + 7px;
+  }
 }
 </style>