@ebay/skin 16.4.0 → 16.5.0-0

package/dist/toggle-button/toggle-button.css

@@ -29,6 +29,9 @@
   outline-style: outset;
   outline-width: 2px;
 }
+.toggle-button * {
+  pointer-events: none;
+}
 .toggle-button[aria-pressed="true"] {
   background-color: var(--color-background-secondary);
   border: 1px solid var(--color-stroke-strong);
@@ -72,14 +75,17 @@
   margin-bottom: 4px;
   margin-top: 16px;
 }
-.toggle-button .toggle-button__content .toggle-button__title:only-child {
+.toggle-button__title:only-child {
+  margin-bottom: 16px;
+}
+.toggle-button .toggle-button__content:only-child .toggle-button__title:only-child {
   font-weight: bold;
   margin-bottom: auto;
   margin-top: auto;
   text-align: center;
   width: 100%;
 }
-.toggle-button:not([aria-pressed="true"]) .toggle-button__title:only-child {
+.toggle-button:not([aria-pressed="true"]) .toggle-button__content:only-child .toggle-button__title:only-child {
   font-weight: normal;
 }
 .toggle-button__subtitle {

package/dist/toggle-button-group/toggle-button-group.css

@@ -0,0 +1,88 @@
+.toggle-button-group {
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.toggle-button-group li {
+  display: inline-table;
+  margin-bottom: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  max-width: var(--toggle-button-width-max);
+  min-height: var(--toggle-button-height-min);
+  min-width: var(--toggle-button-width-min);
+}
+.toggle-button-group .toggle-button {
+  width: 100%;
+}
+/* Layout Themes */
+.toggle-button-group--list-layout li {
+  max-width: var(--toggle-button-list-width-max);
+  min-width: var(--toggle-button-list-width-min);
+}
+.toggle-button-group--list-layout .toggle-button {
+  justify-content: left;
+  max-width: var(--toggle-button-list-width-max);
+  min-width: var(--toggle-button-list-width-min);
+}
+.toggle-button-group--gallery-layout li {
+  max-width: var(--toggle-button-gallery-width-max);
+  min-width: var(--toggle-button-gallery-width-min);
+}
+.toggle-button-group--gallery-layout .toggle-button {
+  flex-direction: column;
+}
+.toggle-button-group--gallery-layout .toggle-button__image,
+.toggle-button-group--gallery-layout .toggle-button__icon {
+  margin-bottom: 0;
+  margin-right: 0;
+}
+.toggle-button-group--gallery-layout .toggle-button__icon ~ .toggle-button__content,
+.toggle-button-group--gallery-layout .toggle-button__image-container ~ .toggle-button__content {
+  align-self: flex-start;
+}
+.toggle-button-group--gallery-layout .toggle-button__icon,
+.toggle-button-group--gallery-layout .toggle-button__image-container {
+  margin-bottom: 0;
+  margin-right: 0;
+  text-align: left;
+}
+.toggle-button-group--gallery-layout .toggle-button__image-container {
+  padding-bottom: 60%;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+.toggle-button-group--gallery-layout .toggle-button__image {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+.toggle-button-group--gallery-layout .toggle-button__image-container img {
+  height: 100%;
+  max-height: 200px;
+  max-width: initial;
+}
+/* Columns */
+.toggle-button-group[data-columns="2"] li {
+  width: calc(100% / 2 - 11px);
+}
+.toggle-button-group[data-columns="3"] li {
+  width: calc(100% / 3 - 11px);
+}
+.toggle-button-group[data-columns="4"] li {
+  width: calc(100% / 4 - 11px);
+}
+.toggle-button-group[data-columns="5"] li {
+  width: calc(100% / 5 - 11px);
+}
+.toggle-button-group[data-columns="6"] li {
+  width: calc(100% / 6 - 11px);
+}

package/index.browser.json

@@ -56,6 +56,7 @@
     "require: ./textbox.js",
     "require: ./toast-dialog.js",
     "require: ./toggle-button.js",
+    "require: ./toggle-button-group.js",
     "require: ./tooltip.js",
     "require: ./tourtip.js",
     "require: ./typography.js",

package/index.css

@@ -54,6 +54,7 @@
 @import "./textbox.css";
 @import "./toast-dialog.css";
 @import "./toggle-button.css";
+@import "./toggle-button-group.css";
 @import "./tooltip.css";
 @import "./tourtip.css";
 @import "./typography.css";

package/index.js

@@ -54,6 +54,7 @@ require('./tabs.js');
 require('./textbox.js');
 require('./toast-dialog.js');
 require('./toggle-button.js');
+require('./toggle-button-group.js');
 require('./tooltip.js');
 require('./tourtip.js');
 require('./typography.js');

package/index.mjs

@@ -54,6 +54,7 @@ import './tabs.css';
 import './textbox.css';
 import './toast-dialog.css';
 import './toggle-button.css';
+import './toggle-button-group.css';
 import './tooltip.css';
 import './tourtip.css';
 import './typography.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.4.0",
+    "version": "16.5.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -65,7 +65,7 @@
         "@commitlint/cli": "^17.6.3",
         "@commitlint/config-conventional": "^17.6.3",
         "@ebay/browserslist-config": "^2.6.0",
-        "@percy/cli": "^1.24.1",
+        "@percy/cli": "^1.26.1",
         "@percy/storybook": "^4.3.6",
         "@storybook/html": "^7.0.12",
         "@storybook/html-webpack5": "^7.0.12",

package/scripts/generate-imports/config.json

@@ -50,6 +50,7 @@
         "section-notice": ["button"],
         "split-button": ["button", "menu-button"],
         "toast-dialog": ["icon-button"],
+        "toggle-button-group": ["toggle-button"],
         "tourtip": ["icon-button"]
     },
     "nested": {

package/src/less/bundles/skin-headless.less

@@ -56,6 +56,7 @@
 @import "../textbox/textbox.less";
 @import "../toast-dialog/toast-dialog.less";
 @import "../toggle-button/toggle-button.less";
+@import "../toggle-button-group/toggle-button-group.less";
 @import "../tooltip/tooltip.less";
 @import "../tourtip/tourtip.less";
 @import "../typography/typography.less";

package/src/less/field/field.less

@@ -34,6 +34,20 @@ div.field--table {
     display: table;
 }
 
+.field__description--group {
+    display: flex;
+    justify-content: end;
+}
+
+.field__description--group > :last-child {
+    margin-left: 5px;
+    text-align: right;
+}
+
+.field__description--group > :first-child {
+    flex: 1;
+}
+
 // ELEMENT CLASSES
 
 .field__label {
@@ -43,6 +57,8 @@ div.field--table {
 .field__description {
     .color-token(field-description-color, color-foreground-secondary);
     font-size: @font-size-small;
+    line-height: @spacing-200;
+    margin-top: @spacing-50;
 }
 
 .field__description--confirmation {
@@ -148,3 +164,10 @@ div.field__description {
     align-self: start;
     margin-top: 16px;
 }
+
+[dir="rtl"] {
+    .field__description--group > :last-child {
+        margin-right: 5px;
+        text-align: left;
+    }
+}

package/src/less/field/stories/helper-texts-stacked.stories.js

@@ -0,0 +1,114 @@
+export default { title: "Skin/Field/Helper Texts/Stacked" };
+
+export const characterMeterOnly = () => `
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-character-1-input">Field 1</label>
+    <span class="field__control textbox">
+        <input type="text" aria-describedby="field-character-1" class="textbox__control" id="field-character-1-input" aria-live="off" />
+    </span>
+    <div class="field__description field__description--group">
+        <span id="field-character-1">
+            0 of 140
+        </span>
+    </div>
+</span>
+`;
+
+export const descriptionCharacterMeter = () => `
+<span class="field ">
+    <label class="field__label field__label--stacked" for="field-character-1-input">Field 1</label>
+    <span class="field__control textbox">
+        <input type="text" aria-describedby="field-character-1-description field-character-1" class="textbox__control" id="field-character-1-input" aria-live="off" />
+    </span>
+
+    <div class="field__description field__description--group">
+        <span id="field-character-1-description">
+            Field description or error
+        </span>
+        <span id="field-character-1">
+            0 of 140
+        </span>
+    </div>
+</span>
+`;
+
+export const longDescriptionCharacterMeter = () => `
+<span class="field" style="width:200px">
+    <label class="field__label field__label--stacked" for="field-character-1-input">Field 1</label>
+    <span class="field__control textbox">
+        <input type="text" aria-describedby="field-character-1-description field-character-1" class="textbox__control" id="field-character-1-input" aria-live="off" />
+    </span>
+
+    <div class="field__description field__description--group">
+        <span id="field-character-1-description">
+            Field description or error which is long and should wrap to next line
+        </span>
+        <span id="field-character-1">
+            0 of 140
+        </span>
+    </div>
+</span>
+`;
+
+export const fluidDescriptionCharacterMeter = () => `
+<div class="field fluid">
+    <label class="field__label field__label--stacked" for="field-character-3-input">Field 1</label>
+    <div class="field__control textbox">
+        <input type="text" aria-describedby="field-character-3-description field-character-1" class="textbox__control textbox__control--fluid" id="field-character-3-input" aria-live="off" />
+    </div>
+    <div class="field__description field__description--group">
+        <span id="field-character-1-description">
+            Field description or error
+        </span>
+        <span id="field-character-1">
+            0 of 140
+        </span>
+    </div>
+</div>
+`;
+
+export const RTL = () => `
+<div dir="rtl">
+    <span class="field ">
+        <label class="field__label field__label--stacked" for="field-character-1-input">Field 1</label>
+        <span class="field__control textbox">
+            <input type="text" aria-describedby="field-character-1-description field-character-1" class="textbox__control" id="field-character-1-input" aria-live="off" />
+        </span>
+
+        <div class="field__description field__description--group">
+            <span id="field-character-1-description">
+                Field description or error
+            </span>
+            <span id="field-character-1">
+                0 / 140
+            </span>
+        </div>
+    </span>
+    <span class="field ">
+        <label class="field__label field__label--stacked" for="field-character-1-input">Field 1</label>
+        <span class="field__control textbox">
+            <input type="text" aria-describedby="field-character-1" class="textbox__control" id="field-character-1-input" aria-live="off"  />
+        </span>
+
+        <div class="field__description field__description--group">
+            <span id="field-character-1">
+                0 / 140
+            </span>
+        </div>
+    </span>
+    <div class="field fluid">
+        <label class="field__label field__label--stacked" for="field-character-3-input">Field 1</label>
+        <div class="field__control textbox">
+            <input type="text" aria-describedby="field-character-3-description field-character-1" class="textbox__control textbox__control--fluid" id="field-character-3-input" aria-live="off" />
+        </div>
+        <div class="field__description field__description--group">
+            <span id="field-character-1-description">
+                Field description or error
+            </span>
+            <span id="field-character-1">
+                0 of 140
+            </span>
+        </div>
+    </div>
+</div>
+`;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -25,6 +25,33 @@
     .dialog-footer-content();
 }
 
+.lightbox-dialog__image {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
+    height: 218px;
+    position: absolute;
+    width: 100%;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__window {
+    padding-bottom: @spacing-100;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__header > * {
+    margin-top: 218px;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__header {
+    margin: @spacing-300 @spacing-300 0;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__main,
+.lightbox-dialog--expressive .lightbox-dialog__footer {
+    padding: @spacing-200 @spacing-300;
+}
+
 // inherits from .icon-btn
 // Might need to see if icon-btn can support a small version
 button.icon-btn.lightbox-dialog__close {
@@ -37,6 +64,11 @@ button.icon-btn.lightbox-dialog__close {
     z-index: 1;
 }
 
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
+    align-self: self-start;
+    margin: 0;
+}
+
 .lightbox-dialog__title {
     &:not(:first-child) {
         margin-left: @spacing-200;
@@ -113,4 +145,14 @@ button.icon-btn.lightbox-dialog__close {
     .lightbox-dialog--wide .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-wide-max-width);
     }
+
+    .lightbox-dialog--wide .lightbox-dialog__image {
+        height: 256px;
+    }
+
+    .lightbox-dialog--wide.lightbox-dialog--expressive
+        .lightbox-dialog__header
+        > * {
+        margin-top: 256px;
+    }
 }

package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js

@@ -23,6 +23,30 @@ export const base = () => `
 </div>
 `;
 
+export const expressiveBase = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
+
 export const scrollingLightbox = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
@@ -84,7 +108,73 @@ export const scrollingLightbox = () => `
             <p><a href="http://www.ebay.com">www.ebay.com</a></p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
             <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
 
+export const expressiveScrolling = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
         </div>
     </div>
 </div>
@@ -188,3 +278,27 @@ export const wide = () => `
     </div>
 </div>
 `;
+
+export const expressiveWide = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide lightbox-dialog--expressive" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;

package/src/less/segmented-buttons/segmented-buttons.less

@@ -34,6 +34,7 @@
     background-color: transparent;
     border: none;
     border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
+    color: var(--color-foreground-on-primary);
     font-size: @font-size-regular;
     min-height: @button-height-regular - (@segmented-buttons-padding * 2);
     padding: @spacing-100 @spacing-200;

package/src/less/toggle-button/stories/gallery-layout.stories.js

@@ -28,6 +28,19 @@ export const longTitle = () => `
 </button>
 `;
 
+export const profileImageTitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image">
+            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+    </span>
+</button>
+`;
+
 export const profileImageTitleSubtitle = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
     <span class="toggle-button__image-container">

package/src/less/toggle-button/toggle-button.less

@@ -34,6 +34,10 @@
     }
 }
 
+.toggle-button * {
+    pointer-events: none;
+}
+
 .toggle-button[aria-pressed="true"] {
     background-color: var(--color-background-secondary);
     border: 1px solid var(--color-stroke-strong);
@@ -85,7 +89,13 @@
     margin-top: @spacing-200;
 }
 
-.toggle-button .toggle-button__content .toggle-button__title:only-child {
+.toggle-button__title:only-child {
+    margin-bottom: @spacing-200;
+}
+
+.toggle-button
+    .toggle-button__content:only-child
+    .toggle-button__title:only-child {
     font-weight: bold;
     margin-bottom: auto;
     margin-top: auto;
@@ -93,7 +103,9 @@
     width: 100%;
 }
 
-.toggle-button:not([aria-pressed="true"]) .toggle-button__title:only-child {
+.toggle-button:not([aria-pressed="true"])
+    .toggle-button__content:only-child
+    .toggle-button__title:only-child {
     font-weight: normal;
 }