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.

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(segmented-button): Add initial Sass styles #6141

Merged
merged 29 commits into from
Jul 27, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
20ee999
feat: add initial sass styles
gschrag Jun 24, 2020
75a98ca
docs: link to issue #6069
gschrag Jun 24, 2020
721c40c
chore: fix dependency errors
gschrag Jun 26, 2020
9dc00f1
style: update to satisfy stylelint-prettier
gschrag Jun 26, 2020
7dd52a6
refactor: split sass into appropriate files
gschrag Jun 30, 2020
a07e18f
refactor: rename a few files and classes
gschrag Jun 30, 2020
47cd2a8
chore: use feature-targeting
gschrag Jun 30, 2020
0bba86b
refactor: fix style and build
gschrag Jun 30, 2020
b43bddd
refactor: modularize sass into mixins
gschrag Jul 6, 2020
7679028
refactor: separate themes from core and add variables
gschrag Jul 6, 2020
89c8d5e
style: fix style and build tests
gschrag Jul 6, 2020
2e0dcc5
chore: forward sass themes
gschrag Jul 6, 2020
5569a4f
refactor: move private mixins to _segment.scss
gschrag Jul 7, 2020
4ff9043
chore: fix $query arguments
gschrag Jul 7, 2020
314ee81
refactor: move base mixins out of theme files
gschrag Jul 7, 2020
b918a5d
refactor: remove dependency of mdc-button
gschrag Jul 7, 2020
f7a462d
chore: fix tests
gschrag Jul 7, 2020
9061826
refactor: use custom-properties instead of theme mixins and variables
gschrag Jul 15, 2020
b18e2ff
chore: fix lint, build, and dependency
gschrag Jul 16, 2020
8b7b1d8
chore: fix border manipulation
gschrag Jul 17, 2020
17a64b0
refactor: separate custom-properties from variable definitions
gschrag Jul 21, 2020
99b1920
refactor: add selected/unselected theming mixins
gschrag Jul 21, 2020
4775933
style: fix lint tests
gschrag Jul 21, 2020
67c64d1
refactor: add more specific and separated theming
gschrag Jul 21, 2020
8a9b16f
chore: fix lint and build tests
gschrag Jul 22, 2020
62cd9e1
refactor: update sass imports, remove changing outline color
gschrag Jul 23, 2020
0678cc9
docs: change css comments to sass comments
gschrag Jul 23, 2020
3afd9a0
chore: update theme/color import to theme/theme-color
gschrag Jul 24, 2020
8d1894c
Merge branch 'master' into feat/segmented-button__styles
abhiomkar Jul 27, 2020
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
5 changes: 4 additions & 1 deletion packages/mdc-segmented-button/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,7 @@
// THE SOFTWARE.
//

// TODO: Add styles.
// Index: Forward mixins of theme modules for client use

@forward './segmented-button/segmented-button-theme';
@forward './segment/segment-theme';
5 changes: 4 additions & 1 deletion packages/mdc-segmented-button/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
},
"dependencies": {
"@material/base": "^7.0.0",
"@material/ripple": "^7.0.0"
"@material/feature-targeting": "^7.0.0",
"@material/ripple": "^7.0.0",
"@material/theme": "^7.0.0",
"@material/typography": "^7.0.0"
}
}
140 changes: 140 additions & 0 deletions packages/mdc-segmented-button/segment/_segment-theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Theme: Variables, functions, and mixins required to theme component segment

@use '@material/feature-targeting';
@use '@material/theme/theme-color';
@use '@material/theme/custom-properties';

$on-surface: theme-color.$on-surface;
$surface: theme-color.$surface;
$primary: theme-color.$primary;

$unselected-ink-color: rgba($on-surface, 0.6);
$unselected-outline-color: rgba($on-surface, 0.12);
$unselected-container-fill-color: rgba($surface, 1);
$selected-ink-color: rgba($primary, 1);
$selected-outline-color: $unselected-outline-color;
$selected-container-fill-color: rgba($primary, 0.08);

$height: 36px;
$min-width: 48px;
$horizontal-padding: 12px;
$border-width: 1px;
$border-radius: 4px;
$icon-width: 24px;
$icon-font-size: 18px;
$label-padding: 6px;

/// Sets the border color of the segment
/// @param {String} $color - Color of segment outline
@mixin outline-color($color, $query: feature-targeting.all()) {
gschrag marked this conversation as resolved.
Show resolved Hide resolved
.mdc-segmented-button__segment {
$property: custom-properties.create(
--mdc-segmented-button-outline-color,
$color
);
@include _outline-color($property, $query);
}
}

/// Sets the text and icon color within the segment when it is not selected
/// @param {String} $color - Color of text and icon in segment
@mixin unselected-ink-color($color, $query: feature-targeting.all()) {
.mdc-segmented-button__segment {
$property: custom-properties.create(
--mdc-segmented-button-unselected-ink-color,
$color
);
@include _ink-color($property, $query);
}
}

/// Sets the background fill color of the segment when it is not selected
/// @param {String} $color - Color of segment background
@mixin unselected-container-fill-color(
$color,
$query: feature-targeting.all()
) {
.mdc-segmented-button__segment {
$property: custom-properties.create(
--mdc-segmented-button-unselected-container-fill-color,
$color
);
@include _container-fill-color($property, $query);
}
}

