@cloudscape-design/components-themeable 3.0.0

package/internal/scss/app-layout/visual-refresh/layout.scss

@@ -0,0 +1,198 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+/*
+  The first and last column definitions have two responsibilities.
+  If Navigation and/or Tools exist then that will determine the width of
+  the first and last columns, respectively, and the content in these drawers
+  will create horizontal space from the center column content. However, if the
+  navigationHide and/or toolsHide properties have been set then the first
+  and last column width will default to the minimum content gap properties to
+  create the necessary visual space around the main content.
+  
+  The minimum content width property is set to zero and applied under all
+  circumstances regardless of whether the minContentWidth property is
+  explicitly set in script.
+  */
+.layout {
+  #{custom-props.$contentGapLeft}: 0px;
+  #{custom-props.$contentGapRight}: 0px;
+  #{custom-props.$contentHeight}: calc(100vh - var(#{custom-props.$headerHeight}) - var(#{custom-props.$footerHeight}));
+  #{custom-props.$defaultMaxContentWidth}: 1280px;
+  #{custom-props.$defaultMinContentWidth}: 0px;
+  #{custom-props.$footerHeight}: 0px;
+  #{custom-props.$headerHeight}: 0px;
+  #{custom-props.$layoutWidth}: 0px;
+  #{custom-props.$mainOffsetLeft}: 0px;
+  #{custom-props.$maxContentWidth}: 0px;
+  #{custom-props.$minContentWidth}: 280px;
+  #{custom-props.$notificationsHeight}: 0px;
+  #{custom-props.$offsetTop}: 0px;
+  #{custom-props.$offsetTopWithNotifications}: 0px;
+  #{custom-props.$overlapHeight}: #{awsui.$space-dark-header-overlap-distance};
+  background-color: awsui.$color-background-layout-main;
+  display: grid;
+  grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) 1fr;
+  grid-template-columns:
+    min-content
+    minmax(var(#{custom-props.$contentGapLeft}), 1fr)
+    minmax(var(#{custom-props.$defaultMinContentWidth}), var(#{custom-props.$defaultMaxContentWidth}))
+    minmax(var(#{custom-props.$contentGapRight}), 1fr)
+    min-content;
+  position: relative;
+
+  // Add unified max-width for AppLayout content based on breakpoints.
+  &:not(.has-max-content-width) {
+    @include styles.media-breakpoint-up(styles.$breakpoint-large) {
+      #{custom-props.$defaultMaxContentWidth}: 1280px;
+    }
+    @include styles.media-breakpoint-up(styles.$breakpoint-x-large) {
+      #{custom-props.$defaultMaxContentWidth}: 1440px;
+    }
+    @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
+      #{custom-props.$defaultMaxContentWidth}: 1620px;
+    }
+  }
+
+  /*
+  Only use the max content width custom property for the middle column definition
+  if the maxContentWidth property has been explicitly set to a non-zero value and
+  subsequently set the has-max-content-width data attribute to true.
+  */
+  &.has-max-content-width {
+    #{custom-props.$defaultMaxContentWidth}: var(#{custom-props.$maxContentWidth});
+  }
+
+  /*
+  Warning! This is a hack! We are implementing a short term fix to prevent the 
+  tools drawer from potentially getting pushed off screen. Currently there is no 
+  protection against a navigationWidth, minContentWidth, and toolsWidth that are 
+  in excess ove the available space in the viewport. To accomodate this we remove 
+  the minContentWidth and set it to zero in small viewports and below until the 
+  isMobile breakpoint sets the drawers to overlay at 100vw.
+  */
+  @include styles.media-breakpoint-up(styles.$breakpoint-small) {
+    #{custom-props.$defaultMinContentWidth}: var(#{custom-props.$minContentWidth}, 280px);
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-small) {
+    #{custom-props.$defaultMinContentWidth}: 0px;
+  }
+
+  /*
+  Override the dark header overlap height property if isOverlapDisabled is true.
+  The is computed state from props that can be found in the AppLayout context.
+  */
+  &.is-overlap-disabled {
+    #{custom-props.$overlapHeight}: 0;
+  }
+
+  /*
+  If disableBodyScroll is false (this is the overwhelming majority
+  of use cases and the default scenario) then the scrollable element
+  will be the document body which is a parent of the AppLayout component.
+  The Layout should have a minimum but not fixed content height set to the
+  viewport height less the header and footer height set by the resize
+  observers in the component. The offset top value for components
+  with position: sticky (AppBar, Navigation, Notifications, Tools) will
+  be set to the header height value. The offset top value for AppLayout
+  contentMain children with position: sticky will be the combined value of the
+  header and notifications height in addition to the notifications top margin
+  and some additional vertical space for aesthetics.
+  */
+  &:not(.disable-body-scroll) {
+    #{custom-props.$offsetTop}: var(#{custom-props.$headerHeight});
+    min-height: var(#{custom-props.$contentHeight});
+  }
+
+  &:not(.disable-body-scroll):not(.has-sticky-notifications) {
+    #{custom-props.$offsetTopWithNotifications}: var(#{custom-props.$headerHeight});
+  }
+
+  // #{awsui.$space-xs} token needs to align with the top margin in the notifications CSS
+  &:not(.disable-body-scroll).has-sticky-notifications {
+    #{custom-props.$offsetTopWithNotifications}: calc(
+      var(#{custom-props.$headerHeight}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xs} + #{awsui.$space-xxxs}
+    );
+  }
+
+  /*
+  If disableBodyScroll is true (very uncommon use case) then the
+  AppLayout component and not the document body will be the scrollable
+  element. This requires a fixed height instead of a minimum height
+  with a vertical scroll policy. The offset top value for components
+  with position: sticky (AppBar, Navigation, Notifications, Tools) will
+  be set zero since the AppLayout is nearest scrollable parent and any
+  existing header does not matter. The offset top value for AppLayout
+  contentMain children with position: sticky will be the value of the
+  notifications height in addition to the notifications top margin
+  and some additional vertical space for aesthetics.
+  */
+  &.disable-body-scroll {
+    #{custom-props.$offsetTop}: 0px;
+    grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) 1fr auto;
+    height: var(#{custom-props.$contentHeight});
+    overflow-y: scroll;
+  }
+
+  &.disable-body-scroll.has-split-panel.split-panel-position-bottom {
+    grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) repeat(2, auto);
+  }
+
+  &.disable-body-scroll:not(.has-sticky-notifications) {
+    #{custom-props.$offsetTopWithNotifications}: 0px;
+  }
+
+  // #{awsui.$space-xs} token needs to align with the top margin in the notifications CSS
+  &.disable-body-scroll.has-sticky-notifications {
+    #{custom-props.$offsetTopWithNotifications}: calc(
+      var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xs} + #{awsui.$space-xxs}
+    );
+  }
+
+  /*
+  In desktop viewports the content gap property for the left and right 
+  columns should override the default of zero if the navigationHide 
+  or toolsHide property is set. This ensures adequate horizontal space
+  for the center column from the edges of the viewport when there is 
+  not left or right content.
+
+  Warning! If these design tokens change it will adversely impact the 
+  calculation used to determine the Split Panel maximum width in the 
+  handleSplitPanelMaxWidth function in the context.
+  */
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    &.has-content-gap-left {
+      #{custom-props.$contentGapLeft}: #{awsui.$space-scaled-2x-xxxl};
+    }
+
+    &.has-content-gap-right {
+      #{custom-props.$contentGapRight}: #{awsui.$space-scaled-2x-xxxl};
+    }
+  }
+
+  /*
+  In mobile viewports the Navigation and Tools drawers are hidden
+  and triggered by the AppBar which then take up the entire viewport.
+  The center column needs permanent space from the horizontal viewport 
+  edges regardless of whether or not there is a Navigation or Tools. 
+  */
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    #{custom-props.$contentGapLeft}: #{awsui.$space-l};
+    #{custom-props.$contentGapRight}: #{awsui.$space-l};
+  }
+}
+
+/*
+This CSS class is applied to the document body to prevent overflow scrolling
+when the navigation or tools drawers are open in responsive viewports. 
+*/
+.block-body-scroll {
+  overflow: hidden;
+}

