From 03336cd7b3ce2049b88888899b87e20743af1e81 Mon Sep 17 00:00:00 2001 From: stevem63 <41303817+stevem63@users.noreply.github.com> Date: Mon, 8 Jun 2020 15:20:19 -0700 Subject: [PATCH] feat(space-list): light mode theme for space list (#606) * feat(space-list): light mode theme for space list * revert example changes * chore: address feedback no color updates * chore: update colors * chore: remove changes from default example * chore: remove changes from default example * chore: remove changes from default example * chore: further code req changes * chore: build core * fix: space list snapshots * feat: add space list meeting & buttongroup lightmode changes * feat(light-mode): update snapshot and buttongroup colors Co-authored-by: aimeex3 <819823+aimeex3@users.noreply.github.com> --- .../components/button-group/settings.scss | 6 +- core/scss/components/list-item/list-item.scss | 15 ++++ .../space-list/space-list-item.scss | 88 +++++++++++++++++++ core/scss/ng/select.scss | 2 +- core/scss/ng/settings/settings.scss | 6 +- core/scss/settings/settings.scss | 6 +- react/src/lib/ListItemHeader/index.js | 2 +- .../src/lib/SpaceListItem/examples/Default.js | 2 +- react/src/lib/SpaceListItem/index.js | 5 ++ .../tests/__snapshots__/index.spec.js.snap | 1 + react/src/lib/SpaceListMeeting/index.js | 5 ++ .../tests/__snapshots__/index.spec.js.snap | 1 + 12 files changed, 127 insertions(+), 12 deletions(-) diff --git a/core/scss/components/button-group/settings.scss b/core/scss/components/button-group/settings.scss index f554b4b2cf..a9ffdde7d3 100644 --- a/core/scss/components/button-group/settings.scss +++ b/core/scss/components/button-group/settings.scss @@ -1,14 +1,14 @@ $button-group__class: '#{$prefix}-button-group'; -$button-group__font-size: rem-calc(12); +$button-group__font-size: rem-calc(14); $button-group__border-size: rem-calc(1); $button-group__border: $button-group__border-size solid $md-gray-20; $button-group__color: $md-black-100; $button-group__background: transparent; $button-group__line-height: rem-calc(16); $button-group__padding: rem-calc(8) rem-calc(18); -$button-group-active__color: $md-white-100; -$button-group-active__background: $black-48; +$button-group-active__color: $md-gray-100; +$button-group-active__background: $md-blue-10; $button-group-disabled__color: $md-gray-50; $button-group-hover__background: $black-04; $button-group__border-radius-pill: rem-calc(25); diff --git a/core/scss/components/list-item/list-item.scss b/core/scss/components/list-item/list-item.scss index a90f09014c..3744db2a4c 100644 --- a/core/scss/components/list-item/list-item.scss +++ b/core/scss/components/list-item/list-item.scss @@ -69,6 +69,21 @@ $active-bgrd-color: $list-item__background--dark, $header-color: $list-item-header__color--dark ); + + &-light { + @include list-item-color( + $background-color: $md-gray-05, + $color: $md-gray-70, + $active-color: $md-gray-100, + $hover-bgrd-color: $md-gray-10, + $active-bgrd-color: $md-gray-10, + $hover-header-color: $md-gray-100, + $hover-subheader-color: $md-gray-100, + $header-color: $md-gray-70, + $subheader-color: $md-gray-70, + $focus-color: $md-gray-10 + ); + } } @include list-item--dark( diff --git a/core/scss/components/space-list/space-list-item.scss b/core/scss/components/space-list/space-list-item.scss index 94a24a40f3..89df70671e 100644 --- a/core/scss/components/space-list/space-list-item.scss +++ b/core/scss/components/space-list/space-list-item.scss @@ -297,6 +297,94 @@ font-size: rem-calc(14); } } + + &-light { + @include list-item-color( + $background-color: $md-gray-05, + $color: $md-gray-70, + $active-color: $md-gray-100, + $hover-bgrd-color: $md-gray-10, + $active-bgrd-color: $md-gray-10, + $hover-header-color: $md-gray-100, + $hover-subheader-color: $md-gray-100, + $header-color: $md-gray-70, + $subheader-color: $md-gray-70, + $focus-color: $md-gray-10 + ); + + .md-icon { + color: $md-gray-70; + } + + &.#{$list-item__class}--space-filter-summary { + [class*='__header'] { + color: $md-gray-70; + } + } + + &.#{$list-item__class}--space-search, + &.#{$list-item__class}--space-filter, + &.#{$list-item__class}--space-flag, + &.#{$list-item__class}--space-filter-search { + > [class$='__center'] { + > [class*='__header'] { + > [class$='-secondary'] { + color: $md-gray-70; + } + } + } + + [class$='__result-container'] { + [class$='__attachment'] { + [class$='__attachment--top'] { + [class$='-left'] { + color: $md-gray-70; + } + } + } + } + + [class*='__result'] { + color: $md-gray-70; + } + } + + &.#{$list-item__class}--space-filter:not(.md-list-item--unread), + &.#{$list-item__class}--space-filter-search:not(.md-list-item--unread), + &.#{$list-item__class}--space-flag:not(.md-list-item--unread) { + > [class$='__center'] { + [class$='__header'], + [class$='__header--overview'] { + color: $md-gray-70; + } + } + } + + [class$='__header--overview'] { + color: $md-gray-70; + } + + &.#{$list-item__class}--unread { + .#{$list-item__class}__header { + color: $md-gray-100; + } + } + + &.#{$list-item__class}--space-meeting { + [class$='--attendees'] { + color: $md-gray-70; + fill: $md-gray-70; + } + + .#{$button__class} { + color: $md-gray-05; + background-color: $md-green-60; + &:hover { + background-color: $md-green-70; + } + } + } + } } } } diff --git a/core/scss/ng/select.scss b/core/scss/ng/select.scss index a069a0f8d3..3ae278c88c 100644 --- a/core/scss/ng/select.scss +++ b/core/scss/ng/select.scss @@ -413,7 +413,7 @@ background-color: $md-theme-50; .md-input { - color: #292929; + color: $md-gray-90; } > a { diff --git a/core/scss/ng/settings/settings.scss b/core/scss/ng/settings/settings.scss index 2547a04751..5bce25697d 100644 --- a/core/scss/ng/settings/settings.scss +++ b/core/scss/ng/settings/settings.scss @@ -8469,15 +8469,15 @@ $button-container--small__width: 104px; $button-group__class: '#{$prefix}-button-group'; -$button-group__font-size: rem-calc(12); +$button-group__font-size: rem-calc(14); $button-group__border-size: rem-calc(1); $button-group__border: $button-group__border-size solid $md-gray-20; $button-group__color: $md-black-100; $button-group__background: transparent; $button-group__line-height: rem-calc(16); $button-group__padding: rem-calc(8) rem-calc(18); -$button-group-active__color: $md-white-100; -$button-group-active__background: $black-48; +$button-group-active__color: $md-gray-100; +$button-group-active__background: $md-blue-10; $button-group-disabled__color: $md-gray-50; $button-group-hover__background: $black-04; $button-group__border-radius-pill: rem-calc(25); diff --git a/core/scss/settings/settings.scss b/core/scss/settings/settings.scss index de06a3d8aa..446990d9fa 100644 --- a/core/scss/settings/settings.scss +++ b/core/scss/settings/settings.scss @@ -5254,15 +5254,15 @@ $button-container--small__width: 104px; $button-group__class: '#{$prefix}-button-group'; -$button-group__font-size: rem-calc(12); +$button-group__font-size: rem-calc(14); $button-group__border-size: rem-calc(1); $button-group__border: $button-group__border-size solid $md-gray-20; $button-group__color: $md-black-100; $button-group__background: transparent; $button-group__line-height: rem-calc(16); $button-group__padding: rem-calc(8) rem-calc(18); -$button-group-active__color: $md-white-100; -$button-group-active__background: $black-48; +$button-group-active__color: $md-gray-100; +$button-group-active__background: $md-blue-10; $button-group-disabled__color: $md-gray-50; $button-group-hover__background: $black-04; $button-group__border-radius-pill: rem-calc(25); diff --git a/react/src/lib/ListItemHeader/index.js b/react/src/lib/ListItemHeader/index.js index 6ca17950a2..d3486f9d8f 100644 --- a/react/src/lib/ListItemHeader/index.js +++ b/react/src/lib/ListItemHeader/index.js @@ -77,7 +77,7 @@ ListItemHeader.propTypes = { /** @prop ListItem title | '' */ title: PropTypes.string, /** @prop ListItemHeader type variation | '' */ - type: PropTypes.oneOf(['', 'space']), + type: PropTypes.oneOf(['', 'space', 'space-light']), }; ListItemHeader.defaultProps = { diff --git a/react/src/lib/SpaceListItem/examples/Default.js b/react/src/lib/SpaceListItem/examples/Default.js index 68973e49b6..db76880fcf 100644 --- a/react/src/lib/SpaceListItem/examples/Default.js +++ b/react/src/lib/SpaceListItem/examples/Default.js @@ -10,7 +10,7 @@ export default class ListItemDefault extends React.PureComponent { return(
- + diff --git a/react/src/lib/SpaceListItem/index.js b/react/src/lib/SpaceListItem/index.js index 5232b7b4dd..0ddaabd68f 100644 --- a/react/src/lib/SpaceListItem/index.js +++ b/react/src/lib/SpaceListItem/index.js @@ -35,6 +35,7 @@ class SpaceListItem extends React.PureComponent { resultRight, searchTerm, subheader, + theme, title, type, ...props @@ -204,6 +205,7 @@ class SpaceListItem extends React.PureComponent { className={ `${(isBold && ` md-list-item--unread`) || ''}` + `${(type && ` md-list-item--space-${type}`) || ''}` + + `${(theme && ` md-list-item--space-${theme}`) || ''}` + `${(className && ` ${className}`) || ''}` } id={id} @@ -254,6 +256,8 @@ SpaceListItem.propTypes = { searchTerm: PropTypes.string, /** @prop SpaceListItem subheader node | ''s */ subheader: PropTypes.node, + /** @prop SpaceListItem theme | '' */ + theme: PropTypes.string, /** @prop SpaceListItem title | '' */ title: PropTypes.string, /** @prop SpaceListItem type | '' */ @@ -286,6 +290,7 @@ SpaceListItem.defaultProps = { searchTerm: '', subheader: '', title: '', + theme: '', type: '' }; diff --git a/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap index 6c8692c211..371c285f08 100644 --- a/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap +++ b/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap @@ -22,6 +22,7 @@ ShallowWrapper { resultRight={null} searchTerm="" subheader="" + theme="" title="" type="" />, diff --git a/react/src/lib/SpaceListMeeting/index.js b/react/src/lib/SpaceListMeeting/index.js index 006954272f..3b8b84bcfb 100644 --- a/react/src/lib/SpaceListMeeting/index.js +++ b/react/src/lib/SpaceListMeeting/index.js @@ -32,6 +32,7 @@ class SpaceListMeeting extends React.PureComponent { isBold, meetingType, subheader, + theme, title, ...props } = this.props; @@ -128,6 +129,7 @@ class SpaceListMeeting extends React.PureComponent { className={ 'md-list-item--space-meeting' + `${(isBold && ` md-list-item--unread`) || ''}` + + `${(theme && ` md-list-item--space-${theme}`) || ''}` + `${(className && ` ${className}`) || ''}` } id={id} @@ -175,6 +177,8 @@ SpaceListMeeting.propTypes = { meetingType: PropTypes.oneOf(['', 'group', 'number', 'device']), /** @prop SpaceListMeeting sub header node | '' */ subheader: PropTypes.node, + /** @prop SpaceListMeeting color theme */ + theme: PropTypes.string, /** @prop SpaceListMeeting title | '' */ title: PropTypes.string, }; @@ -192,6 +196,7 @@ SpaceListMeeting.defaultProps = { eventOverlayProps: null, meetingType: '', subheader: '', + theme: '', title: '', }; diff --git a/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap index 0c91fd4c93..e76b061477 100644 --- a/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap +++ b/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap @@ -17,6 +17,7 @@ ShallowWrapper { isMessagingOnlyShare={false} meetingType="" subheader="" + theme="" title="" />, Symbol(enzyme.__renderer__): Object {