feat: replaced left with prepend

TheComputerM · Sep 15, 2020 · 26921d7 · 26921d7
1 parent 40bba95
commit 26921d7
Show file tree

Hide file tree

Showing 13 changed files with 28 additions and 28 deletions.
diff --git a/packages/docs/src/examples/components/dividers/inset.svelte b/packages/docs/src/examples/components/dividers/inset.svelte
@@ -13,21 +13,21 @@
   <List>
     <Subheader>Today</Subheader>
     <ListItem>
-      <div slot="left">
+      <div slot="prepend">
         <Avatar><img src="//picsum.photos/100?random=1" alt="Avatar" /></Avatar>
       </div>
       Study Group <span slot="subtitle"> <b>John Doe</b> - This is my message </span>
     </ListItem>
     <Divider inset />
     <ListItem>
-      <div slot="left">
+      <div slot="prepend">
         <Avatar><img src="//picsum.photos/100?random=2" alt="Avatar" /></Avatar>
       </div>
       Summer <span slot="subtitle"> <b>Harshit</b> - Fun </span>
     </ListItem>
     <Divider inset />
     <ListItem>
-      <div slot="left">
+      <div slot="prepend">
         <Avatar><img src="//picsum.photos/100?random=3" alt="Avatar" /></Avatar>
       </div>
       School <span slot="subtitle"> <b>Tyler</b> - Nerd </span>