package/internal/scss/app-layout/visual-refresh/main.scss

@@ -0,0 +1,116 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+
+.container {
+  grid-column: 3;
+  grid-row: 4 / span 2;
+  padding-bottom: awsui.$space-layout-content-bottom;
+
+  /*
+  If disableContentPaddings is enabled then the Main content has a different 
+  behavior inside the Layout grid. By default it will render across the entire 
+  grid column span. If the Navigation is open on the left, we increment the 
+  start column by one. If the Tools or Split Panel (in side position) is open 
+  on the right, we decrement the column end by one.
+  */
+  &.disable-content-paddings {
+    grid-column: 1 / 6;
+    padding: 0;
+
+    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+      &.is-navigation-open {
+        grid-column-start: 2;
+      }
+
+      &.is-tools-open,
+      &.is-split-panel-open.split-panel-position-side {
+        grid-column-end: 5;
+      }
+    }
+  }
+
+  /*
+  If disableContentPaddings is not enabled (the majority of use cases) then 
+  the following code block will compute the padding behavior for the Main 
+  under various circumstances.
+  */
+  &:not(.disable-content-paddings) {
+    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+      /*
+      Notifications is the previous adjacent sibling to the Main in 
+      desktop viewports if there are no Breadcrumbs or Header. Use additional
+      to padding on the Main.
+      */
+      &.content-type-default.has-notifications-content:not(.has-breadcrumbs):not(.has-header):not(.has-dynamic-overlap-height),
+      &.content-type-form.has-notifications-content:not(.has-breadcrumbs):not(.has-header):not(.has-dynamic-overlap-height) {
+        padding-top: awsui.$space-scaled-m;
+      }
+
+      /*
+      Main is the only rendered center content if there are no Notifications, 
+      Breadcrumbs, or Header. Use minimal top padding.
+      */
+      &.content-type-default:not(.has-notifications-content):not(.has-breadcrumbs):not(.has-header):not(.has-dynamic-overlap-height),
+      &.content-type-form:not(.has-notifications-content):not(.has-breadcrumbs):not(.has-header):not(.has-dynamic-overlap-height) {
+        padding-top: awsui.$space-scaled-xs;
+      }
+
+      /*
+      If the Header exists then it is necessarily the previous adjacent 
+      sibling to the Main which requires no top padding.
+      */
+      &.has-header,
+      &.has-dynamic-overlap-height {
+        padding-top: 0;
+      }
+    }
+
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      /*
+      If the Notifications exist but the Header does not then the 
+      Notifications is the previous adjacent sibling to the Main 
+      requiring additional top padding. This is because the Breadcrumbs
+      are now rendered first and positioned sticky.
+      */
+      &.content-type-default.has-notifications-content:not(.has-header):not(.has-dynamic-overlap-height),
+      &.content-type-form.has-notifications-content:not(.has-header):not(.has-dynamic-overlap-height) {
+        padding-top: awsui.$space-scaled-m;
+      }
+
+      /*
+      Main is the only rendered center content if there are no Notifications or Header.
+      */
+      &.content-type-default:not(.has-notifications-content):not(.has-header):not(.has-dynamic-overlap-height),
+      &.content-type-form:not(.has-notifications-content):not(.has-header):not(.has-dynamic-overlap-height) {
+        padding-top: awsui.$space-scaled-m;
+      }
+
+      /*
+      If the Header exists then it is necessarily the previous adjacent 
+      sibling to the Main which requires no top padding.
+      */
+      &.has-header,
+      &.has-dynamic-overlap-height {
+        padding-top: 0;
+      }
+    }
+  }
+
+  // Main should never have top padding for dark header content types
+  &.content-type-cards,
+  &.content-type-table,
+  &.content-type-wizard {
+    padding-top: 0;
+  }
+}
+
+// Prevent content that is visually hidden behind drawers and content area in mobile view from receiving focus
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.unfocusable * {
+  visibility: hidden !important;
+}

