Skip to content

Commit 34aa8f2

Browse files
jenndiazjenndiaz
committed
chore(coachmark): hard code new token values
1 parent 789dd86 commit 34aa8f2

File tree

4 files changed

+74
-42
lines changed

4 files changed

+74
-42
lines changed

‎components/buttongroup/index.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,7 @@ governing permissions and limitations under the License.
3838
.spectrum-ButtonGroup {
3939
display: flex;
4040
flex-wrap: wrap;
41-
gap: var(
42-
--mod-buttongroup-spacing-horizontal,
43-
var(--spectrum-buttongroup-spacing-horizontal)
44-
);
41+
gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
4542
justify-content: var(--mod-buttongroup-justify-content, normal);
4643

4744
.spectrum-ButtonGroup-item {

‎components/coachmark/index.css

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,15 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-CoachMark {
14-
--spectrum-coachmark-min-width: 296px; /* TODO: Replace with new token */
15-
--spectrum-coachmark-width: 296px; /* TODO: Replace with new token */
16-
--spectrum-coachmark-max-width: 380px; /* TODO: Replace with new token */
17-
18-
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
19-
--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
20-
2114
--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
2215

23-
--mod-popover-border-width: var(--spectrum-border-width-100);
24-
--mod-popover-corner-radius: var(--spectrum-corner-radius-100);
2516
--spectrum-coachmark-border-size: var(--mod-popover-border-width);
2617
--spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
2718

2819
--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
2920
--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
3021

3122
--spectrum-coachmark-title-color: var(--spectrum-heading-color);
32-
--spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
3323

3424
--spectrum-coachmark-title-font-family: var(--spectrum-heading-sans-serif-font-family-stack);
3525
--spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
@@ -38,17 +28,14 @@ governing permissions and limitations under the License.
3828
--spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height);
3929

4030
--spectrum-coachmark-content-font-color: var(--spectrum-body-color);
41-
--spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
31+
4232
--spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
4333
--spectrum-coachmark-content-font-family: var(--spectrum-body-sans-serif-font-family);
4434
--spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style);
4535
--spectrum-coachmark-content-line-height: var(--spectrum-body-line-height);
4636

47-
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimun-height);
48-
--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); /* THIS NEEDS A NEW TOKEN */
49-
5037
--spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
51-
--spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
38+
5239
--spectrum-coachmark-step-font-weight: var(--spectrum-body-medium-font-weight);
5340
--spectrum-coachmark-step-font-family: var(--spectrum-body-sans-serif-font-family);
5441
--spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style);
@@ -58,9 +45,11 @@ governing permissions and limitations under the License.
5845
--spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
5946

6047
--mod-buttongroup-justify-content: flex-end;
48+
--mod-popover-border-width: var(--spectrum-border-width-100);
49+
--mod-popover-corner-radius: var(--spectrum-corner-radius-100);
6150
--mod-popover-content-area-spacing-vertical: 0;
62-
/* --mod-button-edge-to-visual-only: 9px; */
63-
--mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
51+
--mod-button-edge-to-visual-only: 9px;
52+
6453

6554
--spectrum-coachmark-buttongroup-hidden: none;
6655
--spectrum-coachmark-buttongroup-displayed: flex;
@@ -69,12 +58,30 @@ governing permissions and limitations under the License.
6958
--spectrum-coachmark-buttongroup-mobile-hidden: none;
7059
--spectrum-coachmark-buttongroup-mobile-displayed: flex;
7160
--spectrum-coachmark-buttongroup-mobile-display: var(--spectrum-coachmark-buttongroup-mobile-hidden);
61+
62+
--spectrum-coachmark-menu-hidden: none;
63+
--spectrum-coachmark-menu-displayed: inline-block;
64+
--spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-displayed);
65+
66+
--spectrum-coachmark-menu-mobile-hidden: none;
67+
--spectrum-coachmark-menu-mobile-displayed: inline-block;
68+
--spectrum-coachmark-menu-mobile-display: var(--spectrum-coachmark-buttongroup-mobile-hidden);
69+
70+
--spectrum-coachmark-min-width: 296px; /* TODO: Replace with new token */
71+
--spectrum-coachmark-width: 296px; /* TODO: Replace with new token */
72+
--spectrum-coachmark-max-width: 380px; /* TODO: Replace with new token */
73+
--spectrum-coachmark-content-font-size: var(--spectrum-body-size-s);
74+
--spectrum-coachmark-step-font-size: var(--spectrum-body-size-s);
75+
--spectrum-coachmark-title-font-size: var(--spectrum-heading-size-xs);
76+
--spectrum-coachmark-media-height: 222px; /* THIS NEEDS A NEW TOKEN */
77+
--spectrum-coachmark-media-min-height: 166px;
78+
7279
}
7380

7481
.spectrum-CoachMark {
7582
position: relative;
7683
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
77-
max-inline-size: 380px; /* TODO: Replace with new token or modifier*/
84+
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
7885
inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
7986
}
8087

@@ -86,21 +93,50 @@ governing permissions and limitations under the License.
8693
display: var(--spectrum-coachmark-buttongroup-display);
8794
}
8895

96+
.spectrum-CoachMark-menu {
97+
display: var(--spectrum-coachmark-menu-display);
98+
}
99+
.spectrum-CoachMark-menu--mobile {
100+
display: var(--spectrum-coachmark-menu-mobile-display);
101+
}
102+
103+
89104
.spectrum--large {
105+
/* TODO: replaces these mods with using new tokens */
106+
--mod-coachmark-min-width: 216px;
107+
--mod-coachmark-width: 216px;
108+
--mod-coachmark-max-width: 248px;
109+
--mod-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
110+
--mod-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
111+
--mod-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
112+
--mod-coachmark-media-height: 162px;
113+
--mod-coachmark-media-min-height: 121px;
114+
--mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
115+
116+
.spectrum-CoachMark-buttongroup {
117+
--spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-hidden);
118+
display: var(--spectrum-coachmark-buttongroup-display);
119+
}
90120

