From 63d23db47a76f195001f4ad480f1bdd83e75d1fb Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Jul 2023 14:47:45 +0200 Subject: [PATCH] fix: Fix visual bugs in drawer toggle buttons --- src/app-layout/constants.scss | 11 ++--- src/app-layout/drawer/index.tsx | 37 +++++++------- src/app-layout/drawer/interfaces.ts | 5 +- src/app-layout/drawer/styles.scss | 59 +++++++++-------------- src/app-layout/mobile-toolbar/index.tsx | 31 ++++++------ src/app-layout/mobile-toolbar/styles.scss | 30 +++--------- src/app-layout/toggles/index.tsx | 32 ++++++------ src/app-layout/toggles/interfaces.ts | 3 +- src/app-layout/toggles/styles.scss | 12 +++++ style-dictionary/utils/token-names.ts | 1 - style-dictionary/visual-refresh/colors.ts | 1 - 11 files changed, 100 insertions(+), 122 deletions(-) diff --git a/src/app-layout/constants.scss b/src/app-layout/constants.scss index 4853aa2f8d..fd81fec8c6 100644 --- a/src/app-layout/constants.scss +++ b/src/app-layout/constants.scss @@ -8,14 +8,9 @@ // Toggle should have 40px width, whereas button is 26px wide. // 40 - 26 = 14px in total or 7px on each side -$toggle-padding-horizontal: 0.7 * styles.$base-size; -$toggle-padding-vertical: awsui.$space-xxs; -$toggle-padding: $toggle-padding-vertical $toggle-padding-horizontal; - -// New styles for when there are drawers -$drawers-padding-horizontal: 0.6 * styles.$base-size; -$drawers-padding-vertical: awsui.$space-scaled-xs; -$drawers-padding: $drawers-padding-vertical $drawers-padding-horizontal; +$_toggle-padding-horizontal: 0.7 * styles.$base-size; +$_toggle-padding-vertical: awsui.$space-xxs; +$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal; $sidebar-size-closed: 4 * styles.$base-size; diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx index 3d897178db..900a7c010a 100644 --- a/src/app-layout/drawer/index.tsx +++ b/src/app-layout/drawer/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import clsx from 'clsx'; import React, { useRef } from 'react'; -import { AppLayoutButton, CloseButton, togglesConfig } from '../toggles'; +import { ToggleButton, CloseButton, togglesConfig } from '../toggles'; import testutilStyles from '../test-classes/styles.css.js'; import styles from './styles.css.js'; @@ -63,7 +63,7 @@ export const Drawer = React.forwardRef( const regularOpenButton = ( -
{!isMobile && regularOpenButton} {resizeHandle} @@ -145,29 +145,28 @@ export function DrawerTriggersBar({ [styles['drawer-mobile']]: isMobile, })} > -
+
{!isMobile && ( - )} diff --git a/src/app-layout/mobile-toolbar/styles.scss b/src/app-layout/mobile-toolbar/styles.scss index 822851b038..fb3a2dacdf 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,25 @@ 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 { + &-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..909df8bca7 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,24 @@ 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 + 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} + > + + ); } ); @@ -61,11 +62,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..456855133e 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,6 @@ export interface AppLayoutButtonProps { ariaExpanded?: boolean; iconName?: IconProps.Name; iconSvg?: React.ReactNode; - onClick: () => void; + onClick?: () => void; disabled?: boolean; } diff --git a/src/app-layout/toggles/styles.scss b/src/app-layout/toggles/styles.scss index 81c3eb6342..7fe0a008c6 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 awsui.$space-xxs; + 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/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}',