Skip to content
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

feat(drawer): Allow customizing drawer width #3459

Merged
merged 17 commits into from
Aug 30, 2018
Merged

feat(drawer): Allow customizing drawer width #3459

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4823c23
fix(drawer): Allow customizing drawer width
abhiomkar Aug 28, 2018
e2ba47e
Merge branch 'master' into feat/drawer/width_mixin
abhiomkar Aug 28, 2018
511ffda
fix(drawer): Removed empty file
abhiomkar Aug 28, 2018
b406aed
Merge remote-tracking branch 'origin/feat/drawer/width_mixin' into fe…
abhiomkar Aug 28, 2018
99ebc8e
fix(drawer): Added new drawer width mixin
abhiomkar Aug 28, 2018
f532000
fix(drawer): Updated screenshots. Updated selector to match with mixin
abhiomkar Aug 28, 2018
c442558
Merge branch 'master' into feat/drawer/width_mixin
abhiomkar Aug 28, 2018
8fb76f8
feat(drawer): Removed max-width style and minor change to README
abhiomkar Aug 29, 2018
bd2556e
Merge remote-tracking branch 'origin/feat/drawer/width_mixin' into fe…
abhiomkar Aug 29, 2018
eabb506
fix(drawer): Fixed layout in screenshots
abhiomkar Aug 29, 2018
25d25d4
fix(drawer): Updated golden screenshots
abhiomkar Aug 29, 2018
4c4ac32
fix(drawer): water
abhiomkar Aug 29, 2018
669f265
fix(drawer): Updated golden screenshots
abhiomkar Aug 29, 2018
79b7e43
fix(drawer): Removed extra CSS specificity
abhiomkar Aug 29, 2018
4a9e03b
Merge branch 'master' into feat/drawer/width_mixin
abhiomkar Aug 29, 2018
1facaf8
fix(drawer): water
abhiomkar Aug 29, 2018
bdb64e1
Merge remote-tracking branch 'origin/feat/drawer/width_mixin' into fe…
abhiomkar Aug 29, 2018
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
1 change: 1 addition & 0 deletions demos/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
}

.demo-content {
position: relative;
flex: auto;
overflow: auto;
background: #fff;
Expand Down
5 changes: 4 additions & 1 deletion demos/drawer/permanent-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,14 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
</div>
</aside>
<div class="demo-content" id="demo-content">
<header class="mdc-top-app-bar" id="app-bar">
<header class="mdc-top-app-bar demo-top-app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<span class="mdc-top-app-bar__title">Permanent Drawer</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
</section>
</div>
</header>

Expand Down
1 change: 1 addition & 0 deletions packages/mdc-drawer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ Mixin | Description
`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.

## Accessibility

Expand Down
8 changes: 8 additions & 0 deletions packages/mdc-drawer/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,3 +122,11 @@
@mixin mdc-drawer-z-index($value) {
z-index: $value;
}

@mixin mdc-drawer-width($width) {
width: $width;

&.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
@include mdc-rtl-reflexive-box(margin, left, $width);
}
}
3 changes: 1 addition & 2 deletions packages/mdc-drawer/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,12 @@
@include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
@include mdc-drawer-item-corner-radius(4px);
@include mdc-drawer-z-index($mdc-drawer-z-index);
@include mdc-drawer-width($mdc-drawer-width);

display: flex;
flex-direction: column;
flex-shrink: 0;
box-sizing: border-box;
width: $mdc-drawer-width;
max-width: $mdc-drawer-width;
height: 100%;
transition-property: transform;
transition-timing-function: $mdc-animation-standard-curve-timing-function;
Expand Down
7 changes: 2 additions & 5 deletions packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,8 @@

position: relative;

.mdc-drawer--open + & {
@include mdc-rtl-reflexive-box(margin, left, $mdc-drawer-width);
}

.mdc-drawer--closing + & {
// To level the specificity with app-content selector in `mdc-drawer-width` mixin.
.mdc-drawer.mdc-drawer--closing + & {
abhiomkar marked this conversation as resolved.
Show resolved Hide resolved
@include mdc-rtl-reflexive-box(margin, left, 0);
}
}
59 changes: 34 additions & 25 deletions test/screenshot/golden.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,48 +198,57 @@
}
},
"spec/mdc-drawer/classes/dismissible.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
}
},
"spec/mdc-drawer/classes/modal.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
}
},
"spec/mdc-drawer/classes/permanent.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
}
},
"spec/mdc-drawer/mixins/fill-color-accessible.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
}
},
"spec/mdc-drawer/mixins/fill-color.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
}
},
"spec/mdc-drawer/mixins/width.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_chrome_68.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_edge_17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_firefox_61.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
}
},
"spec/mdc-elevation/classes/baseline-large.html": {
Expand Down
89 changes: 47 additions & 42 deletions test/screenshot/spec/mdc-drawer/classes/dismissible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,58 +48,63 @@
<div class="mdc-drawer__title">Title here</div>
<div class="mdc-drawer__subtitle">Subtext</div>
</header>
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
Star
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
Sent Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
Drafts
</a>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
Star
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
Sent Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
Drafts
</a>

<hr class="mdc-list-divider">
<h6 class="mdc-list-group__subheader">Labels</h6>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Family
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Friends
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Work
</a>
<hr class="mdc-list-divider">
<h6 class="mdc-list-group__subheader">Labels</h6>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Family
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Friends
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
Work
</a>

<hr class="mdc-list-divider">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
Settings
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
Help & feedback
</a>
</nav>
<hr class="mdc-list-divider">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
Settings
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
Help & feedback
</a>
</nav>
</div>
</aside>

<div class="mdc-drawer-app-content test-drawer-app-content">
<header class="mdc-top-app-bar">
<header class="mdc-top-app-bar test-drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
</section>
</div>
</header>

Expand Down
Loading