Skip to content

Commit db908ca

Browse files
cdransfcdransf
committed
feat: add fixed height coachmark image variation
1 parent f23f1c8 commit db908ca

File tree

4 files changed

+111
-70
lines changed

4 files changed

+111
-70
lines changed

‎.changeset/nice-cows-shout.md

+4
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ This migrates the `coachmark` component to S2. Custom properties have been remap
1414
| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size |
1515
| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style |
1616
| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size |
17+
18+
## Additions
19+
20+
Adds `--spectrum-coachmark-media-fixed-height` for fixed `4:3` image variant and an accompanying `--mod-coachmark-media-fixed-height` mod. This variation has been added to the `coachmark` component story as a boolean control labeled as `Image fixed height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`.

‎components/coachmark/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ governing permissions and limitations under the License.
1818
--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
1919
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
2020

21+
--spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);
22+
2123
--spectrum-coachmark-border-size: var(--mod-popover-border-width);
2224
--spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
2325

@@ -92,6 +94,10 @@ governing permissions and limitations under the License.
9294
border-start-end-radius: inherit;
9395
}
9496

97+
.spectrum-CoachMark-image-wrapper--fixedHeight {
98+
block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
99+
}
100+
95101
.spectrum-CoachMark-image {
96102
display: block;
97103
inline-size: 100%;

‎components/coachmark/stories/coachmark.stories.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,21 @@ export default {
3737
},
3838
control: "boolean",
3939
},
40+
imageIsFixedHeight: {
41+
name: "Image fixed height",
42+
type: { name: "boolean" },
43+
table: {
44+
type: { summary: "boolean" },
45+
category: "Component",
46+
},
47+
},
4048
},
4149
args: {
4250
rootClass: "spectrum-CoachMark",
4351
hasActionMenu: true,
4452
hasPagination: true,
4553
hasImage: false,
54+
imageIsFixedHeight: false,
4655
},
4756
parameters: {
4857
actions: {
@@ -56,8 +65,8 @@ export default {
5665
},
5766
docs: {
5867
story: {
59-
height: "300px"
60-
}
68+
height: "300px",
69+
},
6170
},
6271
},
6372
};

‎components/coachmark/stories/template.js

+90-68
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const Template = ({
1717
hasActionMenu = false,
1818
hasPagination,
1919
hasImage,
20+
imageIsFixedHeight,
2021
isOpen = true,
2122
...globals
2223
}) => html`
@@ -40,74 +41,95 @@ export const Template = ({
4041
isOpen: true,
4142
content: [
4243
html`
43-
${hasImage ? html`
44-
<div class="${rootClass}-image-wrapper">
45-
<img class="${rootClass}-image" src="example-card-landscape.png" />
46-
</div>` : ""}
47-
<div class="spectrum-CoachMark-header">
48-
<div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
49-
<div class="spectrum-CoachMark-action-menu">
50-
${hasActionMenu ? ActionMenu({
51-
isOpen,
52-
popoverPosition: "right",
53-
popoverTestId: "popover-nested-2",
54-
popoverId: "popover-nested-2",
55-
popoverTriggerId: "trigger-nested-2",
56-
customStyles: {
57-
"margin-block-start": "30px",
58-
"margin-inline-start": "-32px"
59-
},
60-
iconName: "More",
61-
size: globals.scale === "large" ? "s" : "m",
62-
items: [
63-
{
64-
label: "Skip tour",
65-
},
66-
{
67-
label: "Reset tour",
68-
}
69-
],
70-
}) : ""}
71-
</div>
72-
</div>
73-
<div class="spectrum-CoachMark-content">
74-
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
75-
</div>
76-
<div class="${rootClass}-footer">
77-
${hasPagination ? html`<div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>` : ""}
78-
${ButtonGroup({
79-
customClasses: globals.scale === "large" ? [`${rootClass}-buttongroup--mobile`] : [`${rootClass}-buttongroup`],
80-
size: globals.scale === "large" ? "s" : "m",
81-
items: globals.scale === "large" ?
82-
[
83-
{
84-
variant: "secondary",
85-
treatment: "outline",
86-
hideLabel: true,
87-
iconName: "ChevronLeft75",
88-
},
89-
{
90-
variant: "primary",
91-
treatment: "outline",
92-
label: "Next",
93-
},
94-
]
95-
:
96-
[
97-
{
98-
variant: "secondary",
99-
treatment: "outline",
100-
label: "Previous",
101-
},
102-
{
103-
variant: "primary",
104-
treatment: "outline",
105-
label: "Next",
106-
},
107-
],
108-
})}
109-
</div>
110-
`
44+
${hasImage
45+
? html` <div
46+
class="${rootClass}-image-wrapper ${imageIsFixedHeight
47+
? `${rootClass}-image-wrapper--fixedHeight`
48+
: ""}"
49+
>
50+
<img
51+
class="${rootClass}-image"
52+
src="example-card-landscape.png"
53+
/>
54+
</div>`
55+
: ""}
56+
<div class="spectrum-CoachMark-header">
57+
<div class="spectrum-CoachMark-title">
58+
Try playing with a pixel brush
59+
</div>
60+
<div class="spectrum-CoachMark-action-menu">
61+
${hasActionMenu
62+
? ActionMenu({
63+
isOpen,
64+
popoverPosition: "right",
65+
popoverTestId: "popover-nested-2",
66+
popoverId: "popover-nested-2",
67+
popoverTriggerId: "trigger-nested-2",
68+
customStyles: {
69+
"margin-block-start": "30px",
70+
"margin-inline-start": "-32px",
71+
},
72+
iconName: "More",
73+
size: globals.scale === "large" ? "s" : "m",
74+
items: [
75+
{
76+
label: "Skip tour",
77+
},
78+
{
79+
label: "Reset tour",
80+
},
81+
],
82+
})
83+
: ""}
84+
</div>
85+
</div>
86+
<div class="spectrum-CoachMark-content">
87+
Pixel brushes use pixels to create brush strokes, just like in other
88+
design and drawing tools. Start drawing, and zoom in to see the
89+
pixels in each stroke.
90+
</div>
91+
<div class="${rootClass}-footer">
92+
${hasPagination
93+
? html`<div class="spectrum-CoachMark-step">
94+
<bdo dir="ltr">2 of 8</bdo>
95+
</div>`
96+
: ""}
97+
${ButtonGroup({
98+
customClasses:
99+
globals.scale === "large"
100+
? [`${rootClass}-buttongroup--mobile`]
101+
: [`${rootClass}-buttongroup`],
102+
size: globals.scale === "large" ? "s" : "m",
103+
items:
104+
globals.scale === "large"
105+
? [
106+
{
107+
variant: "secondary",
108+
treatment: "outline",
109+
hideLabel: true,
110+
iconName: "ChevronLeft75",
111+
},
112+
{
113+
variant: "primary",
114+
treatment: "outline",
115+
label: "Next",
116+
},
117+
]
118+
: [
119+
{
120+
variant: "secondary",
121+
treatment: "outline",
122+
label: "Previous",
123+
},
124+
{
125+
variant: "primary",
126+
treatment: "outline",
127+
label: "Next",
128+
},
129+
],
130+
})}
131+
</div>
132+
`,
111133
],
112134
})}
113135
</div>

0 commit comments

Comments
 (0)