{!isMobile && (
-
)}
diff --git a/src/app-layout/mobile-toolbar/styles.scss b/src/app-layout/mobile-toolbar/styles.scss
index 822851b038..37e6798b25 100644
--- a/src/app-layout/mobile-toolbar/styles.scss
+++ b/src/app-layout/mobile-toolbar/styles.scss
@@ -12,7 +12,6 @@
}
.mobile-bar {
- /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
position: sticky;
display: flex;
align-items: center;
@@ -32,38 +31,26 @@
margin-right: awsui.$space-m;
}
-.mobile-trigger-with-drawers {
- width: constants.$sidebar-size-closed;
- display: flex;
- justify-content: center;
-}
-
.mobile-toggle {
box-sizing: border-box;
cursor: pointer;
z-index: 1;
padding: constants.$toggle-padding;
width: constants.$sidebar-size-closed;
- &:first-child {
+ color: awsui.$color-text-interactive-default;
+ &-type-navigation {
border-right: 1px solid awsui.$color-border-layout;
}
- &:last-child:not(.mobile-toggle-with-drawers) {
+ &-type-tools,
+ &-type-drawer {
border-left: 1px solid awsui.$color-border-layout;
}
- &:hover:not(.mobile-toggle-with-drawers) {
+ &:hover {
background: awsui.$color-background-layout-panel-hover;
}
+}
- &-with-drawers {
- display: flex;
- width: auto;
- padding: 0;
- height: 100%;
-
- > .mobile-trigger-with-drawers {
- border-left: 1px solid awsui.$color-border-layout;
- display: flex;
- align-items: center;
- }
- }
+.drawers-container {
+ display: flex;
+ align-items: stretch;
}
diff --git a/src/app-layout/toggles/index.tsx b/src/app-layout/toggles/index.tsx
index e6bec2170d..e61c189af5 100644
--- a/src/app-layout/toggles/index.tsx
+++ b/src/app-layout/toggles/index.tsx
@@ -1,8 +1,10 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
import React from 'react';
import { ButtonProps } from '../../button/interfaces';
import { InternalButton } from '../../button/internal';
+import InternalIcon from '../../icon/internal';
import { AppLayoutProps } from '../interfaces';
import { AppLayoutButtonProps } from './interfaces';
import styles from './styles.css.js';
@@ -28,25 +30,25 @@ export const togglesConfig = {
},
} as const;
-export const AppLayoutButton = React.forwardRef(
+export const ToggleButton = React.forwardRef(
(
- { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }: AppLayoutButtonProps,
- ref: React.Ref
+ { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }: AppLayoutButtonProps,
+ ref: React.Ref<{ focus(): void }>
) => {
return (
- }
+ className={clsx(className, styles['toggle-button'])}
+ aria-label={ariaLabel}
+ type="button"
onClick={onClick}
- iconName={iconName}
- iconSvg={iconSvg}
disabled={disabled}
- ariaExpanded={ariaExpanded ? undefined : false}
- __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}
- />
+ aria-expanded={ariaExpanded ? undefined : false}
+ aria-haspopup={ariaExpanded ? undefined : true}
+ data-testid={testId}
+ >
+
+
);
}
);
@@ -61,11 +63,12 @@ export const CloseButton = React.forwardRef(
({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref) => {
return (
-
diff --git a/src/app-layout/toggles/interfaces.ts b/src/app-layout/toggles/interfaces.ts
index 5007aeda6c..e1def475c5 100644
--- a/src/app-layout/toggles/interfaces.ts
+++ b/src/app-layout/toggles/interfaces.ts
@@ -1,5 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
import { IconProps } from '../../icon/interfaces';
export interface AppLayoutButtonProps {
@@ -8,6 +9,7 @@ export interface AppLayoutButtonProps {
ariaExpanded?: boolean;
iconName?: IconProps.Name;
iconSvg?: React.ReactNode;
- onClick: () => void;
+ onClick?: () => void;
disabled?: boolean;
+ testId?: string;
}
diff --git a/src/app-layout/toggles/styles.scss b/src/app-layout/toggles/styles.scss
index 81c3eb6342..d1d7446ad5 100644
--- a/src/app-layout/toggles/styles.scss
+++ b/src/app-layout/toggles/styles.scss
@@ -7,6 +7,18 @@
@use '../../internal/styles' as styles;
@use '../../internal/hooks/focus-visible' as focus-visible;
+.toggle-button {
+ cursor: pointer;
+ border: 0;
+ // add up to 40px total height
+ padding: 5px;
+ background: transparent;
+ color: currentColor;
+ @include focus-visible.when-visible {
+ @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
+ }
+}
+
.close-button {
position: absolute;
outline: none;
diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
index c69a8fe478..386f0ea611 100644
--- a/src/app-layout/visual-refresh/drawers.tsx
+++ b/src/app-layout/visual-refresh/drawers.tsx
@@ -214,6 +214,7 @@ function DesktopTriggers() {
}}
ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}
selected={item.id === activeDrawerId}
+ testId={`awsui-app-layout-trigger-${item.id}`}
/>
))}
@@ -304,7 +305,7 @@ export function MobileTriggers() {
onClick={() => handleDrawersClick(item.id)}
ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}
variant="icon"
- __nativeAttributes={{ 'aria-haspopup': true }}
+ __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}
/>
))}
diff --git a/src/app-layout/visual-refresh/trigger-button.tsx b/src/app-layout/visual-refresh/trigger-button.tsx
index c8dcc63e58..4689f39551 100644
--- a/src/app-layout/visual-refresh/trigger-button.tsx
+++ b/src/app-layout/visual-refresh/trigger-button.tsx
@@ -12,12 +12,13 @@ export interface TriggerButtonProps {
className?: string;
iconName?: IconProps.Name;
iconSvg?: React.ReactNode;
+ testId?: string;
onClick: React.MouseEventHandler;
selected?: boolean;
}
function TriggerButton(
- { ariaLabel, className, iconName, iconSvg, onClick, selected = false }: TriggerButtonProps,
+ { ariaLabel, className, iconName, iconSvg, onClick, testId, selected = false }: TriggerButtonProps,
ref: React.Ref
) {
return (
@@ -35,6 +36,7 @@ function TriggerButton(
onClick={onClick}
ref={ref as React.Ref}
type="button"
+ data-testid={testId}
>
diff --git a/src/test-utils/dom/app-layout/index.ts b/src/test-utils/dom/app-layout/index.ts
index c9ff7d6cc9..aae5ffe01a 100644
--- a/src/test-utils/dom/app-layout/index.ts
+++ b/src/test-utils/dom/app-layout/index.ts
@@ -67,6 +67,10 @@ export default class AppLayoutWrapper extends ComponentWrapper {
return this.findAllByClassName(testutilStyles['drawers-trigger']);
}
+ findDrawerTriggerById(id: string): ElementWrapper | null {
+ return this.find(`.${testutilStyles['drawers-trigger']}[data-testid="awsui-app-layout-trigger-${id}"]`);
+ }
+
findDrawersSlider(): ElementWrapper | null {
return this.findByClassName(testutilStyles['drawers-slider']);
}
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 35eb975449..b9010614b3 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -331,7 +331,6 @@ export type ColorsTokenName =
| 'colorForegroundControlDefault'
| 'colorForegroundControlDisabled'
| 'colorShadowDefault'
- | 'colorShadowLayoutToggle'
| 'colorShadowMedium'
| 'colorShadowSide'
| 'colorStrokeChartLine'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 6eb049e4b9..916ac60c1d 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -134,7 +134,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorForegroundControlDefault: { light: '{colorWhite}', dark: '{colorGrey900}' },
colorForegroundControlDisabled: { light: '{colorWhite}', dark: '{colorGrey800}' },
colorShadowDefault: '{colorGreyTransparentHeavy}',
- colorShadowLayoutToggle: { light: '{colorGrey300}', dark: '{colorGrey650}' },
colorShadowMedium: '{colorGreyTransparent}',
colorShadowSide: '{colorGreyTransparentLight}',
colorStrokeChartLine: '{colorGrey500}',