Date: Tue, 17 Dec 2024 11:46:28 -0800
Subject: [PATCH] feat: add fixed height coachmark image variation
---
.changeset/nice-cows-shout.md | 4 +
components/coachmark/index.css | 6 +
.../coachmark/stories/coachmark.stories.js | 13 +-
components/coachmark/stories/template.js | 158 ++++++++++--------
4 files changed, 111 insertions(+), 70 deletions(-)
diff --git a/.changeset/nice-cows-shout.md b/.changeset/nice-cows-shout.md
index 08a57ef1eb8..a4dcb466599 100644
--- a/.changeset/nice-cows-shout.md
+++ b/.changeset/nice-cows-shout.md
@@ -14,3 +14,7 @@ This migrates the `coachmark` component to S2. Custom properties have been remap
| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size |
| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style |
| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size |
+
+## Additions
+
+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`.
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index 9eeb7c0e5ff..bf16bcce80a 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -18,6 +18,8 @@ governing permissions and limitations under the License.
--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
+ --spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);
+
--spectrum-coachmark-border-size: var(--mod-popover-border-width);
--spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
@@ -92,6 +94,10 @@ governing permissions and limitations under the License.
border-start-end-radius: inherit;
}
+.spectrum-CoachMark-image-wrapper--fixedHeight {
+ block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
+}
+
.spectrum-CoachMark-image {
display: block;
inline-size: 100%;
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index afbd5690c9e..7aebea79532 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -37,12 +37,21 @@ export default {
},
control: "boolean",
},
+ imageIsFixedHeight: {
+ name: "Image fixed height",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ },
},
args: {
rootClass: "spectrum-CoachMark",
hasActionMenu: true,
hasPagination: true,
hasImage: false,
+ imageIsFixedHeight: false,
},
parameters: {
actions: {
@@ -56,8 +65,8 @@ export default {
},
docs: {
story: {
- height: "300px"
- }
+ height: "300px",
+ },
},
},
};
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
index 6a2bf2c7d39..a81c61a07d4 100644
--- a/components/coachmark/stories/template.js
+++ b/components/coachmark/stories/template.js
@@ -17,6 +17,7 @@ export const Template = ({
hasActionMenu = false,
hasPagination,
hasImage,
+ imageIsFixedHeight,
isOpen = true,
...globals
}) => html`
@@ -40,74 +41,95 @@ export const Template = ({
isOpen: true,
content: [
html`
- ${hasImage ? html`
-
-

-
` : ""}
-
-
- 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.
-
-
- `
+ ${hasImage
+ ? html`
+

+
`
+ : ""}
+
+
+ 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.
+
+
+ `,
],
})}