package/internal/scss/app-layout/visual-refresh/navigation.scss

@@ -0,0 +1,125 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+.navigation-container {
+  #{custom-props.$navigationWidth}: 280px;
+  display: flex;
+  grid-column: 1;
+  grid-row: 1 / span 5;
+  height: var(#{custom-props.$contentHeight});
+  position: sticky;
+  top: var(#{custom-props.$offsetTop});
+  z-index: 850;
+
+  @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
+    #{custom-props.$navigationWidth}: 320px;
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    left: 0;
+    position: fixed;
+    top: var(#{custom-props.$offsetTop});
+    z-index: 1001;
+  }
+}
+
+nav.show-navigation {
+  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+
+  // Animation for the buttons when they are added to the DOM
+  @keyframes showButtons {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  &.is-navigation-open {
+    display: none;
+  }
+
+  /*
+  Apply the animation only in desktop viewports because the AppBar will 
+  take control in responsive viewports.
+  */
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    &:not(.is-navigation-open) {
+      display: block;
+      &.animating {
+        @include styles.with-motion {
+          animation: showButtons awsui.$motion-duration-refresh-only-fast;
+        }
+      }
+    }
+  }
+}
+
+nav.navigation {
+  background-color: awsui.$color-background-container-content;
+  box-shadow: awsui.$shadow-panel;
+  bottom: 0;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  position: relative;
+  word-wrap: break-word;
+
+  // Animation for the Navigation opacity and width when it is added to the DOM
+  @keyframes openNavigation {
+    from {
+      opacity: 0;
+      width: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+    }
+
+    to {
+      opacity: 1;
+      width: var(#{custom-props.$navigationWidth});
+    }
+  }
+
+  // All content is hidden by the overflow-x property
+  &:not(.is-navigation-open) {
+    width: 0;
+    // We need to hide the closed panel to make containing focusable elements not focusable anymore.
+    display: none;
+  }
+
+  // Apply the animation when the Navigation is opened
+  &.is-navigation-open {
+    &.animating {
+      @include styles.with-motion {
+        animation: openNavigation awsui.$motion-duration-refresh-only-fast;
+      }
+    }
+  }
+
+  /*
+  A non-semantic node is added with a fixed width equal to the final Navigation 
+  width. This will create the visual appearance of horizontal movement and 
+  prevent unwanted text wrapping.
+  */
+  > .animated-content {
+    width: var(#{custom-props.$navigationWidth});
+  }
+
+  // The Navigation drawer will take up the entire viewport on mobile
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    #{custom-props.$navigationWidth}: 100vw;
+  }
+}
+
+.hide-navigation {
+  position: absolute;
+  right: awsui.$space-m;
+  top: awsui.$size-vertical-panel-icon-offset;
+}

package/internal/scss/app-layout/visual-refresh/notifications.scss

@@ -0,0 +1,55 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+.notifications {
+  grid-column: 3;
+  grid-row: 1;
+  z-index: 825;
+
+  /*
+  In desktop viewports the notifications will always be the first 
+  slot rendered in the center column. The padding should create 
+  a centered vertical alignment with the circular buttons for the
+  navigation and tools drawers.
+  */
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    margin: awsui.$space-xs 0;
+
+    /*
+    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications 
+    calculation in the layout CSS. 
+    */
+    &.sticky-notifications {
+      position: sticky;
+      top: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+    }
+
+    &:not(.has-notifications-content) {
+      margin: 0;
+    }
+  }
+
+  /*
+  In mobile viewports the notifications should never be sticky even 
+  if the property is set. Padding is added to give adequate 
+  vertical space from the sticky AppBar the subsequent adjacent sibling.
+  */
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    grid-row: 2;
+    margin: awsui.$space-scaled-s 0;
+
+    &.sticky-notifications {
+      position: static;
+    }
+
+    &:not(.has-notifications-content) {
+      margin: 0;
+    }
+  }
+}

package/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -0,0 +1,132 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+/*
+When the Split Panel is in the bottom position it will be an additional
+row entry in the grid definition within the Layout component. The state of 
+the Navigation and Tools components will adjust the start and end column
+within. In the bottom position, the Split Panel is simply a direct child 
+of the Tools component flex container and should consume 100% of the 
+parent height.
+*/
+section.split-panel-bottom {
+  bottom: var(#{custom-props.$footerHeight});
+  display: none;
+  grid-column: 1 / 6;
+  height: auto;
+  position: sticky;
+  z-index: 851;
+
+  // Animation for the height when opening the split panel
+  @keyframes openSplitPanelBottom {
+    from {
+      height: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
+    }
+
+    to {
+      height: var(#{custom-props.$splitPanelReportedSize});
+    }
+  }
+
+  // If the Layout is the scrollable element then the footer height is not relevant
+  &.disable-body-scroll {
+    bottom: 0;
+  }
+
+  &.is-navigation-open.position-bottom {
+    grid-column-start: 2;
+  }
+
+  &.is-tools-open.position-bottom {
+    grid-column-end: 5;
+  }
+
+  /*
+  Unlike the side position the Split Panel is persistent in the DOM 
+  when in the bottom position.
+  */
+  &.position-bottom {
+    display: block;
+  }
+
+  /*
+  Warning! This is a hack! The existing design token for the split panel 
+  shadow in the bottom position does not render in the refactored code.
+  It appears to be related to the fact that the legacy split panel element 
+  has a height equal to the expanded height and a corresponding translation 
+  of the Y position so it is moved off the screen. This will need to be 
+  refactored with an adjustment to the split panel design token.
+  */
+  &:not(.is-split-panel-open).position-bottom {
+    box-shadow: rgba(0, 7, 22, 0.1) 0px -32px 32px -24px;
+  }
+
+  /*
+  When the data attribute changes indicating the Split Panel has been opened
+  apply the animation to the height property.
+  */
+  &.is-split-panel-open.position-bottom {
+    box-shadow: awsui.$shadow-split-bottom;
+    &.animating {
+      @include styles.with-motion {
+        animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
+      }
+    }
+  }
+}
+
+section.split-panel-side {
+  height: 100%;
+  overflow-x: hidden;
+
+  // Animation for opacity and width when pening the Split Panel
+  @keyframes openSplitPanelSide {
+    from {
+      opacity: 0;
+      width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    }
+
+    to {
+      opacity: 1;
+      width: var(#{custom-props.$splitPanelReportedSize});
+    }
+  }
+
+  &:not(.is-split-panel-open),
+  &.position-bottom {
+    width: 0;
+  }
+
+  /*
+  The min and max widths are applied when the Split Panel is opened otherwise 
+  it would not be possible to animate the width and the box shadow would 
+  be persistent in the DOM when closed.
+  */
+  &.is-split-panel-open.position-side {
+    box-shadow: awsui.$shadow-panel;
+    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    &.animating {
+      @include styles.with-motion {
+        animation: openSplitPanelSide awsui.$motion-duration-refresh-only-fast;
+      }
+    }
+  }
+
+  /*
+  A non-semantic node is added with a fixed width equal to the final Split Panel 
+  width. This will create the visual appearance of horizontal movement and 
+  prevent unwanted text wrapping.
+  */
+  > .animated-content {
+    height: 100%;
+    max-width: inherit;
+    width: var(#{custom-props.$splitPanelReportedSize});
+  }
+}

package/internal/scss/app-layout/visual-refresh/styles.scss

@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use './app-bar.scss';
+@use './background.scss';
+@use './header.scss';
+@use './layout.scss';
+@use './main.scss';
+@use './navigation.scss';
+@use './notifications.scss';
+@use './split-panel.scss';
+@use './tools.scss';
+@use './trigger-button.scss';