fix: adjust menu item selectable padding again

adobe · Aug 17, 2021 · 034a2df · 034a2df
1 parent 1b1742b
commit 034a2df
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/components/menu/index.css b/components/menu/index.css
@@ -33,9 +33,10 @@ governing permissions and limitations under the License.
   );
 
   --spectrum-listitem-texticon-selectable-padding-right: calc(
-    var(--spectrum-global-dimension-size-100) +
       var(--spectrum-listitem-texticon-ui-icon-width) +
-      var(--spectrum-listitem-texticon-icon-gap)
+      var(--spectrum-listitem-texticon-ui-icon-gap) +
+      var(--spectrum-listitem-texticon-padding-right) -
+      var(--spectrum-popover-border-size)
   );
 
   --spectrum-listitem-texticon-icon-margin-top: var(
@@ -78,9 +79,7 @@ governing permissions and limitations under the License.
 
   &.is-selectable {
     .spectrum-Menu-item {
-      padding-inline-end: var(
-        --spectrum-listitem-texticon-selectable-padding-right
-      );
+      padding-inline-end: var(--spectrum-listitem-texticon-selectable-padding-right);
 
       &.is-selected {
         padding-inline-end: calc(
@@ -106,7 +105,7 @@ governing permissions and limitations under the License.
   box-sizing: border-box;
 
   padding: var(--spectrum-listitem-texticon-padding-y)
-    calc(var(--spectrum-listitem-texticon-padding-right) + var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) - 2px)
+    var(--spectrum-listitem-texticon-padding-right)
     var(--spectrum-listitem-texticon-padding-y)
     var(--spectrum-listitem-texticon-padding-left);
 
@@ -183,7 +182,7 @@ governing permissions and limitations under the License.
 .spectrum-Menu-checkmark,
 .spectrum-Menu-chevron {
   flex-grow: 0;
-  margin-inline-start: var(--spectrum-listitem-texticon-icon-gap);
+  padding-inline-start: var(--spectrum-listitem-texticon-icon-gap);
   margin-block-start: calc(var(--spectrum-listitem-texticon-ui-icon-margin-top) - var(--spectrum-listitem-texticon-padding-y) + 1px);
 }
 

diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
@@ -68,7 +68,7 @@ examples:
           </li>
         </ul>
 
-        <ul class="spectrum-Menu" role="listbox">
+        <ul class="spectrum-Menu is-selectable" role="listbox">
           <li role="presentation">
             <span class="spectrum-Menu-sectionHeading" id="menu-heading-sf" aria-hidden="true">San Francisco</span>
             <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-sf">