Skip to content

Feature/six sidebar expose container part #263

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
flamenkito wants to merge 13 commits into from
Closed

Feature/six sidebar expose container part #263

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
549d46c
Add new component six-date
davidemarcoli Apr 16, 2024
69f4ef7
changed six-datepicker to six-date in the example
Apr 16, 2024
85d8170
Move six-date from popup to popover
davidemarcoli Apr 17, 2024
7063825
Fix placement of six-date when there isn't enough space
davidemarcoli Apr 17, 2024
56edb80
Fix placement of six-date wrong when there is a label or help-text
davidemarcoli Apr 17, 2024
35492c8
Update SixHeader component with new slots and events
Jun 3, 2024
d4ab819
Update SixHeader-tests according to the changes made in six.header.tsx
Jun 4, 2024
5cfbd7c
Remove not related changes
aleksey-sutov Jun 5, 2024
99c53ae
Expose six-sidebar container part for styling
aleksey-sutov Jun 17, 2024
83612e3
Update changelog
aleksey-sutov Jun 17, 2024
0a949eb
Remove unrelated changes
aleksey-sutov Jun 17, 2024
e193da8
Update docs
aleksey-sutov Jun 17, 2024
93bdcd1
Merge branch 'main' of https://github.com/six-group/six-webcomponents…
aleksey-sutov Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

### Changed
Expand Down
18 changes: 12 additions & 6 deletions docs/components/six-sidebar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,12 +269,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
Expand Down Expand Up @@ -360,6 +359,13 @@ Type: `Promise<void>`
| | Used to define the nested side bar [group] items. |


## Shadow Parts

| Part | Description |
| ------------- | ----------- |
| `"container"` | |


----------------------------------------------

Copyright © 2021-present SIX-Group
4 changes: 2 additions & 2 deletions libraries/ui-library-angular/src/lib/stencil-generated/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1197,15 +1197,15 @@ export declare interface SixSelect extends Components.SixSelect {


@ProxyCmp({
inputs: ['open', 'position', 'toggled', 'width'],
inputs: ['open', 'position', 'toggled'],
methods: ['toggle', 'show', 'hide', 'selectItemByIndex', 'selectItemByName']
})
@Component({
selector: 'six-sidebar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['open', 'position', 'toggled', 'width'],

@colinscz colinscz Jun 17, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would mean we have a breaking change, I guess we could include this in the release which also targets node 18 and above but not before.

cc: @ibirrer

inputs: ['open', 'position', 'toggled'],
})
export class SixSidebar {
protected el: HTMLElement;
Expand Down
1 change: 0 additions & 1 deletion libraries/ui-library-vue/src/lib/stencil-generated/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,7 +474,6 @@ export const SixSelect = /*@__PURE__*/ defineContainer<JSX.SixSelect, JSX.SixSel
export const SixSidebar = /*@__PURE__*/ defineContainer<JSX.SixSidebar>('six-sidebar', undefined, [
'position',
'open',
'width',
'toggled',
'six-sidebar-show',
'six-sidebar-after-show',
Expand Down
8 changes: 0 additions & 8 deletions libraries/ui-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1479,10 +1479,6 @@ export namespace Components {
* Define whether sidebar is toggled meaning only one menu can be open at the same time
*/
"toggled": boolean;
/**
* Sidebar width
*/
"width": string;
}
/**
* @since 1.0
Expand Down Expand Up @@ -4631,10 +4627,6 @@ declare namespace LocalJSX {
* Define whether sidebar is toggled meaning only one menu can be open at the same time
*/
"toggled"?: boolean;
/**
* Sidebar width
*/
"width"?: string;
}
/**
* @since 1.0
Expand Down
18 changes: 12 additions & 6 deletions libraries/ui-library/src/components/six-sidebar/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
24 changes: 19 additions & 5 deletions libraries/ui-library/src/components/six-sidebar/six-sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
@import 'src/global/mixins/scrollbar';

:host {
--width: 16rem;

display: block;
height: 100%;
}
Expand All @@ -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 {
Expand All @@ -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;
Expand Down
8 changes: 1 addition & 7 deletions libraries/ui-library/src/components/six-sidebar/six-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion libraries/ui-library/src/components/six-sidebar/test/six-sidebar.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down