add bottom border by default instead of an API

cloudscape-design · Jan 20, 2025 · 7a3f008 · 7a3f008
1 parent 9602e6c
commit 7a3f008
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 29 deletions.
diff --git a/pages/top-navigation/screenshot.page.tsx b/pages/top-navigation/screenshot.page.tsx
@@ -187,7 +187,7 @@ export default function TopNavigationPage() {
               i18nStrings={I18N_STRINGS}
               identity={{
                 href: '#',
-                title: 'Title with an href and bottom border',
+                title: 'Title with an href',
               }}
               utilities={[
                 {
@@ -235,7 +235,6 @@ export default function TopNavigationPage() {
                   items: profileActions,
                 },
               ]}
-              showBottomBorder={true}
             />
           </section>
         ))}

diff --git a/pages/top-navigation/simple.page.tsx b/pages/top-navigation/simple.page.tsx
@@ -55,16 +55,6 @@ export default function TopNavigationPage() {
         }}
       />
       <br />
-      <TopNavigation
-        i18nStrings={I18N_STRINGS}
-        identity={{
-          href: '#',
-          logo: { src: tallLogo, alt: 'Only logo, no title' },
-          title: 'Tall logo, resized to fit, with bottom border',
-        }}
-        showBottomBorder={true}
-      />
-      <br />
       <TopNavigation
         i18nStrings={I18N_STRINGS}
         identity={{

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -18595,12 +18595,6 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "optional": false,
       "type": "TopNavigationProps.Identity",
     },
-    {
-      "description": "Determines whether to show a border at the bottom of the top navigation.",
-      "name": "showBottomBorder",
-      "optional": true,
-      "type": "boolean",
-    },
     {
       "defaultValue": "[]",
       "description": "A list of utility navigation elements.

diff --git a/src/top-navigation/interfaces.ts b/src/top-navigation/interfaces.ts
@@ -22,11 +22,6 @@ export interface TopNavigationProps extends BaseComponentProps {
    */
   search?: React.ReactNode;
 
-  /**
-   * Determines whether to show a border at the bottom of the top navigation.
-   */
-  showBottomBorder?: boolean;
-
   /**
    * A list of utility navigation elements.
    * The supported utility types are: `button` and `menu-dropdown`.

diff --git a/src/top-navigation/internal.tsx b/src/top-navigation/internal.tsx
@@ -30,7 +30,6 @@ export default function InternalTopNavigation({
   i18nStrings,
   utilities,
   search,
-  showBottomBorder,
   ...restProps
 }: InternalTopNavigationProps) {
   checkSafeUrl('TopNavigation', identity.href);
@@ -101,7 +100,6 @@ export default function InternalTopNavigation({
           [styles.hidden]: isVirtual,
           [styles.narrow]: isNarrowViewport,
           [styles.medium]: isMediumViewport,
-          [styles['with-bottom-border']]: showBottomBorder,
         })}
       >
         <div className={styles['padding-box']}>

diff --git a/src/top-navigation/styles.scss b/src/top-navigation/styles.scss
@@ -10,6 +10,7 @@
 .top-navigation {
   @include styles.styles-reset;
   background: awsui.$color-background-container-content;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 
   > .padding-box {
     display: flex;
@@ -35,10 +36,6 @@
   &.narrow > .padding-box {
     block-size: awsui.$space-xxxl;
   }
-
-  &.with-bottom-border {
-    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  }
 }
 
 .virtual {