diff --git a/packages/docs/src/examples/components/lists/avatar.svelte b/packages/docs/src/examples/components/lists/avatar.svelte
@@ -14,15 +14,15 @@
     <Subheader>Svelte</Subheader>
     {#each items as item, i}
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           {#if item.icon}
             <Icon class="mdi mdi-star pink-text" />
           {:else}
             <Icon class="mdi mdi-star-outline" />
           {/if}
         </span>
         {item.name}
-        <span slot="right">
+        <span slot="append">
           <Avatar><img src="//picsum.photos/50?random={i}" alt="profile" /></Avatar>
         </span>
       </ListItem>

diff --git a/packages/docs/src/examples/components/lists/basic.svelte b/packages/docs/src/examples/components/lists/basic.svelte
@@ -7,7 +7,7 @@
     <ListItem>List Item</ListItem>
     <ListItem>List Item <span slot="subtitle"> With a subtitle </span></ListItem>
     <ListItem>
-      List Item (icon) <span slot="right">
+      List Item (icon) <span slot="append">
         <Icon class="mdi mdi-home" />
       </span>
       <span slot="subtitle">

diff --git a/packages/docs/src/examples/components/lists/dense.svelte b/packages/docs/src/examples/components/lists/dense.svelte
@@ -7,17 +7,17 @@
     <Subheader>Filter</Subheader>
     <ListItemGroup class="blue-text" value={[1]}>
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-home" />
         </span> Item 1
       </ListItem>
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-account" />
         </span> Item 2
       </ListItem>
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-flag" />
         </span> Item 3
       </ListItem>

diff --git a/packages/docs/src/examples/components/lists/disabled.svelte b/packages/docs/src/examples/components/lists/disabled.svelte
@@ -7,17 +7,17 @@
     <Subheader>Filter</Subheader>
     <ListItemGroup value="[1]">
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-home" />
         </span> Item 1
       </ListItem>
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-account" />
         </span> Item 2
       </ListItem>
       <ListItem>
-        <span slot="left">
+        <span slot="prepend">
           <Icon class="mdi mdi-flag" />
         </span> Item 3
       </ListItem>

diff --git a/packages/docs/src/examples/components/lists/navigation.svelte b/packages/docs/src/examples/components/lists/navigation.svelte
@@ -28,7 +28,7 @@
     <ListItemGroup>
       {#each items as item}
         <ListItem>
-          <span slot="left">
+          <span slot="prepend">
             <Icon class="mdi {item.icon}" />
           </span>
           {item.text}

diff --git a/packages/docs/src/examples/components/lists/nested.svelte b/packages/docs/src/examples/components/lists/nested.svelte
@@ -5,16 +5,16 @@
 <div class="d-flex justify-center">
   <List class="elevation-2" style="width:300px">
     <ListItem>
-      <span slot="left">
+      <span slot="prepend">
         <Icon class="mdi mdi-home" />
       </span> Home
     </ListItem>
     <ListGroup offset="72px">
       <span slot="activator" let:toggle let:active>
         <ListItem on:click={toggle}>
-          <span slot="left">
+          <span slot="prepend">
             <Icon class="mdi mdi-cog" />
-          </span> Actions <span slot="right">
+          </span> Actions <span slot="append">
             <Icon class="mdi mdi-chevron-up" rotate={active ? 0 : 180} />
           </span>
         </ListItem>

diff --git a/packages/docs/src/examples/components/lists/subheading.svelte b/packages/docs/src/examples/components/lists/subheading.svelte
@@ -10,17 +10,17 @@
     <Divider />
     <Subheader>Notifications</Subheader>
     <ListItem>
-      <span slot="left">
+      <span slot="prepend">
         <Checkbox />
       </span> Notifications <span slot="subtitle"> Allow Notifications </span>
     </ListItem>
     <ListItem>
-      <span slot="left">
+      <span slot="prepend">
         <Checkbox />
       </span> Sound <span slot="subtitle"> Hangouts sound. </span>
     </ListItem>
     <ListItem>
-      <span slot="left">
+      <span slot="prepend">
         <Checkbox />
       </span> Invites <span slot="subtitle"> Notify when invited. </span>
     </ListItem>

diff --git a/packages/docs/src/helpers/Markdown/ReadyForMore.svelte b/packages/docs/src/helpers/Markdown/ReadyForMore.svelte
@@ -26,7 +26,7 @@
 <Col cols="12" md="4">
   <a {href}>
     <ListItem link class="grey {$theme === 'light' ? 'lighten-5' : 'darken-3'}">
-      <div slot="left">
+      <div slot="prepend">
         <Icon class="mdi mdi-{icon}" />
       </div>
       {name}

diff --git a/packages/docs/src/helpers/Navigation/LeftNavigationDrawer.svelte b/packages/docs/src/helpers/Navigation/LeftNavigationDrawer.svelte
@@ -52,13 +52,13 @@
   {#each items as item}
     {#if item.items}
       <ListItem dense on:click={() => (item.open = !item.open)}>
-        <div slot="left">
+        <div slot="prepend">
           {#if item.icon}
             <Icon path={item.icon} />
           {/if}
         </div>
         {item.text}
-        <div slot="right">
+        <div slot="append">
           <Icon path={mdiChevronDown} rotate={item.open ? 180 : 0} class="chevron" />
         </div>
       </ListItem>
@@ -67,7 +67,7 @@
     {:else}
       <a href={item.href} rel="prefetch">
         <ListItem active={item.href.replace(/\//g, '') === activeLink}>
-          <div slot="left">
+          <div slot="prepend">
             {#if item.icon}
               <Icon class="mdi mdi-{item.icon}" />
             {/if}

diff --git a/packages/svelte-materialify/src/components/List/ListItem.scss b/packages/svelte-materialify/src/components/List/ListItem.scss
@@ -67,7 +67,7 @@
     min-width: $list-item-child-min-width;
   }
 
-  [slot='left'] {
+  [slot='prepend'] {
     .s-avatar {
       margin-right: $list-item-avatar-first-child-margin;
     }
@@ -154,7 +154,7 @@
     margin-bottom: $list-item-icon-margin-y/2;
   }
 
-  [slot='left'] {
+  [slot='prepend'] {
     .s-icon,
     .s-checkbox,
     .s-radio {

diff --git a/packages/svelte-materialify/src/components/List/ListItem.svelte b/packages/svelte-materialify/src/components/List/ListItem.svelte
@@ -46,7 +46,7 @@
   use:Ripple={ripple}
   on:click={click}
   on:click>
-  <slot name="left" />
+  <slot name="prepend" />
   <div class="s-list-item__content">
     <div class="s-list-item__title">
       <slot />
@@ -55,5 +55,5 @@
       <slot name="subtitle" />
     </div>
   </div>
-  <slot name="right" />
+  <slot name="append" />
 </div>
diff --git a/packages/svelte-materialify/src/components/Select/Select.svelte b/packages/svelte-materialify/src/components/Select/Select.svelte
@@ -66,7 +66,7 @@
       {#each items as item}
         <slot name="item" {item}>
           <ListItem {dense} value={item.value}>
-            <span slot="left">
+            <span slot="prepend">
               {#if multiple}
                 <Checkbox checked={value.includes(item.value)} />
               {/if}