Merge branch 'v1/contrib' into bug/color-area-saturation

umbraco · Sep 29, 2023 · 75bfabf · 75bfabf
2 parents 77774cb + af8b738
commit 75bfabf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
@@ -58,6 +58,8 @@ export class UUIInputElement extends FormControlMixin(
           var(--uui-input-border-color, var(--uui-color-border));
 
         --uui-button-height: 100%;
+        --auto-width-text-margin-right: 0;
+        --auto-width-text-margin-left: 0;
       }
 
       #control {
@@ -75,6 +77,8 @@ export class UUIInputElement extends FormControlMixin(
         z-index: -1;
         height: 0px;
         padding: 0 var(--uui-size-space-3);
+        margin: 0 var(--auto-width-text-margin-right) 0
+          var(--auto-width-text-margin-left);
       }
 
       :host([auto-width]) #input {
@@ -407,7 +411,7 @@ export class UUIInputElement extends FormControlMixin(
   }
 
   private renderInputWithAutoWidth() {
-    html`<div id="control">
+    return html`<div id="control">
       ${this.renderInput()}${this.renderAutoWidthBackground()}
     </div>`;
   }

diff --git a/packages/uui-input/lib/uui-input.story.ts b/packages/uui-input/lib/uui-input.story.ts
@@ -314,7 +314,7 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
       </uui-input>
       <br /><br />
       <uui-input
@@ -329,15 +329,31 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
         <uui-input
           slot="prepend"
           placeholder="Prepend auto-width"
-          .autoWidth=${props.autoWidth}></uui-input>
+          ?auto-width=${props.autoWidth}></uui-input>
         <uui-input
           slot="append"
           placeholder="Append auto-width false"></uui-input>
-      </uui-input>`,
+      </uui-input>
+
+      <br /><br />
+      <uui-input
+        .min=${props.min}
+        .max=${props.max}
+        .step=${props.step}
+        .disabled=${props.disabled}
+        .readonly=${props.readonly}
+        .error=${props.error}
+        .label=${props.label}
+        .type=${props.type}
+        .name=${props.name}
+        style="--auto-width-text-margin-right: 50px"
+        placeholder="--auto-width-text-margin-right: 50px"
+        .value=${props.value}
+        ?auto-width=${props.autoWidth}></uui-input>`,
   args: {
     autoWidth: true,
     placeholder: 'Start typing...',

diff --git a/packages/uui-tabs/lib/uui-tab.element.ts b/packages/uui-tabs/lib/uui-tab.element.ts
@@ -40,7 +40,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
         min-height: var(--uui-size-12);
         min-width: 70px;
         padding: var(--uui-size-2)
-          var(--uui-tab-padding-horizontal, var(--uui-size-4));
+          var(--uui-tab-padding-horizontal, var(--uui-size-5));
         border: none;
         font-size: inherit;
         background: none;