/// Sets the text and icon color within the segment when it is selected
/// @param {String} $color - Color of text and icon in segment
@mixin selected-ink-color($color, $query: feature-targeting.all()) {
.mdc-segmented-button__segment--selected {
$property: custom-properties.create(
--mdc-segmented-button-selected-ink-color,
$color
);
@include _ink-color($property, $query);
}
}

/// Sets the background fill color of the segment when it is not selected
/// @param {String} $color - Color of segment background
@mixin selected-container-fill-color($color, $query: feature-targeting.all()) {
.mdc-segmented-button__segment--selected {
$property: custom-properties.create(
--mdc-segmented-button-selected-container-fill-color,
$color
);
@include _container-fill-color($property, $query);
}
}

/// Sets the text and icon color
/// @param {Map} $property - Custom property of text and icon color
@mixin _ink-color($property, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);

@include feature-targeting.targets($feat-color) {
@include custom-properties.apply('color', $property);
}
}

/// Sets the border color
/// @param {Map} $property - Custom property of border color
@mixin _outline-color($property, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);

@include feature-targeting.targets($feat-color) {
@include custom-properties.apply('border-color', $property);
}
}

/// Sets the background fill color
/// @param {Map} $property - Custom property of background color
@mixin _container-fill-color($property, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);

@include feature-targeting.targets($feat-color) {
@include custom-properties.apply('background-color', $property);
}
}
153 changes: 153 additions & 0 deletions packages/mdc-segmented-button/segment/_segment.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Core: Define complete styles to render component segment, including base and theme styles

@use '@material/feature-targeting';
@use '@material/typography/mixins' as typography-mixins;
@use './segment-theme';

@mixin core-styles($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

// TODO: include test for element resizing besides the left/right border
.mdc-segmented-button__segment {
@include base($query);
@include _unselected($query);

&:hover {
@include feature-targeting.targets($feat-structure) {
cursor: pointer;
}
}

&:first-child {
@include feature-targeting.targets($feat-structure) {
border-radius: segment-theme.$border-radius 0px 0px
segment-theme.$border-radius;
}
}

&:last-child {
@include feature-targeting.targets($feat-structure) {
border-right-width: segment-theme.$border-width;
border-radius: 0px segment-theme.$border-radius
segment-theme.$border-radius 0px;
}
}
}

// Style for when element is selected
.mdc-segmented-button__segment--selected {
@include _selected($query);

// Avoids double borders
+ .mdc-segmented-button__segment {
@include feature-targeting.targets($feat-structure) {
border-left: hidden;
}
}
}

.mdc-segmented-button__icon {
@include icon($query);
}

.mdc-segmented-button__icon + .mdc-segmented-button__label {
@include label($query);
}
}

@mixin base($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

@include typography-mixins.typography(button, $query);
@include segment-theme.outline-color(
segment-theme.$unselected-outline-color,
$query
);
@include feature-targeting.targets($feat-structure) {
display: inline-flex;
vertical-align: top;
align-items: center;
height: segment-theme.$height;
min-width: segment-theme.$min-width;
padding: 0px segment-theme.$horizontal-padding;
border-width: segment-theme.$border-width;
}
}

@mixin _unselected($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

@include segment-theme.unselected-ink-color(
segment-theme.$unselected-ink-color,
$query
);
@include segment-theme.unselected-container-fill-color(
segment-theme.$unselected-container-fill-color,
$query
);

// Avoids double borders
@include feature-targeting.targets($feat-structure) {
border-right-width: 0;
}
}

@mixin _selected($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

@include segment-theme.selected-ink-color(
segment-theme.$selected-ink-color,
$query
);
@include segment-theme.selected-container-fill-color(
segment-theme.$selected-container-fill-color,
$query
);

// Avoids double borders
@include feature-targeting.targets($feat-structure) {
border-right-width: segment-theme.$border-width;
}
}

@mixin icon($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);
$feat-typography: feature-targeting.create-target($query, typography);

@include feature-targeting.targets($feat-structure) {
width: segment-theme.$icon-width;
}
@include feature-targeting.targets($feat-typography) {
font-size: segment-theme.$icon-font-size;
}
}

@mixin label($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

@include feature-targeting.targets($feat-structure) {
padding-left: segment-theme.$label-padding;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Theme: Variables, functions, and mixins required to theme component
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Core: Define complete styles to render component, including base and theme styles

@use '@material/feature-targeting';
@use './segmented-button-theme';

@mixin core-styles($query: feature-targeting.all()) {
.mdc-segmented-button {
$feat-structure: feature-targeting.create-target($query, structure);

@include feature-targeting.targets($feat-structure) {
display: inline-block;
// Removes spacing between segments
font-size: 0;
}
}
}
8 changes: 7 additions & 1 deletion packages/mdc-segmented-button/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,10 @@
// THE SOFTWARE.
//

// TODO: Add styles.
// CSS: Emit CSS required to style component

@use './segmented-button/segmented-button';
@use './segment/segment';

@include segmented-button.core-styles();
@include segment.core-styles();