Merge pull request #2102 from eBay/16.5.0

v16.5.0

dist/field/field.css

@@ -20,12 +20,25 @@ span.field--table {
 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;
+}
 .field__label {
   margin-right: 8px;
 }
 .field__description {
   color: var(--field-description-color, var(--color-foreground-secondary));
   font-size: 0.75rem;
+  line-height: 16px;
+  margin-top: 4px;
 }
 .field__description--confirmation {
   color: var(--field-description-confirmation-color, var(--color-foreground-confirmation));
@@ -101,3 +114,7 @@ div.field__description {
   align-self: start;
   margin-top: 16px;
 }
+[dir="rtl"] .field__description--group > :last-child {
+  margin-right: 5px;
+  text-align: left;
+}

dist/lightbox-dialog/lightbox-dialog.css

@@ -80,6 +80,28 @@
 .lightbox-dialog__footer > :not(:first-child) {
   margin-top: 16px;
 }
+.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: 8px;
+}
+.lightbox-dialog--expressive .lightbox-dialog__header > * {
+  margin-top: 218px;
+}
+.lightbox-dialog--expressive .lightbox-dialog__header {
+  margin: 24px 24px 0;
+}
+.lightbox-dialog--expressive .lightbox-dialog__main,
+.lightbox-dialog--expressive .lightbox-dialog__footer {
+  padding: 16px 24px;
+}
 button.icon-btn.lightbox-dialog__close {
   align-self: center;
   border: 0;
@@ -89,6 +111,10 @@ button.icon-btn.lightbox-dialog__close {
   width: 32px;
   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: 16px;
 }
@@ -160,4 +186,10 @@ 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;
+  }
 }

dist/segmented-buttons/segmented-buttons.css

@@ -22,6 +22,7 @@
   background-color: transparent;
   border: none;
   border-radius: var(--btn-border-radius, calc(40px / 2));
+  color: var(--color-foreground-on-primary);
   font-size: 0.875rem;
   min-height: 32px;
   padding: 8px 16px;

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);
+}

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 {

docs/_config.yml

@@ -9,4 +9,4 @@ defaults:
       path: "" # an empty string here means all files in the project
     values:
       cdn_path: https://ir.ebaystatic.com/cr/v/c1/skin
-      version: 16.4.0
+      version: 16.5.0-0

docs/_data/modules.yaml

@@ -58,6 +58,7 @@ list:
   - textbox
   - toast-dialog
   - toggle-button
+  - toggle-button-group
   - tokens
   - tooltip
   - tourtip

docs/_includes/avatar.html

@@ -23,14 +23,14 @@ <h3 id="avatar-signed-out-no-image">Signed in - with profile pic</h3>
     <div class="demo">
         <div class="demo__inner">
             <div class="avatar" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
         </div>
     </div>
 
     {% highlight html %}
 <div class="avatar" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
     {% endhighlight %}
 
@@ -116,50 +116,50 @@ <h3 id="avatar-signed-out-no-image">Various sizes</h3>
     <div class="demo">
         <div class="demo__inner">
             <div class="avatar avatar--32" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--40" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--48" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--56" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--64" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--96" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
             <div class="avatar avatar--128" role="img" aria-label="Signed-in as Doggy">
-                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+                <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
             </div>
         </div>
     </div>
 
     {% highlight html %}
 <div class="avatar avatar--32" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--40" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--48" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--56" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--64" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--96" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
 <div class="avatar avatar--128" role="img" aria-label="Signed-in as Doggy">
-    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png" alt="profile pic"/>
+    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg" alt="profile pic"/>
 </div>
     {% endhighlight %}
 </div>