Skip to content

chore: Finalize drawer animation and visual design #3482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 31 commits into from
May 13, 2025
Merged

chore: Finalize drawer animation and visual design #3482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
d06fc20
Add basic change
at-susie May 3, 2025
1be247c
add drawer expand specific motion tokens
at-susie May 3, 2025
37c0ab7
add temporary demos
at-susie May 3, 2025
c9fbc46
update demo
at-susie May 5, 2025
a598749
Merge branch 'feat/expandable-drawer' into explore-drawer-animation
at-susie May 5, 2025
77458c9
refine motion and demo
at-susie May 5, 2025
be8f703
Merge branch 'explore-drawer-animation' of https://github.com/cloudsc…
at-susie May 5, 2025
e09282b
Merge branch 'feat/expandable-drawer' into explore-drawer-animation
at-susie May 5, 2025
8454934
address a11y issues
at-susie May 6, 2025
f6ff8c5
remove unncessary motion tokens
at-susie May 6, 2025
70150a1
fix info link issue in demo
at-susie May 6, 2025
f658032
Merge branch 'feat/expandable-drawer' into explore-drawer-animation
at-susie May 6, 2025
92a168c
Merge branch 'feat/expandable-drawer' into explore-drawer-animation
at-susie May 6, 2025
3f6cd10
apply latest visual designs including icons and gap background
at-susie May 7, 2025
be31a3f
fix width motion issue
at-susie May 7, 2025
4a238ac
Merge remote-tracking branch 'origin/feat/expandable-drawer' into exp…
at-susie May 9, 2025
788117f
update snapshot test
at-susie May 9, 2025
67c698a
brought original icon position back
at-susie May 9, 2025
8c139c6
removed unnecessary className
at-susie May 9, 2025
e359824
update bolt icon with the final design
at-susie May 12, 2025
9d8540d
Merge branch 'main' into explore-drawer-animation
at-susie May 12, 2025
c0d4cdc
remove overflow-x clip
at-susie May 12, 2025
3f6272d
address width animation issue
at-susie May 13, 2025
cae7527
Merge branch 'feat/expandable-drawer' into explore-drawer-animation
at-susie May 13, 2025
f9a9f15
increase size limit
at-susie May 13, 2025
300b5c8
replace the hard-coded space value with space token
at-susie May 13, 2025
5778ffd
remove unnecessary inline-size
at-susie May 13, 2025
acda29c
apply patch file and update space-m token with semantic space variable
at-susie May 13, 2025
3243342
apply refactored code
at-susie May 13, 2025
dbee786
replace hard-coded value with variable
at-susie May 13, 2025
b511168
remove unnecessary min-inline-size
at-susie May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@
{
"path": "lib/components/internal/widget-exports.js",
"brotli": false,
"limit": "779 kB",
"limit": "783 kB",
"ignore": "react-dom"
}
],
Expand Down
3 changes: 1 addition & 2 deletions pages/app-layout/utils/external-widget-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,8 +158,7 @@ awsuiPlugins.appLayout.registerDrawer({

trigger: {
iconSvg: `<svg viewBox="0 0 16 16" focusable="false" aria-hidden="true" role="presentation">
<path stroke-width="2" stroke="currentColor" fill="none" d="M13.8131 1H6.55C6.51852 1 6.48889 1.01482 6.47 1.04L2.12 6.84C2.07056 6.90592 2.1176 7 2.2 7H6.32902C6.4055 7 6.45367 7.08237 6.41617 7.14903L2.19647 14.6507C2.1454 14.7415 2.24981 14.8401 2.33753 14.784L14.2121 7.18423C14.2963 7.13037 14.2582 7 14.1582 7H10.1869C10.107 7 10.0593 6.91099 10.1036 6.84453L13.8964 1.15547C13.9407 1.08901 13.893 1 13.8131 1Z" />
</svg>
<path d="M11.5 1H6L2 9.5H6.4L7.4 15L14 6.26923L9 6.26923L11.5 1Z" stroke="currentColor" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>
`,
},

Expand Down
16 changes: 8 additions & 8 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#ffffff",
"color-foreground-control-read-only": "#687078",
"color-gap-global-drawer": "#f2f3f3",
"color-gap-global-drawer": "#eaeded",
"color-shadow-default": "rgba(0, 28, 36, 0.5)",
"color-stroke-chart-line": "#879596",
"color-text-accent": "#0073bb",
Expand Down Expand Up @@ -1037,7 +1037,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#687078",
"color-foreground-control-read-only": "#95a5a6",
"color-gap-global-drawer": "#2a2e33",
"color-gap-global-drawer": "#16191f",
"color-shadow-default": "rgba(0, 0, 0, 0.5)",
"color-stroke-chart-line": "#879596",
"color-text-accent": "#44b9d6",
Expand Down Expand Up @@ -1712,7 +1712,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#ffffff",
"color-foreground-control-read-only": "#687078",
"color-gap-global-drawer": "#f2f3f3",
"color-gap-global-drawer": "#eaeded",
"color-shadow-default": "rgba(0, 28, 36, 0.5)",
"color-stroke-chart-line": "#879596",
"color-text-accent": "#0073bb",
Expand Down Expand Up @@ -2387,7 +2387,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#ffffff",
"color-foreground-control-read-only": "#687078",
"color-gap-global-drawer": "#f2f3f3",
"color-gap-global-drawer": "#eaeded",
"color-shadow-default": "rgba(0, 28, 36, 0.5)",
"color-stroke-chart-line": "#879596",
"color-text-accent": "#0073bb",
Expand Down Expand Up @@ -3062,7 +3062,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#ffffff",
"color-foreground-control-read-only": "#656871",
"color-gap-global-drawer": "#f3f3f7",
"color-gap-global-drawer": "#ebebf0",
"color-shadow-default": "rgba(15, 20, 26, 0.12)",
"color-stroke-chart-line": "#8c8c94",
"color-text-accent": "#006ce0",
Expand Down Expand Up @@ -3737,7 +3737,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-foreground-control-default": "#ffffff",
"color-foreground-control-disabled": "#ffffff",
"color-foreground-control-read-only": "#656871",
"color-gap-global-drawer": "#f3f3f7",
"color-gap-global-drawer": "#ebebf0",
"color-shadow-default": "rgba(15, 20, 26, 0.12)",
"color-stroke-chart-line": "#8c8c94",
"color-text-accent": "#006ce0",
Expand Down Expand Up @@ -4412,7 +4412,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-foreground-control-default": "#0f141a",
"color-foreground-control-disabled": "#161d26",
"color-foreground-control-read-only": "#a4a4ad",
"color-gap-global-drawer": "#232b37",
"color-gap-global-drawer": "#0f141a",
"color-shadow-default": "rgba(15, 20, 26, 1)",
"color-stroke-chart-line": "#8c8c94",
"color-text-accent": "#42b4ff",
Expand Down Expand Up @@ -5087,7 +5087,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-foreground-control-default": "#0f141a",
"color-foreground-control-disabled": "#161d26",
"color-foreground-control-read-only": "#a4a4ad",
"color-gap-global-drawer": "#232b37",
"color-gap-global-drawer": "#0f141a",
"color-shadow-default": "rgba(15, 20, 26, 1)",
"color-stroke-chart-line": "#8c8c94",
"color-text-accent": "#42b4ff",
Expand Down
88 changes: 46 additions & 42 deletions src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,53 +117,57 @@ function AppLayoutGlobalDrawerImplementation({
}}
data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}
>
{!isMobile && activeGlobalDrawer?.resizable && !isExpanded && (
<div className={styles['drawer-slider']}>
<PanelResizeHandle
ref={refs?.slider}
position="side"
className={testutilStyles['drawers-slider']}
ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}
tooltipText={activeGlobalDrawer?.ariaLabels?.resizeHandleTooltipText}
ariaValuenow={resizeProps.relativeSize}
onKeyDown={resizeProps.onKeyDown}
onDirectionClick={resizeProps.onDirectionClick}
onPointerDown={resizeProps.onPointerDown}
/>
</div>
)}
<div
className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
{!isMobile && activeGlobalDrawer?.isExpandable && (
<div className={styles['drawer-expanded-mode-button']}>
<div className={clsx(styles['global-drawer-wrapper'])}>
{!isMobile && <div className={styles['drawer-gap']}></div>}
{!isMobile && activeGlobalDrawer?.resizable && !isExpanded && (
<div className={styles['drawer-slider']}>
<PanelResizeHandle
ref={refs?.slider}
position="side"
className={testutilStyles['drawers-slider']}
ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}
tooltipText={activeGlobalDrawer?.ariaLabels?.resizeHandleTooltipText}
ariaValuenow={resizeProps.relativeSize}
onKeyDown={resizeProps.onKeyDown}
onDirectionClick={resizeProps.onDirectionClick}
onPointerDown={resizeProps.onPointerDown}
/>
</div>
)}

<div
className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
{!isMobile && activeGlobalDrawer?.isExpandable && (
<div className={styles['drawer-expanded-mode-button']}>
<InternalButton
ariaLabel={activeGlobalDrawer?.ariaLabels?.expandedModeButton}
className={testutilStyles['active-drawer-expanded-mode-button']}
formAction="none"
ariaExpanded={isExpanded}
iconName={isExpanded ? 'shrink' : 'expand'}
onClick={() => setExpandedDrawerId(isExpanded ? undefined : activeDrawerId)}
variant="icon"
/>
</div>
)}
<div className={clsx(styles['drawer-close-button'])}>
<InternalButton
ariaLabel={activeGlobalDrawer?.ariaLabels?.expandedModeButton}
className={testutilStyles['active-drawer-expanded-mode-button']}
ariaLabel={computedAriaLabels.closeButton}
className={clsx({
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
})}
formAction="none"
ariaExpanded={isExpanded}
iconName={isExpanded ? 'shrink' : 'expand'}
onClick={() => setExpandedDrawerId(isExpanded ? undefined : activeDrawerId)}
iconName={isMobile ? 'close' : 'angle-right'}
onClick={() => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}
ref={refs?.close}
variant="icon"
/>
</div>
)}
<div className={clsx(styles['drawer-close-button'])}>
<InternalButton
ariaLabel={computedAriaLabels.closeButton}
className={clsx({
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
})}
formAction="none"
iconName={isMobile ? 'close' : 'angle-right'}
onClick={() => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}
ref={refs?.close}
variant="icon"
/>
</div>
<div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
{activeGlobalDrawer?.content}
<div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
{activeGlobalDrawer?.content}
</div>
</div>
</div>
</aside>
Expand Down
111 changes: 94 additions & 17 deletions src/app-layout/visual-refresh-toolbar/drawer/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@

