fix: outlined select menu labels

hperrin · Apr 12, 2021 · 020cb0c · 020cb0c
1 parent 566fa13
commit 020cb0c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/select/Select.svelte b/packages/select/Select.svelte
@@ -1,7 +1,7 @@
 <div
   bind:this={element}
   use:Ripple={{
-    ripple,
+    ripple: variant === 'filled',
     unbounded: false,
     addClass,
     removeClass,
@@ -78,7 +78,9 @@
     {...selectAnchorAttrs}
     {...prefixFilter($$restProps, 'anchor$')}
   >
-    <span class="mdc-select__ripple" />
+    {#if variant === 'filled'}
+      <span class="mdc-select__ripple" />
+    {/if}
     {#if variant !== 'outlined' && !noLabel && (label != null || $$slots.label)}
       <FloatingLabel
         bind:this={floatingLabel}
@@ -91,7 +93,7 @@
     {#if variant === 'outlined'}
       <NotchedOutline
         bind:this={notchedOutline}
-        noLabel={noLabel || label != null || $$slots.label}
+        noLabel={noLabel || (label == null && !$$slots.label)}
         {...prefixFilter($$restProps, 'outline$')}
       >
         {#if !noLabel && (label != null || $$slots.label)}

diff --git a/site/src/routes/demo/select/index.svelte b/site/src/routes/demo/select/index.svelte
@@ -400,9 +400,6 @@
   * :global(.shaped-outlined, .shaped-outlined .mdc-select__anchor) {
     border-radius: 28px;
   }
-  * :global(.shaped-outlined .mdc-select__anchor) {
-    overflow: hidden;
-  }
   * :global(.shaped-outlined .mdc-text-field__input) {
     padding-left: 32px;
     padding-right: 0;
@@ -423,4 +420,10 @@
   * :global(.shaped-outlined .mdc-notched-outline .mdc-notched-outline__notch) {
     max-width: calc(100% - 28px * 2);
   }
+  *
+    :global(.shaped-outlined.mdc-select--with-leading-icon
+      .mdc-notched-outline:not(.mdc-notched-outline--notched)
+      .mdc-floating-label) {
+    left: 16px;
+  }
 </style>