Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(drawer): custom sass mixins for color, background, scrim #1730

Merged
merged 26 commits into from
Jan 2, 2018
Merged

feat(drawer): custom sass mixins for color, background, scrim #1730

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
792e833
feat(drawer): added fill, color, and scrim color mixins for temp, per…
Dec 7, 2017
4f57a8a
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 7, 2017
c6c6bba
feat(drawer): added default to the drawer ink colors
Dec 7, 2017
b6907f9
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 7, 2017
177bc40
feat(drawer): added classes to illustrate variants demo drawer pages
Dec 8, 2017
957f4da
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 11, 2017
a4ee956
feat(drawer): temporary drawer class naming refactor for sass color m…
Dec 11, 2017
cf45316
feat(drawer): change persistent and permanent classnames for sass col…
Dec 11, 2017
702a755
feat(drawer): updated drawer readme to follow classnaming conventions
Dec 11, 2017
a23155d
feat(drawer): updated drawer theme switches
Dec 12, 2017
9c1df2d
feat(drawer): fixed the permanent fill & ink color theming. Added __d…
Dec 12, 2017
f5072fd
feat(drawer): fixed permanent drawer readme
Dec 12, 2017
559b464
feat(drawer): removed __drawer el from permanent. fixed tests and lint
Dec 12, 2017
b3251f9
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
dfa4b7c
feat(drawer): PR updates adding mdc-form-field and classname updates
Dec 12, 2017
d41685c
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
1907002
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
e79edea
feat(drawer): added accessible fill color mixin and updated demos to …
Dec 12, 2017
989b7d4
feat(drawer): updated README with sass mixins to customize drawers
Dec 13, 2017
6e1c6a1
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 14, 2017
503c2ae
feat(drawer): update drawer demo pages with better BEM naming
Dec 14, 2017
336d123
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 15, 2017
1815681
feat(drawer): updated demo drawer--accessibility selector to change font
Dec 15, 2017
b6ff3eb
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 22, 2017
09f1532
feat(drawer): updated ids in demo htmls files
Dec 22, 2017
8a43447
Merge branch 'master' into feat/drawer/custom-sass-mixins
Jan 2, 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
8 changes: 8 additions & 0 deletions demos/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,15 @@
// limitations under the License.
//

@import "@material/list/mixins";
@import "../common";
@import "../../packages/mdc-drawer/mdc-drawer";
@import "../../packages/mdc-drawer/mixins";
@import "../../packages/mdc-elevation/mdc-elevation";
@import "../../packages/mdc-list/mdc-list";

