Feature/six sidebar expose container part

docs/changelog.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## Upcoming
 
+- Expose `container` part in `six-sidebar` for external styling
+
 ### Added
 
 ### Fixed

docs/components/six-sidebar.md

@@ -273,12 +273,11 @@ The following has many filler section elements to clearly show that the selected
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                               | Type                | Default   |
-| ---------- | ---------- | ----------------------------------------------------------------------------------------- | ------------------- | --------- |
-| `open`     | `open`     | Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. | `boolean`           | `false`   |
-| `position` | `position` | Sidebar position                                                                          | `"left" \| "right"` | `'left'`  |
-| `toggled`  | `toggled`  | Define whether sidebar is toggled meaning only one menu can be open at the same time      | `boolean`           | `false`   |
-| `width`    | `width`    | Sidebar width                                                                             | `string`            | `'16rem'` |
+| Property   | Attribute  | Description                                                                               | Type                | Default  |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------- | ------------------- | -------- |
+| `open`     | `open`     | Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. | `boolean`           | `false`  |
+| `position` | `position` | Sidebar position                                                                          | `"left" \| "right"` | `'left'` |
+| `toggled`  | `toggled`  | Define whether sidebar is toggled meaning only one menu can be open at the same time      | `boolean`           | `false`  |
 
 
 ## Events
@@ -364,6 +363,13 @@ Type: `Promise<void>`
 |      | Used to define the nested side bar [group] items. |
 
 
+## Shadow Parts
+
+| Part          | Description |
+| ------------- | ----------- |
+| `"container"` |             |
+
+
 ----------------------------------------------
 
 Copyright © 2021-present SIX-Group

libraries/ui-library-vue/src/lib/stencil-generated/components.ts

@@ -621,7 +621,6 @@ export const SixSelect: StencilVueComponent<JSX.SixSelect, JSX.SixSelect["value"
 export const SixSidebar: StencilVueComponent<JSX.SixSidebar> = /*@__PURE__*/ defineContainer<JSX.SixSidebar>('six-sidebar', undefined, [
   'position',
   'open',
-  'width',
   'toggled',
   'six-sidebar-show',
   'six-sidebar-after-show',

libraries/ui-library/src/components/six-sidebar/readme.md

@@ -11,12 +11,11 @@ If you want the user to execute an intermediary task and force a context-switch
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                               | Type                | Default   |
-| ---------- | ---------- | ----------------------------------------------------------------------------------------- | ------------------- | --------- |
-| `open`     | `open`     | Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. | `boolean`           | `false`   |
-| `position` | `position` | Sidebar position                                                                          | `"left" \| "right"` | `'left'`  |
-| `toggled`  | `toggled`  | Define whether sidebar is toggled meaning only one menu can be open at the same time      | `boolean`           | `false`   |
-| `width`    | `width`    | Sidebar width                                                                             | `string`            | `'16rem'` |
+| Property   | Attribute  | Description                                                                               | Type                | Default  |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------- | ------------------- | -------- |
+| `open`     | `open`     | Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. | `boolean`           | `false`  |
+| `position` | `position` | Sidebar position                                                                          | `"left" \| "right"` | `'left'` |
+| `toggled`  | `toggled`  | Define whether sidebar is toggled meaning only one menu can be open at the same time      | `boolean`           | `false`  |
 
 
 ## Events
@@ -102,6 +101,13 @@ Type: `Promise<void>`
 |      | Used to define the nested side bar [group] items. |
 
 
+## Shadow Parts
+
+| Part          | Description |
+| ------------- | ----------- |
+| `"container"` |             |
+
+
 ----------------------------------------------
 
 Copyright © 2021-present SIX-Group

libraries/ui-library/src/components/six-sidebar/six-sidebar.scss

@@ -3,6 +3,8 @@
 @import 'src/global/mixins/scrollbar';
 
 :host {
+  --width: 16rem;
+
   display: block;
   height: 100%;
 }
@@ -13,13 +15,11 @@
     height: 100%;
     overflow: auto;
 
-    &.sidebar--open {
-      border-right: 1px solid var(--six-color-web-rock-300);
-    }
-
     &:not(.sidebar--visible) {
       @include hidden;
     }
+
+    width: var(--width);
   }
 
   &--left {
@@ -31,14 +31,28 @@
     background-size: 300vw 70%;
     background-position: bottom;
     background-repeat: no-repeat;
+
+    margin-left: calc(1rem - var(--width));
+
+    &.sidebar--open {
+      margin-left: 0;
+      border-right: 1px solid var(--six-color-web-rock-300);
+    }
   }
 
   &--right {
     // collapse
     transition: var(--six-transition-medium) margin-right;
+
+    margin-right: calc(1rem - var(--width));
+
+    &.sidebar--open {
+      margin-right: 0;
+      border-left: 1px solid var(--six-color-web-rock-300);
+    }
   }
 
-  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin
+  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarantee a margin
   &--open {
     &.sidebar--left {
       margin-right: 2px;

libraries/ui-library/src/components/six-sidebar/six-sidebar.tsx

@@ -31,9 +31,6 @@ export class SixSidebar {
   /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */
   @Prop({ mutable: true, reflect: true }) open = false;
 
-  /** Sidebar width */
-  @Prop() width = '16rem';
-
   /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
   @Prop() toggled = false;
 
@@ -243,17 +240,14 @@ export class SixSidebar {
     return (
       <host class="six-sidebar">
         <div
+          part="container"
           class={{
             sidebar__container: true,
             'sidebar--visible': this.isVisible,
             'sidebar--open': this.open,
             'sidebar--left': this.position === 'left',
             'sidebar--right': this.position === 'right',
           }}
-          style={{
-            width: this.width,
-            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-          }}
           ref={(el) => (this.sidebar = el)}
           aria-hidden={this.open ? 'false' : 'true'}
           onTransitionEnd={this.handleTransitionEnd}

libraries/ui-library/src/components/six-sidebar/test/six-sidebar.spec.tsx

@@ -11,7 +11,7 @@ describe('six-sidebar', () => {
       <six-sidebar>
         <mock:shadow-root>
           <host class="six-sidebar">
-            <div aria-hidden="true" class="sidebar--left sidebar__container" style="width: 16rem; margin-left: calc(1rem - 16rem);">
+            <div aria-hidden="true" class="sidebar--left sidebar__container" part="container">
               <slot></slot>
             </div>
           </host>