@ebay/skin 19.20.0 → 19.20.1

package/dist/bundles/skin-default.css

@@ -5882,11 +5882,11 @@ span.infotip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .infotip__mask,.infotip__overlay{
   background-color:var(--infotip-background-color, var(--color-background-elevated));
@@ -6004,6 +6004,7 @@ span.infotip__mask{
 @media (min-width:512px){
   .infotip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .inline-notice{
@@ -11637,11 +11638,11 @@ span.tooltip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tooltip__mask,.tooltip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-50));
@@ -11759,6 +11760,7 @@ button.tooltip__close{
 @media (min-width:512px){
   .tooltip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .tourtip{
@@ -11772,11 +11774,11 @@ span.tourtip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tourtip__mask,.tourtip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-100));
@@ -11930,6 +11932,7 @@ span.tourtip__mask{
 @media (min-width:512px){
   .tourtip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .giant-text-3{

package/dist/bundles/skin-full.css

@@ -6096,11 +6096,11 @@ span.infotip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .infotip__mask,.infotip__overlay{
   background-color:var(--infotip-background-color, var(--color-background-elevated));
@@ -6218,6 +6218,7 @@ span.infotip__mask{
 @media (min-width:512px){
   .infotip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .inline-notice{
@@ -11851,11 +11852,11 @@ span.tooltip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tooltip__mask,.tooltip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-50));
@@ -11973,6 +11974,7 @@ button.tooltip__close{
 @media (min-width:512px){
   .tooltip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .tourtip{
@@ -11986,11 +11988,11 @@ span.tourtip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tourtip__mask,.tourtip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-100));
@@ -12144,6 +12146,7 @@ span.tourtip__mask{
 @media (min-width:512px){
   .tourtip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .giant-text-3{

package/dist/bundles/skin-headless.css

@@ -5242,11 +5242,11 @@ span.infotip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .infotip__mask,.infotip__overlay{
   background-color:var(--infotip-background-color, var(--color-background-elevated));
@@ -5364,6 +5364,7 @@ span.infotip__mask{
 @media (min-width:512px){
   .infotip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .inline-notice{
@@ -10997,11 +10998,11 @@ span.tooltip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tooltip__mask,.tooltip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-50));
@@ -11119,6 +11120,7 @@ button.tooltip__close{
 @media (min-width:512px){
   .tooltip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .tourtip{
@@ -11132,11 +11134,11 @@ span.tourtip{
   display:none;
   font-size:14px;
   left:0;
-  max-width:344px;
+  min-width:280px;
   position:absolute;
   top:0;
   transform:scaleX(1);
-  width:max-content;
+  width:fit-content;
 }
 .tourtip__mask,.tourtip__overlay{
   border-radius:var(--bubble-border-radius, var(--border-radius-100));
@@ -11290,6 +11292,7 @@ span.tourtip__mask{
 @media (min-width:512px){
   .tourtip__overlay{
     max-width:400px;
+    width:max-content;
   }
 }
 .giant-text-3{

package/dist/infotip/infotip.css

@@ -12,11 +12,11 @@ span.infotip {
     display: none;
     font-size: 14px;
     left: 0;
-    max-width: 344px;
+    min-width: 280px;
     position: absolute;
     top: 0;
     transform: scaleX(1);
-    width: max-content;
+    width: fit-content;
 }
 .infotip__mask,
 .infotip__overlay {
@@ -143,5 +143,6 @@ button.infotip__close {
 @media (min-width: 512px) {
     .infotip__overlay {
         max-width: 400px;
+        width: max-content;
     }
 }

package/dist/tooltip/tooltip.css

@@ -12,11 +12,11 @@ span.tooltip {
     display: none;
     font-size: 14px;
     left: 0;
-    max-width: 344px;
+    min-width: 280px;
     position: absolute;
     top: 0;
     transform: scaleX(1);
-    width: max-content;
+    width: fit-content;
 }
 .tooltip__mask,
 .tooltip__overlay {
@@ -143,5 +143,6 @@ button.tooltip__close {
 @media (min-width: 512px) {
     .tooltip__overlay {
         max-width: 400px;
+        width: max-content;
     }
 }

package/dist/tourtip/tourtip.css

@@ -12,11 +12,11 @@ span.tourtip {
     display: none;
     font-size: 14px;
     left: 0;
-    max-width: 344px;
+    min-width: 280px;
     position: absolute;
     top: 0;
     transform: scaleX(1);
-    width: max-content;
+    width: fit-content;
 }
 .tourtip__mask,
 .tourtip__overlay {
@@ -185,5 +185,6 @@ span.tourtip__heading {
 @media (min-width: 512px) {
     .tourtip__overlay {
         max-width: 400px;
+        width: max-content;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.20.0",
+    "version": "19.20.1",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -37,7 +37,6 @@
         "build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
         "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
         "build:icons": "tsx scripts genSVG && prettier ../../src/data/icons.json --write",
-        "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
         "bundle": "sass src/sass:dist src/tokens:dist/tokens --no-source-map -I \"../../node_modules\"",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
@@ -58,12 +57,10 @@
         "preview": "marko-run preview",
         "postpublish": "tsx scripts clean",
         "release": "npm run build",
-        "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
-        "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
-        "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
-        "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
-        "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
+        "snapshots": "percy storybook:start --include \"$(echo $STORIES)\"",
+        "snapshots:all": "percy storybook:start --include '.*'",
+        "snapshots:all:dry": "percy storybook:start --dry-run --include '.*'",
+        "snapshots:dry": "percy storybook:start --dry-run --include \"$(echo $STORIES)\"",
         "start": "marko-run",
         "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook --no-open",
         "test": "npm run build",

package/gulpfile.js

@@ -1,34 +0,0 @@
-var child_process = require("child_process");
-var yargs = require("yargs");
-
-async function runSnapshots(storiesList, isDryRun) {
-    const stories =
-        yargs.argv.stories === undefined ? storiesList : yargs.argv.stories;
-    const aStories = stories.split(",");
-    const storiesReg = aStories.join("|");
-    const storiesRX = `^\\bSkin/\(?:${storiesReg})\\b`;
-    const storiesRXString = "\\bSkin/\\(?:" + storiesReg + ")\\b";
-    const dryRun = yargs.argv.dry === undefined ? isDryRun : yargs.argv.dry;
-    const percyExecutable = dryRun
-        ? "snapshots:execute:dry"
-        : "snapshots:execute";
-
-    console.log(`
-************************************************************
-Running Percy Snapshot(s)...
-Snapshot(s):         ${stories}
-Percy Stories Regex: ${storiesRXString}
-Percy Dry Run:       ${dryRun}
-Running Snapshot(s)...
-************************************************************
-	`);
-
-    return child_process
-        .spawn("npm", ["run", percyExecutable, storiesRX], { stdio: "inherit" })
-        .on("close", function () {
-            console.log("\nCompleted\n\n");
-        });
-}
-
-// public tasks
-exports.runSnapshots = runSnapshots;