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

Commit dd99c87

Browse files
sn-kaiercopybara-github
sn-kaier
authored and
copybara-github
committed
feat(touch-target): margin mixin now also allows custom property maps as arguments.
PiperOrigin-RevId: 492448536
1 parent f0a0bbc commit dd99c87

File tree

6 files changed

+78
-23
lines changed

6 files changed

+78
-23
lines changed

‎packages/mdc-button/_button-filled-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
@use '@material/theme/theme';
3131
@use './button-shared-theme';
3232

33-
$_custom-property-prefix: 'filled-button';
33+
$custom-property-prefix: 'filled-button';
3434

3535
$light-theme: (
3636
container-color: primary,
@@ -76,7 +76,7 @@ $light-theme: (
7676
$theme,
7777
$resolver: $resolver
7878
);
79-
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
79+
@include keys.declare-custom-properties($theme, $custom-property-prefix);
8080
}
8181

8282
@mixin theme-styles(
@@ -87,7 +87,7 @@ $light-theme: (
8787
@include theme.validate-theme($light-theme, $theme);
8888
$theme: keys.create-theme-properties(
8989
$theme,
90-
$prefix: $_custom-property-prefix
90+
$prefix: $custom-property-prefix
9191
);
9292
@include button-shared-theme.theme-styles($theme, $resolver, $query: $query);
9393
}

‎packages/mdc-button/_button-outlined-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
$outlined-border-width: 1px !default;
4141
$outline-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;
4242

43-
$_custom-property-prefix: 'outlined-button';
43+
$custom-property-prefix: 'outlined-button';
4444

4545
$light-theme: (
4646
container-height: button-shared-theme.$height,
@@ -84,7 +84,7 @@ $light-theme: (
8484
$theme,
8585
$resolver: $resolver
8686
);
87-
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
87+
@include keys.declare-custom-properties($theme, $custom-property-prefix);
8888
}
8989

9090
@mixin theme-styles(
@@ -95,7 +95,7 @@ $light-theme: (
9595
@include theme.validate-theme-styles($light-theme, $theme);
9696
$theme: keys.create-theme-properties(
9797
$theme,
98-
$prefix: $_custom-property-prefix
98+
$prefix: $custom-property-prefix
9999
);
100100
@include _theme($theme, $resolver, $query: $query);
101101
}

‎packages/mdc-button/_button-protected-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
@use '@material/tokens/resolvers';
2727
@use './button-shared-theme';
2828

29-
$_custom-property-prefix: 'protected-button';
29+
$custom-property-prefix: 'protected-button';
3030

3131
$light-theme: (
3232
container-color: primary,
@@ -72,7 +72,7 @@ $light-theme: (
7272
$theme,
7373
$resolver: $resolver
7474
);
75-
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
75+
@include keys.declare-custom-properties($theme, $custom-property-prefix);
7676
}
7777

7878
@mixin theme-styles(
@@ -84,7 +84,7 @@ $light-theme: (
8484

8585
$theme: keys.create-theme-properties(
8686
$theme,
87-
$prefix: $_custom-property-prefix
87+
$prefix: $custom-property-prefix
8888
);
8989
@include button-shared-theme.theme-styles($theme, $resolver, $query: $query);
9090
}

‎packages/mdc-button/_button-text-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
@use '@material/tokens/resolvers';
3131
@use './button-shared-theme';
3232

33-
$_custom-property-prefix: 'text-button';
33+
$custom-property-prefix: 'text-button';
3434

3535
$light-theme: (
3636
container-height: button-shared-theme.$height,
@@ -68,7 +68,7 @@ $light-theme: (
6868
$theme,
6969
$resolver: $resolver
7070
);
71-
@include keys.declare-custom-properties($theme, $_custom-property-prefix);
71+
@include keys.declare-custom-properties($theme, $custom-property-prefix);
7272
}
7373

7474
@mixin theme-styles(
@@ -79,7 +79,7 @@ $light-theme: (
7979
@include theme.validate-theme-styles($light-theme, $theme);
8080
$theme: keys.create-theme-properties(
8181
$theme,
82-
$prefix: $_custom-property-prefix
82+
$prefix: $custom-property-prefix
8383
);
8484
@include theme-styles-internal($theme, $resolver: $resolver, $query: $query);
8585
}

‎packages/mdc-touch-target/_touch-target.scss

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
@use '@material/base/mixins' as base-mixins;
2828
@use '@material/feature-targeting/feature-targeting';
2929
@use '@material/rtl/rtl';
30+
@use '@material/theme/theme';
31+
@use '@material/theme/keys';
32+
@use '@material/theme/custom-properties';
3033

3134
$height: 48px !default;
3235
$width: $height !default;
@@ -96,22 +99,73 @@ $width: $height !default;
9699
) {
97100
$feat-structure: feature-targeting.create-target($query, structure);
98101

99-
$vertical-margin-value: math.div($touch-target-height - $component-height, 2);
100-
101102
@include feature-targeting.targets($feat-structure) {
102-
margin-top: $vertical-margin-value;
103-
margin-bottom: $vertical-margin-value;
103+
@if keys.is-key($touch-target-height) or
104+
keys.is-key($component-height) or
105+
custom-properties.is-custom-prop($touch-target-height) or
106+
custom-properties.is-custom-prop($component-height)
107+
{
108+
// Custom properties
109+
@include theme.property(
110+
margin-top,
111+
'max((touch-target-height - component-height) / 2, 0px)',
112+
$replace: (
113+
component-height: $component-height,
114+
touch-target-height: $touch-target-height
115+
)
116+
);
117+
@include theme.property(
118+
margin-bottom,
119+
'max((touch-target-height - component-height) / 2, 0px)',
120+
$replace: (
121+
component-height: $component-height,
122+
touch-target-height: $touch-target-height
123+
)
124+
);
125+
} @else {
126+
// Static values
127+
$vertical-margin-value: math.div(
128+
$touch-target-height - $component-height,
129+
2
130+
);
131+
margin-top: $vertical-margin-value;
132+
margin-bottom: $vertical-margin-value;
133+
}
104134
}
105135

106136
@if $component-width {
107-
$horizontal-margin-value: math.div(
108-
$touch-target-width - $component-width,
109-
2
110-
);
111-
112137
@include feature-targeting.targets($feat-structure) {
113-
margin-right: $horizontal-margin-value;
114-
margin-left: $horizontal-margin-value;
138+
@if keys.is-key($touch-target-width) or
139+
keys.is-key($component-width) or
140+
custom-properties.is-custom-prop($touch-target-width) or
141+
custom-properties.is-custom-prop($component-width)
142+
{
143+
// Custom properties
144+
@include theme.property(
145+
margin-right,
146+
'max((touch-target-width - component-width) / 2, 0px)',
147+
$replace: (
148+
component-width: $component-width,
149+
touch-target-width: $touch-target-width
150+
)
151+
);
152+
@include theme.property(
153+
margin-left,
154+
'max((touch-target-width - component-width) / 2), 0px',
155+
$replace: (
156+
component-width: $component-width,
157+
touch-target-width: $touch-target-width
158+
)
159+
);
160+
} @else {
161+
// Static values
162+
$horizontal-margin-value: math.div(
163+
$touch-target-width - $component-width,
164+
2
165+
);
166+
margin-right: $horizontal-margin-value;
167+
margin-left: $horizontal-margin-value;
168+
}
115169
}
116170
}
117171
}

‎packages/mdc-touch-target/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@material/base": "^14.0.0",
2020
"@material/feature-targeting": "^14.0.0",
2121
"@material/rtl": "^14.0.0",
22+
"@material/theme": "^14.0.0",
2223
"tslib": "^2.1.0"
2324
},
2425
"publishConfig": {

0 commit comments

Comments
 (0)