91121
.spectrum-CoachMark-buttongroup--mobile {
92122
--spectrum-coachmark-buttongroup-mobile-display: var(--spectrum-coachmark-buttongroup-mobile-displayed);
93123
display: var(--spectrum-coachmark-buttongroup-mobile-display);
94124
}
95125

96-
.spectrum-CoachMark-buttongroup {
97-
--spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-hidden);
98-
display: var(--spectrum-coachmark-buttongroup-display);
126+
.spectrum-CoachMark-menu {
127+
--spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-hidden);
128+
display: var(--spectrum-coachmark-menu-display);
129+
}
130+
131+
.spectrum-CoachMark-menu--mobile {
132+
--spectrum-coachmark-menu-mobile-display: var(--spectrum-coachmark-menu-mobile-displayed);
133+
display: var(--spectrum-coachmark-menu-mobile-display);
99134
}
100135
}
101136

102137
.spectrum-CoachMark-image-wrapper {
103-
block-size: var(--spectrum-coachmark-media-height);
138+
block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height));
139+
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
104140
inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - (var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2));
105141
object-fit: cover;
106142
object-position: center;
@@ -129,7 +165,7 @@ governing permissions and limitations under the License.
129165
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));;
130166
display: flex;
131167
justify-content: space-between;
132-
align-items: flex-end;
168+
align-items: center;
133169
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
134170
}
135171

‎components/coachmark/metadata/coachmark.yml

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,19 @@ examples:
4646
<div class="spectrum-CoachMark-header">
4747
<div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
4848
<div class="spectrum-CoachMark-action-menu">
49-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-header-button is-selected">
49+
50+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-menu is-selected">
5051
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
5152
<use xlink:href="#spectrum-icon-18-More" />
5253
</svg>
5354
</button>
55+
56+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionButton--quiet spectrum-CoachMark-menu--mobile is-selected">
57+
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
58+
<use xlink:href="#spectrum-icon-18-More" />
59+
</svg>
60+
</button>
61+
5462
<br>
5563
<div class="spectrum-Popover spectrum-Popover--bottom is-open">
5664
<ul class="spectrum-Menu" role="menu">

‎yarn.lock

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2823,17 +2823,12 @@
28232823
resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
28242824
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
28252825

2826-
"@spectrum-css/actionbutton@^4.0.0-beta.0":
2827-
version "4.0.13"
2828-
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-4.0.13.tgz#5ff2f77f907b5c091ec0dca8c7cce5a6b2513c2c"
2829-
integrity sha512-KfxlqWKGyUsjOUDBOzCWE2nWU3xPuGfr0itTfjQY2ndlUpbqwjz3rEMM9o/0B5mJ4NvJ+1NXTxD+a+t8kA1cBQ==
2830-
2831-
"@spectrum-css/clearbutton@^2.0.0":
2832-
version "2.0.0"
2833-
resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-2.0.0.tgz#ad638dd4bd021f42c0b020ae024f487aa64198ca"
2834-
integrity sha512-hdJFgBVnzRPe9jne5iaGE6NFuynUpwFuNtKRB4LJ1Yt0IqDK+bXhdak9NxMnvHEFjUr4NGDdBoXFUiBHPYYlSQ==
2826+
"@spectrum-css/actionmenu@4.0.38":
2827+
version "4.0.38"
2828+
resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-4.0.38.tgz#fc89340a956422ce7898a7183394a2fc1741d85d"
2829+
integrity sha512-xhnTHQOV55Cw+u+P5SZwfn4wAewLCKaVlHrZgVzvBNwCr8IrQoWvwG2BcDiLKbFsUjeGntwtm3q3I8nzYAj0iw==
28352830

2836-
"@spectrum-css/menu@^4.0.50":
2831+
"@spectrum-css/menu@^4.0.41", "@spectrum-css/menu@^4.0.50":
28372832
version "4.0.50"
28382833
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-4.0.50.tgz#d72467542b0cab858062c6fd5cb2950e8bbb0bc4"
28392834
integrity sha512-CBg8mUe4BFR0pKsMLWkAQW9/7tOp1V9QQkQzc8ZnT3Ayz5uFGy9saEErN5mSWxf2+22Ab5UftMU2uzgFo762eA==
@@ -2842,10 +2837,6 @@
28422837
version "3.0.34"
28432838
resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-3.0.34.tgz#987c639a281f0a54e72695cf38127faa60b9fcce"
28442839
integrity sha512-D8cfc9nvGNiLlY/y6TsgyZpj6zdGMh2ENUQi846DYS6ONRtDh9M2xoigpRcbIXc6Cm8kgCiZcTFsk07B/TT+pg==
2845-
"@spectrum-css/actionmenu@4.0.38":
2846-
version "4.0.38"
2847-
resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-4.0.38.tgz#fc89340a956422ce7898a7183394a2fc1741d85d"
2848-
integrity sha512-xhnTHQOV55Cw+u+P5SZwfn4wAewLCKaVlHrZgVzvBNwCr8IrQoWvwG2BcDiLKbFsUjeGntwtm3q3I8nzYAj0iw==
28492840

28502841
"@spectrum-css/thumbnail@^2.0.34":
28512842
version "2.0.34"

0 commit comments

Comments
 (0)