Merge pull request #8 from teamshares/kc-update-details-component

Kc update details component

docs/components/details.md

@@ -64,8 +64,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```html preview
 <sl-details summary="Toggle Me" class="custom-icons">
-  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
-  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+  <sl-icon name="plus" slot="expand-icon"></sl-icon>
+  <sl-icon name="minus" slot="collapse-icon"></sl-icon>
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -81,8 +81,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```pug slim
 sl-details summary="Toggle Me" class="custom-icons"
-  sl-icon name="plus-square" slot="expand-icon"
-  sl-icon name="dash-square" slot="collapse-icon"
+  sl-icon name="plus" slot="expand-icon"
+  sl-icon name="minus" slot="collapse-icon"
   | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
   | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
@@ -106,8 +106,8 @@ const css = `
 const App = () => (
   <>
     <SlDetails summary="Toggle Me" class="custom-icon">
-      <SlIcon name="plus-square" slot="expand-icon" />
-      <SlIcon name="dash-square" slot="collapse-icon" />
+      <SlIcon name="plus" slot="expand-icon" />
+      <SlIcon name="minus" slot="collapse-icon" />
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
       magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat.

docs/teamshares/changelog.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.1.1
+
+- Increase padding for details
+- Fix details example for alternate icons
+
 ## 1.1.0
 
 - Checkbox

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamshares/shoelace",
   "description": "The Teamshares flavor of a forward-thinking library of web components.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "upstreamVersion": "2.1.0",
   "homepage": "https://github.com/teamshares/shoelace",
   "author": "Cory LaViska",

src/components/details/details.styles.ts

@@ -23,7 +23,7 @@ export default css`
     display: flex;
     align-items: center;
     border-radius: inherit;
-    padding: var(--sl-spacing-medium);
+    padding: var(--sl-spacing-large);
     user-select: none;
     cursor: pointer;
   }
@@ -60,11 +60,11 @@ export default css`
   }
 
   .details--open .details__summary-icon {
-    rotate: 90deg;
+    rotate: 180deg;
   }
 
   .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
+    rotate: -180deg;
   }
 
   .details--open slot[name='expand-icon'],
@@ -78,6 +78,7 @@ export default css`
 
   .details__content {
     display: block;
-    padding: var(--sl-spacing-medium);
+    padding: var(--sl-spacing-large);
+    padding-top: 0.75rem;
   }
 `;

src/components/details/details.ts

@@ -186,10 +186,10 @@ export default class SlDetails extends ShoelaceElement {
 
           <span part="summary-icon" class="details__summary-icon">
             <slot name="expand-icon">
-              <sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
+              <sl-icon library="system" name=${isRtl ? 'chevron-up' : 'chevron-down'}></sl-icon>
             </slot>
             <slot name="collapse-icon">
-              <sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
+              <sl-icon library="system" name=${isRtl ? 'chevron-up' : 'chevron-down'}></sl-icon>
             </slot>
           </span>
         </header>