Merge pull request #59 from silinternational/develop

Release 2.6.0

CHANGELOG.md

@@ -5,8 +5,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-## [2.5.0](https://github.com/silinternational/ui-components/releases/tag/v2.5.0) - 2021-08-03
 
+## [2.6.0](https://github.com/silinternational/ui-components/releases/tag/v2.6.0) - 2021-08-04
+### Added
+- hideForMobile prop and optional border-white class in Drawer
+- another slot to TopAppBar
+- main-drawer-content id and actions slot to Drawer
+
+### Fixed
+- TopAppBar adjust class removed when not needed by Drawer
+
+## [2.5.0](https://github.com/silinternational/ui-components/releases/tag/v2.5.0) - 2021-08-03
 ### Added
 - slot to TopAppBar in Drawer
 

README.md

@@ -60,7 +60,7 @@ Dialog [
 	Dialog.Alert (open, title, defaultAction), Dialog.Simple(open, title)
 ]
 
-Drawer (title, subtitle, menuItems, toggle, modal, dismissible, hasTopAppBar, isFullHeightMenu)
+Drawer (title, subtitle, menuItems, toggle, modal, dismissible, hasTopAppBar, isFullHeightMenu, hideForMobile)
 
 Fab (icon, label, url)
 

components/mdc/Drawer/Drawer.svelte

@@ -2,9 +2,10 @@
 <script>
 import { isAboveTablet as isDesktop } from '../breakpoints'
 import { MDCDrawer } from '@material/drawer'
-import { Button, TopAppBar } from '../index'
+import Button from '../Button'
 import { beforeUrlChange } from '@roxi/routify'
 import { onMount } from 'svelte'
+import TopAppBar from '../TopAppBar'
 
 export let title = ''
 export let subtitle = ''
@@ -14,6 +15,7 @@ export let modal = false
 export let dismissible = false
 export let toggle = false
 export let isFullHeightMenu = true
+export let hideForMobile = true
 
 let mdcDrawer = {}
 let element = {}
@@ -30,7 +32,7 @@ const isMenuItemActive = (currentUrl, menuItemUrl) => currentUrl === menuItemUrl
 
 $: currentUrl = window.location.pathname
 $: toggle, toggleDrawer()
-$: !dismissible && (modal = true) //prevents error if neither is selected
+$: !dismissible && showModalDrawer() //prevents error if neither is selected
 
 $beforeUrlChange(({ url }) => {
   currentUrl = url
@@ -39,7 +41,7 @@ $beforeUrlChange(({ url }) => {
 })
 
 const showAppropriateDrawer = () => {
-  isDesktop() && !dismissible ? showStandardDrawer() : showModalDrawer()
+  isDesktop() && !dismissible ? showStandardDrawer() : hideForMobile && showModalDrawer()
 }
 const showModalDrawer = () => modal = true
 const showStandardDrawer = () => modal = false
@@ -91,7 +93,7 @@ main {
           <span class="grow-1" />
         {:else if !hide}
           {#if url && button}
-           <Button class="m-1" raised prependIcon={typeof button == 'string' ? button : null} {url} >{label}</Button>
+           <Button class="m-1" raised prependIcon={icon} {url} >{label}</Button>
           {:else if url}
             <a class="mdc-list-item" class:mdc-list-item--activated={isMenuItemActive(currentUrl, url)} href={url}
               aria-current={isMenuItemActive(currentUrl, url) ? "page" : null} tabindex={i === 0 ? 0 : undefined}>
@@ -119,11 +121,12 @@ main {
   {#if hasTopAppBar}
     <TopAppBar dense fixed bgColorIsVariant on:nav={toggleDrawer} navIconBreakpointClass={!dismissible && "hide-above-tablet"} >
       <slot name="TopAppBar"/>
+      <slot slot="actions" name="actions"/>
     </TopAppBar>
   {/if}
 
-  <main class="h-100">
-    <div class="mdc-top-app-bar--dense-fixed-adjust h-100">
+  <main class="h-100" id="main-drawer-content">
+    <div class:mdc-top-app-bar--dense-fixed-adjust={hasTopAppBar} class="h-100">
       <slot />
     </div>
   </main>

components/mdc/Drawer/_index.scss

@@ -4,4 +4,8 @@
 @include drawer.core-styles;
 @include drawer.dismissible-core-styles;
 @include drawer.modal-core-styles;
-@include list.core-styles;
+@include list.core-styles;
+
+.border-white {
+  @include drawer.border-color(#fff);
+}

components/mdc/TopAppBar/TopAppBar.svelte

@@ -44,6 +44,8 @@ onMount(() => {
     </section>
 
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+      <slot name="actions"/>
+
       {#each $actions as { icon, onClick, label }}
         <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label={label} on:click={onClick}>{icon}</button>
       {/each}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.js",
   "scripts": {