$global-drawer-gap-size: 8px;
$global-drawer-expanded-mode: #{awsui.$motion-duration-refresh-only-slow} #{awsui.$motion-easing-refresh-only-a};
$drawer-resize-handle-size: awsui.$space-m;

.drawer {
position: sticky;
z-index: constants.$drawer-z-index;
background-color: awsui.$color-background-container-content;
display: grid;
grid-template-columns: awsui.$space-m 1fr;
grid-template-columns: $drawer-resize-handle-size 1fr;
inline-size: var(#{custom-props.$drawerSize});

block-size: 100%;
Expand Down Expand Up @@ -56,17 +57,10 @@ $global-drawer-expanded-mode: #{awsui.$motion-duration-refresh-only-slow} #{awsu
}

&.drawer-global {
display: block;

@include desktop-only {
padding-inline-start: 10px;

&:before {
content: '';
position: absolute;
block-size: 100%;
inline-size: $global-drawer-gap-size;
background: awsui.$color-gap-global-drawer;
border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
}
inline-size: var(#{custom-props.$drawerSize});
}

@include mobile-only {
Expand All @@ -87,14 +81,35 @@ $global-drawer-expanded-mode: #{awsui.$motion-duration-refresh-only-slow} #{awsu
border-inline-start: none;

&.has-next-siblings {
&:after {
content: '';
position: absolute;
> .global-drawer-wrapper {
&:after {
content: '';
position: absolute;
block-size: 100%;
inline-size: $global-drawer-gap-size;
inset-inline-end: 0;
background: awsui.$color-gap-global-drawer;
border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
box-sizing: border-box;
}
}
}

> .global-drawer-wrapper {
inline-size: 100%;
grid-template-columns: $global-drawer-gap-size 1fr;

> .drawer-content-container {
grid-column: 2;
}

> .drawer-gap {
grid-column: 1;
grid-row: 1;
block-size: 100%;
inline-size: $global-drawer-gap-size;
inset-inline-end: 0;
background: awsui.$color-gap-global-drawer;
border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
}
}
}
Expand All @@ -104,9 +119,10 @@ $global-drawer-expanded-mode: #{awsui.$motion-duration-refresh-only-slow} #{awsu
grid-column: 1 / span 2;
grid-row: 1;
display: grid;
grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
grid-template-columns: $drawer-resize-handle-size 1fr auto $drawer-resize-handle-size;
grid-template-rows: constants.$toolbar-vertical-panel-icon-offset auto 1fr;
overflow-y: auto;
min-inline-size: var(#{custom-props.$drawerSize});

> .drawer-close-button {
grid-column: 3;
Expand Down Expand Up @@ -140,4 +156,65 @@ $global-drawer-expanded-mode: #{awsui.$motion-duration-refresh-only-slow} #{awsu
display: flex;
align-items: center;
}

> .global-drawer-wrapper {
display: grid;
min-inline-size: var(#{custom-props.$drawerSize});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The question still stands: do we really need to set the inline size twice? Based on our earlier discussion, we agreed that it’s not necessary

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While inline-size is not necessary, which I removed, the min-inline-size is still necessary otherwise the unwanted width change happens.

Uploading Screen Recording 2025-05-13 at 15.54.49.mov…

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, should we remove min-inline-size from the parent selector then?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, I removed it in this commit

grid-template-columns: $global-drawer-gap-size $drawer-resize-handle-size 1fr;
overflow: hidden;

@include mobile-only {
grid-template-columns: 1fr;
}

> .drawer-gap {
grid-column: 1;
grid-row: 1;
block-size: 100%;
inline-size: $global-drawer-gap-size;
background: awsui.$color-gap-global-drawer;
border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
}

> .drawer-slider {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
}

> .drawer-content-container {
grid-column: 2 / span 2;
grid-row: 1;
display: grid;
grid-template-columns: $drawer-resize-handle-size 1fr auto $drawer-resize-handle-size;
grid-template-rows: constants.$toolbar-vertical-panel-icon-offset auto 1fr;
overflow-y: auto;

> .drawer-close-button {
grid-column: 3;
grid-row: 2;
z-index: 1;
align-self: start;
}

> .drawer-expanded-mode-button {
grid-column: 2;
grid-row: 2;
z-index: 1;
align-self: start;
display: flex;
justify-content: end;
}

> .drawer-content {
grid-column: 1 / span 4;
grid-row: 1 / span 2;

&.drawer-content-hidden {
display: none;
}
}
}
}
}
14 changes: 8 additions & 6 deletions src/icon/icons/expand.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/internal/components/drag-handle/resize-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function ResizeIcon({ variant }: ResizeIconProps) {
viewBox="0 0 16 16"
aria-hidden={true}
>
<path d="M2 10H14" strokeWidth="2" strokeLinecap="round" />
<path d="M2 8H14" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
3 changes: 2 additions & 1 deletion src/internal/components/panel-resize-handle/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,6 @@

.slider-side {
cursor: ew-resize;
padding-inline-start: 2px;
margin-block: 0;
margin-inline-end: 0;
}
2 changes: 1 addition & 1 deletion style-dictionary/visual-refresh/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorDropzoneTextHover: { light: '{colorGrey600}', dark: '{colorGrey350}' },
colorDropzoneBorderDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
colorDropzoneBorderHover: { light: '{colorBlue800}', dark: '{colorBlue400}' },
colorGapGlobalDrawer: { light: '{colorGrey150}', dark: '{colorGrey700}' },
colorGapGlobalDrawer: { light: '{colorGrey200}', dark: '{colorGrey900}' },
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
Expand Down
Loading