feat: add no-content-padding

Author: SpyZzey

src/internal/components/selectable-item/index.tsx

@@ -29,6 +29,7 @@ const SelectableItem = (
     isSelectAll,
     virtualPosition,
     padBottom,
+    disableContentPadding = false,
     isNextSelected,
     isPreviousSelected,
     useInteractiveGroups,
@@ -58,6 +59,7 @@ const SelectableItem = (
     [styles.disabled]: disabled,
     [styles.virtual]: virtualPosition !== undefined && !sticky,
     [styles['pad-bottom']]: padBottom,
+    [styles['no-content-padding']]: disableContentPadding,
     [styles['next-item-selected']]: isNextSelected,
     [styles['previous-item-selected']]: isPreviousSelected,
     [styles.interactiveGroups]: useInteractiveGroups,

src/internal/components/selectable-item/interfaces.ts

@@ -15,6 +15,7 @@ export type SelectableItemProps = BaseComponentProps & {
   isSelectAll?: boolean;
   virtualPosition?: number;
   padBottom?: boolean;
+  disableContentPadding?: boolean;
   isPreviousSelected?: boolean;
   isNextSelected?: boolean;
   useInteractiveGroups?: boolean;

src/internal/components/selectable-item/styles.scss

@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable no-descending-specificity */
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
@@ -26,19 +27,25 @@
   border-inline-end-width: 0;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
-  padding-block: 0;
-  padding-inline: 0;
+  padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
+  padding-inline: awsui.$border-item-width;
 
   > .option-content {
-    padding-block: styles.$option-padding-with-border-placeholder-vertical;
-    padding-inline: calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
+    padding-block: styles.$option-padding-vertical;
+    padding-inline: styles.$control-padding-horizontal;
   }
 
   &.pad-bottom {
-    padding-block-end: 0;
+    padding-block-end: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
     border-block-end-color: transparent;
     > .option-content {
-      padding-block-end: calc(#{styles.$option-padding-with-border-placeholder-vertical} + #{awsui.$space-xxxs});
+      padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
+    }
+  }
+  &.no-content-padding {
+    > .option-content {
+      padding-block: 0;
+      padding-inline: 0;
     }
   }
 
@@ -55,6 +62,12 @@
     > .option-content {
       padding-inline-start: awsui.$space-xxl;
     }
+    &.no-content-padding {
+      > .option-content {
+        padding-block: 0;
+        padding-inline: 0;
+      }
+    }
   }
   &.highlighted,
   &.selected {
@@ -76,13 +89,25 @@
       > .option-content {
         padding-inline-start: awsui.$space-xxl;
       }
+      &.no-content-padding {
+        > .option-content {
+          padding-block: 0;
+          padding-inline: 0;
+        }
+      }
     }
     &.pad-bottom {
       padding-block-end: 0;
       > .option-content {
         padding-block-end: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
       }
     }
+    &.no-content-padding {
+      > .option-content {
+        padding-block: 0;
+        padding-inline: 0;
+      }
+    }
   }
 
   &.highlighted {
@@ -148,6 +173,12 @@
         padding-block: awsui.$space-xs;
         padding-inline: awsui.$space-xs;
       }
+      &.no-content-padding {
+        > .option-content {
+          padding-block: 0;
+          padding-inline: 0;
+        }
+      }
     }
     &.interactiveGroups {
       padding-block: 0;
@@ -156,6 +187,12 @@
         padding-block: styles.$group-option-padding-with-border-placeholder-vertical;
         padding-inline: styles.$control-padding-horizontal;
       }
+      &.no-content-padding {
+        > .option-content {
+          padding-block: 0;
+          padding-inline: 0;
+        }
+      }
       &.highlighted {
         color: awsui.$color-text-dropdown-item-highlighted;
       }
@@ -166,6 +203,12 @@
         > .option-content {
           padding-block: styles.$group-option-padding-vertical;
         }
+        &.no-content-padding {
+          > .option-content {
+            padding-block: 0;
+            padding-inline: 0;
+          }
+        }
       }
     }
   }