.demo-drawer.mdc-drawer {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we decided to drop the .mdc-foo selectors on our demo pages, and just use .demo-foo instead.

This follows BEM, and since our CSS is loaded in a predetermined order, the .demo-foo selector should get a higher specificity than the baseline selector (.mdc-foo).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yup you're totally correct. For some reason I saw something different last night. Removing .mdc-foo

@include mdc-drawer-fill-color(#3f51b5);
@include mdc-drawer-ink-color(#fff);
@include mdc-list-item-graphic-ink-color(#fff);
Copy link
Contributor

Choose a reason for hiding this comment

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

We should probably call the primary-text-ink-color mixin too
(it needs to be called on the .mdc-list-item element, btw;
otherwise it will overwrite the value set by mdc-drawer-fill-color.)

So we probably want something like:

.demo-drawer--custom {
  @include mdc-drawer-fill-color($material-color-teal-900);
  @include mdc-drawer-ink-color(#fff);

  .demo-drawer-list-item {
    @include mdc-list-item-graphic-ink-color(text-icon-on-dark);
    @include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
  }

  .demo-drawer-list-item.mdc-list-item--selected {
    @include mdc-list-item-graphic-ink-color(text-primary-on-dark);
    @include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
  }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah ok - ya initially I had this in the mixin, but then we took it out. After removing I should have just put it in the demo classes. Makes sense.

Copy link
Contributor Author

@moog16 moog16 Dec 14, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Should I also do the same changes on .demo-drawer--accessible? If so, should I also create mdc-list accessible mixins?

I think I should have rename the selector .demo-drawer-list-item.mdc-list-item--selected to .demo-drawer-list-item.demo-list-item--selected, since I removed the .mdc-* from the demo pages. Or are we allowing this one because its part of the API?

}
56 changes: 41 additions & 15 deletions demos/drawer/permanent-drawer-above-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -51,14 +52,18 @@
}

/* Place drawer above toolbar shadow. */
.mdc-permanent-drawer {
.mdc-drawer--permanent {
Copy link
Contributor

Choose a reason for hiding this comment

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

🎉

z-index: 2;
}

.demo-main {
padding-left: 16px;
}

.mdc-demo__control {
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's rename this to demo-form-field.

mdc-form-field is a special RTL-aware class that wraps a checkbox, radio, or switch, plus its adjacent <label>.

And our new convention is to prefix CSS class names for demo pages with demo-.

(I generally tend to just s/^mdc-/demo-/ the class name I'm customizing for the demo 🙂 )

Copy link
Contributor Author

Choose a reason for hiding this comment

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

gotcha makes sense

margin: 16px 0;
}

.extra-content-wrapper {
padding: 10px;
}
Expand All @@ -73,11 +78,11 @@
</style>
</head>
<body class="mdc-typography demo-body">
<nav class="mdc-permanent-drawer">
<div class="mdc-permanent-drawer__toolbar-spacer"></div>
<nav class="mdc-drawer mdc-drawer--permanent">
<div class="mdc-drawer__toolbar-spacer"></div>
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
Copy link
Contributor

Choose a reason for hiding this comment

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

mdc-drawer--selected should be mdc-list-item--selected

Ditto in other files

<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand All @@ -94,17 +99,17 @@
<hr class="mdc-list-divider">

<nav class="mdc-list">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
</nav>
<div class="demo-content">
<!-- TODO: #324 - Should switch to .mdc-toolbar--fixed -->
Expand All @@ -122,6 +127,17 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div class="mdc-demo__control">
Copy link
Contributor

Choose a reason for hiding this comment

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

Add mdc-form-field class, and make sure it's @import-ed by demos/drawer.scss

Ditto for other usages

Copy link
Contributor

@kfranqueiro kfranqueiro Dec 12, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

So wait, this will end up having 2 classes, right? mdc-form-field and demo-form-field?

Sorry for my initial confusion in this comment, I didn't realize we were actually adding uses of mdc-form-field in this PR now.

Copy link
Contributor Author

@moog16 moog16 Dec 12, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Ok, so rule of thumb is if a component is followed by a it should be wrapped in mdc-form-field class? So that means it should also appear in temporary and persistent.

Copy link
Contributor

Choose a reason for hiding this comment

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

@kfranqueiro Yes, I believe that's right.
@moog16 Yes, we should always use mdc-form-field when we need to add a label next to a radio, checkbox, or switch

<div class="mdc-switch demo-main__control">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
Copy link
Contributor

Choose a reason for hiding this comment

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

Reword label text to "Custom theme off/on"

Ditto in other files

</div>

<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -144,6 +160,16 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
document.querySelector('#toggle-tall').addEventListener('click', function() {
extraTall.style.display = extraTall.style.display ? '' : 'none';
});

var drawerEl = document.querySelector('.mdc-drawer');
var switchEl = document.querySelector('.mdc-switch');
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use an ID instead of a class name

Ditto in other files

switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
Copy link
Contributor

Choose a reason for hiding this comment

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

'demo-drawer--custom'

Ditto in other files

} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
31 changes: 29 additions & 2 deletions demos/drawer/permanent-drawer-below-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -52,6 +53,10 @@
padding-left: 16px;
}

.mdc-demo__control {
margin: 16px 0;
}

.extra-content-wrapper {
padding: 10px;
}
Expand All @@ -78,10 +83,10 @@
</header>

<div class="demo-content mdc-toolbar-fixed-adjust">
<nav class="mdc-permanent-drawer">
<nav class="mdc-drawer mdc-drawer--permanent">
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand Down Expand Up @@ -113,6 +118,18 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div class="mdc-demo__control">
<div class="mdc-switch demo-main__control">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</div>


<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -135,6 +152,16 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
document.querySelector('#toggle-tall').addEventListener('click', function() {
extraTall.style.display = extraTall.style.display ? '' : 'none';
});

var drawerEl = document.querySelector('.mdc-drawer');
Copy link
Contributor

Choose a reason for hiding this comment

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

For future-proofing, I would probably give both these elements an id and select on that.

E.g., id="demo-drawer" and id="demo-theme-switch"

Ditto for other files

var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
32 changes: 27 additions & 5 deletions demos/drawer/persistent-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -52,16 +53,21 @@

.demo-main {
padding-left: 16px;
padding-bottom: 16px;
}

.demo-main__control {
Copy link
Contributor

Choose a reason for hiding this comment

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

  1. Rename to demo-switch
  2. Move this class to demos/drawer/drawer.scss
  3. File a follow-up chore in Pivotal to consolidate and move existing common/shared styles out of the <style> blocks in each individual drawer demo page into demos/drawer/drawer.scss

Ditto for other files

margin-top: 16px;
}
</style>
</head>
<body class="mdc-typography demo-body">
<aside class="mdc-persistent-drawer">
<nav class="mdc-persistent-drawer__drawer">
<div class="mdc-persistent-drawer__toolbar-spacer"></div>
<aside class="mdc-drawer mdc-drawer--persistent demo-drawer">
<nav class="mdc-drawer__drawer">
<div class="mdc-drawer__toolbar-spacer"></div>
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand Down Expand Up @@ -107,11 +113,18 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Persistent Drawer</h1>
<p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
<div class="mdc-switch demo-main__control">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</main>

<script src="/assets/material-components-web.js"></script>
<script>
var drawerEl = document.querySelector('.mdc-persistent-drawer');
var drawerEl = document.querySelector('.mdc-drawer');
var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
var drawer = new MDCPersistentDrawer(drawerEl);
document.querySelector('.demo-menu').addEventListener('click', function() {
Expand All @@ -123,6 +136,15 @@ <h1 class="mdc-typography--display1">Persistent Drawer</h1>
drawerEl.addEventListener('MDCPersistentDrawer:close', function() {
console.log('Received MDCPersistentDrawer:close');
});

var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</div>
</body>
Expand Down
36 changes: 29 additions & 7 deletions demos/drawer/temporary-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand All @@ -33,8 +34,13 @@

.demo-main {
padding-left: 16px;
padding-bottom: 16px;
overflow: auto;
}

.demo-main__control {
margin-top: 16px;
}
</style>
</head>
<body class="mdc-typography demo-body">
Expand All @@ -50,16 +56,16 @@
</div>
</div>

<aside class="mdc-temporary-drawer">
<nav class="mdc-temporary-drawer__drawer">
<header class="mdc-temporary-drawer__header">
<div class="mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary">
<aside class="mdc-drawer mdc-drawer--temporary">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
Header here
</div>
</header>
<nav class="mdc-temporary-drawer__content mdc-list-group">
<nav class="mdc-drawer__content mdc-list-group">
<div id="icon-with-text-demo" class="mdc-list">
<a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand Down Expand Up @@ -92,11 +98,18 @@
<main class="demo-main mdc-toolbar-fixed-adjust">
<h1 class="mdc-typography--display1">Temporary Drawer</h1>
<p class="mdc-typography--body1">Click the menu icon above to open.</p>
<div class="mdc-switch demo-main__control">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</main>

<script src="/assets/material-components-web.js"></script>
<script>
var drawerEl = document.querySelector('.mdc-temporary-drawer');
var drawerEl = document.querySelector('.mdc-drawer');
var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
var drawer = new MDCTemporaryDrawer(drawerEl);
document.querySelector('.demo-menu').addEventListener('click', function() {
Expand All @@ -108,6 +121,15 @@ <h1 class="mdc-typography--display1">Temporary Drawer</h1>
drawerEl.addEventListener('MDCTemporaryDrawer:close', function() {
console.log('Received MDCTemporaryDrawer:close');
});

var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
Loading