Skip to content

Commit

Permalink
feat(sidebar): added padding and border to sidebar (patternfly#5221)
Browse files Browse the repository at this point in the history 
* feat(sidebar): added padding and border to sidebar

* feat(sidebar): rebased, updated hbs template

* feat(sidebar): updated padding mods
  • Loading branch information
@mattnolting
mattnolting committed May 18, 2023
1 parent 7ecca31 commit 9e76874
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 27 deletions.
50 changes: 50 additions & 0 deletions src/patternfly/components/Sidebar/examples/Sidebar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,54 @@ import './Sidebar.css'
{{/sidebar}}
```

### Border
```hbs
{{#> sidebar sidebar--modifier="pf-m-gutter" sidebar--HasBorder=true}}
{{#> sidebar-panel}}
Sidebar panel
{{/sidebar-panel}}
{{#> sidebar-content}}
{{#> content}}
<p>Default layout.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
{{/content}}
{{/sidebar-content}}
{{/sidebar}}
```

### Padding on panel
```hbs
{{#> sidebar}}
{{#> sidebar-panel sidebar-panel--modifier="pf-m-padding"}}
Sidebar panel, with padding
{{/sidebar-panel}}
{{#> sidebar-content}}
{{#> content}}
<p>Default layout.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
{{/content}}
{{/sidebar-content}}
{{/sidebar}}
```

### Padding on content
```hbs
{{#> sidebar}}
{{#> sidebar-panel}}
Sidebar panel
{{/sidebar-panel}}
{{#> sidebar-content sidebar-content--modifier="pf-m-padding"}}
{{#> content}}
<p>Sidebar content, with padding</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
{{/content}}
{{/sidebar-content}}
{{/sidebar}}
```

## Documentation

### Usage
Expand All @@ -160,6 +208,8 @@ import './Sidebar.css'
| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
| `.pf-m-border` | `.pf-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
| `.pf-m-padding` | `.pf-c-sidebar__panel`, `.pf-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
Expand Down
4 changes: 3 additions & 1 deletion src/patternfly/components/Sidebar/sidebar-main.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<div class="pf-c-sidebar__main{{#if sidebar-main--modifier}} {{sidebar-main--modifier}}{{/if}}"
<div class="pf-c-sidebar__main
{{#if sidebar--HasBorder}} pf-m-border{{/if}}
{{#if sidebar-main--modifier}} {{sidebar-main--modifier}}{{/if}}"
{{#if sidebar-main--attribute}}
{{{sidebar-main--attribute}}}
{{/if}}>
Expand Down
109 changes: 83 additions & 26 deletions src/patternfly/components/Sidebar/sidebar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,75 @@
$pf-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
$pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);


.pf-c-sidebar {
--pf-c-sidebar--inset: var(--pf-global--spacer--md);
--pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
--pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
--pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
--pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);

// Panel
--pf-c-sidebar__panel--PaddingTop: 0;
--pf-c-sidebar__panel--PaddingRight: 0;
--pf-c-sidebar__panel--PaddingBottom: 0;
--pf-c-sidebar__panel--PaddingLeft: 0;
--pf-c-sidebar__panel--Order: -1;

// Panel padding
--pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
--pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
--pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
--pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);

// Content
--pf-c-sidebar__content--PaddingTop: 0;
--pf-c-sidebar__content--PaddingRight: 0;
--pf-c-sidebar__content--PaddingBottom: 0;
--pf-c-sidebar__content--PaddingLeft: 0;
--pf-c-sidebar__content--Order: 1;

// Content padding
--pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
--pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
--pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
--pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);

// Main
--pf-c-sidebar__main--FlexDirection: column;
--pf-c-sidebar__main--md--FlexDirection: row;
--pf-c-sidebar__main--AlignItems: stretch;
--pf-c-sidebar__main--md--AlignItems: start;
--pf-c-sidebar__main--child--MarginTop: 0;
--pf-c-sidebar__main--child--MarginLeft: 0;

// Gutter
--pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
--pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
--pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);

// Border
--pf-c-sidebar__main--m-border--before--Display: none;
--pf-c-sidebar__main--m-border--before--md--Display: block;
--pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
--pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);

// Panel right
--pf-c-sidebar--m-panel-right__panel--Order: 0;
--pf-c-sidebar--m-panel-right__panel--Order: -1;
--pf-c-sidebar--m-panel-right__panel--md--Order: 1;
--pf-c-sidebar--m-panel-right__content--md--Order: -1;

// Stack
--pf-c-sidebar--m-stack__main--FlexDirection: column;
--pf-c-sidebar--m-stack__main--AlignItems: stretch;
--pf-c-sidebar--m-stack__panel--Position: sticky;
--pf-c-sidebar--m-stack__panel--Top: 0;
--pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
--pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
--pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;

// Split
--pf-c-sidebar--m-split__main--AlignItems: start;
--pf-c-sidebar--m-split__main--FlexDirection: row;
--pf-c-sidebar--m-split__panel--Position: static;
--pf-c-sidebar--m-split__panel--Top: auto;
--pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
--pf-c-sidebar--m-split__main--m-border--before--Display: block;

// Panel
--pf-c-sidebar__panel--FlexBasis--base: auto;
Expand All @@ -50,7 +85,6 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
--pf-c-sidebar__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
--pf-c-sidebar__panel--m-stack--FlexBasis: auto;
--pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
--pf-c-sidebar__panel--Order: 0;
--pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);

// Content
Expand All @@ -62,61 +96,51 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);

@media (min-width: $pf-global--breakpoint--md) {
--pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
--pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
--pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display); // show border starting at md breakpoint
--pf-c-sidebar__panel--BoxShadow: none;
--pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
--pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
--pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
--pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
}

@media (min-width: $pf-global--breakpoint--xl) {
--pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
--pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
}

&.pf-m-gutter {
--pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
--pf-c-sidebar__main--child--MarginLeft: 0;

> .pf-c-sidebar__main > * + * {
margin-top: var(--pf-c-sidebar__main--child--MarginTop);
margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
}

@media (min-width: $pf-global--breakpoint--md) {
--pf-c-sidebar__main--child--MarginTop: 0;
--pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
}
&.pf-m-gutter > .pf-c-sidebar__main {
gap: var(--pf-c-sidebar--m-gutter__main--Gap);
}

&.pf-m-panel-right {
--pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
--pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);

@media (min-width: $pf-global--breakpoint--md) {
--pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
--pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
}
}

&.pf-m-stack {
--pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
--pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
--pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
--pf-c-sidebar__main--child--MarginLeft: 0;
--pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
--pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
--pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
--pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
--pf-c-sidebar__main--m-border--before--Display: none;
--pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
}

&.pf-m-split {
--pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
--pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
--pf-c-sidebar__main--child--MarginTop: 0;
--pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
--pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
--pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
--pf-c-sidebar__panel--BoxShadow: none;
--pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
--pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
--pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
}

Expand All @@ -127,6 +151,14 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
display: flex;
flex-direction: var(--pf-c-sidebar__main--FlexDirection);
align-items: var(--pf-c-sidebar__main--AlignItems);

&.pf-m-border::before {
display: var(--pf-c-sidebar__main--m-border--before--Display);
flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
align-self: stretch;
content: "";
background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
}
}

.pf-c-sidebar__panel {
Expand All @@ -136,9 +168,17 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
flex-shrink: 0;
order: var(--pf-c-sidebar__panel--Order);
padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
background-color: var(--pf-c-sidebar__panel--BackgroundColor);
box-shadow: var(--pf-c-sidebar__panel--BoxShadow);

&.pf-m-padding {
--pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
--pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
--pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
--pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
}

&.pf-m-sticky {
--pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
--pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
Expand All @@ -152,11 +192,28 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);

.pf-c-sidebar__content {
flex-grow: 1;
order: var(--pf-c-sidebar__content--Order);
padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
background-color: var(--pf-c-sidebar__content--BackgroundColor);

&.pf-m-padding {
--pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
--pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
--pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
--pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
}

&.pf-m-no-background {
--pf-c-sidebar__content--BackgroundColor: transparent;
}

& + .pf-c-sidebar__panel {
--pf-c-sidebar__panel--Order: 1;
}

:where(&:first-child) {
--pf-c-sidebar__content--Order: -1;
}
}

.pf-c-sidebar,
Expand Down

0 comments on commit 9e76874

Please sign in to comment.