Skip to content
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.

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

merge #2

Merged
merged 22 commits into from
Nov 28, 2022
Merged
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
2cc623c
chore: bump loader-utils from 3.2.0 to 3.2.1 (#482)
dependabot[bot] Nov 18, 2022
162110d
fix: Split-panel should have accessible name and consistent identific…
karmanya79 Nov 18, 2022
916caba
feat: Show popover for truncated Breadcrumb text on hover or focus (…
YueyingLu Nov 18, 2022
64ecd38
fix: Fix prevent anchor navigation in disabled tabs with `href` (#484)
taheramr Nov 18, 2022
9e164b3
fix: Table header stays sticky with few itmes and open split panel (#…
johannes-weber Nov 21, 2022
cd31ba3
fix: Add ariaLabelledBy and tabIndex attributes to Tab content (#500)
jperals Nov 21, 2022
0c905fe
feat: Add steps information to annotation trigger aria label (#507)
YueyingLu Nov 22, 2022
52c2f36
fix: Prevent resetting StickyBackground from elements using InternalC…
johannes-weber Nov 22, 2022
bc9db2b
revert: Show popover for truncated Breadcrumb text on hover or focus …
YueyingLu Nov 22, 2022
1ffc10f
feat: Add descriptive aria-label to tutorial pabel task list steps ti…
YueyingLu Nov 22, 2022
2deaa03
fix: Use deterministic table items for AppLayout page (#513)
johannes-weber Nov 22, 2022
d8d4ad5
fix: Fix tag editor key suggestions getting stuck in React 18's stric…
avinashbot Nov 23, 2022
5648d1e
chore: Print stack trace in error message (#516)
just-boris Nov 23, 2022
09e3562
feat: Screen reader should announce tutorial completion message (#510)
YueyingLu Nov 23, 2022
14c2f36
refactor: Join all state changes in a single place (#520)
just-boris Nov 23, 2022
70d3224
fix: Tutorial panel margin on top of task list (#524)
YueyingLu Nov 24, 2022
aa135d7
chore: Disable code coverage when running locally (#519)
just-boris Nov 24, 2022
7dbd788
chore: Add analytics beta hook
michaeldowseza Nov 21, 2022
218aa7e
fix: Add aria live announcer to code editor for errors and warnings (…
jorycunningham Nov 24, 2022
4bb4f3a
fix: Allow popovers in charts to be dismissed by pressing Esc (#514)
avinashbot Nov 25, 2022
b8f915c
refactor: Make range calendar selection controllable (#526)
just-boris Nov 25, 2022
1095cef
fix: Annotation focus on the start of the popover on clicking next (#…
YueyingLu Nov 28, 2022
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
Prev Previous commit
Next Next commit
revert: Show popover for truncated Breadcrumb text on hover or focus (c…
YueyingLu authored Nov 22, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit bc9db2b80ae191a527fb4673bc34275439627b45
17 changes: 4 additions & 13 deletions pages/breadcrumb-group/scenarios.page.tsx
Original file line number Diff line number Diff line change
@@ -23,14 +23,8 @@ const testCases = [

export default function ButtonDropdownPage() {
return (
<article>
<ScreenshotArea
disableAnimations={true}
style={{
// extra space to include popover in the screenshot area
paddingBottom: 200,
}}
>
<ScreenshotArea disableAnimations={true}>
<article>
<h1>BreadcrumbGroup variations</h1>
{testCases.map((testcase, index) => (
<BreadcrumbGroup
@@ -40,10 +34,7 @@ export default function ButtonDropdownPage() {
items={testcase.map((text, i) => ({ text, href: `#item-${index}-${i}` }))}
/>
))}
</ScreenshotArea>
<button type="button" id="focus-target">
focus
</button>
</article>
</article>
</ScreenshotArea>
);
}
1 change: 0 additions & 1 deletion src/breadcrumb-group/interfaces.ts
Original file line number Diff line number Diff line change
@@ -56,7 +56,6 @@ export namespace BreadcrumbGroupProps {
export interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {
item: T;
isLast?: boolean;
isFirst?: boolean;
isCompressed?: boolean;
onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
1 change: 0 additions & 1 deletion src/breadcrumb-group/internal.tsx
Original file line number Diff line number Diff line change
@@ -101,7 +101,6 @@ export default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.I
onFollow={onFollow}
isCompressed={isMobile}
isLast={index === items.length - 1}
isFirst={index === 0}
/>
</li>
);
100 changes: 19 additions & 81 deletions src/breadcrumb-group/item/item.tsx
Original file line number Diff line number Diff line change
@@ -1,109 +1,47 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import React from 'react';
import { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';
import InternalIcon from '../../icon/internal';
import styles from './styles.css.js';
import clsx from 'clsx';
import useFocusVisible from '../../internal/hooks/focus-visible';
import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
import { getEventDetail } from '../internal';
import { Transition } from '../../internal/components/transition';
import PopoverContainer from '../../popover/container';
import PopoverBody from '../../popover/body';
import Portal from '../../internal/components/portal';
import popoverStyles from '../../popover/styles.css.js';
import { useContainerQuery } from '../../internal/hooks/container-queries';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';

export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
item,
onClick,
onFollow,
isLast = false,
isFirst = false,
isCompressed = false,
}: BreadcrumbItemProps<T>) {
const focusVisible = useFocusVisible();
const [textTruncated, setTextTruncated] = useState(false);
const [openPopover, setOpenPopover] = useState(false);
const preventDefault = (event: React.MouseEvent) => event.preventDefault();
const onClickHandler = (event: React.MouseEvent) => {
if (isPlainLeftClick(event)) {
fireCancelableEvent(onFollow, getEventDetail(item), event);
}
fireCancelableEvent(onClick, getEventDetail(item), event);
};
const trackRef = useRef<HTMLElement>(null);
const [textWidth, textRef] = useContainerQuery(rect => rect.width);
const mergedRef = useMergeRefs(trackRef, textRef);
const virtualTextRef = useRef<HTMLElement>(null);

const popoverContent = (
<Transition in={openPopover}>
{() => (
<PopoverContainer
trackRef={trackRef}
size="small"
fixedWidth={false}
position="bottom"
arrow={position => (
<div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>
<div className={popoverStyles['arrow-outer']} />
<div className={popoverStyles['arrow-inner']} />
</div>
)}
>
<PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>
{item.text}
</PopoverBody>
</PopoverContainer>
)}
</Transition>
);

useEffect(() => {
if (isCompressed && textWidth && virtualTextRef && virtualTextRef.current) {
if (Math.round(virtualTextRef.current.clientWidth) > Math.round(textWidth)) {
setTextTruncated(true);
}
} else {
setTextTruncated(false);
}
}, [isCompressed, textWidth, virtualTextRef]);

return (
<>
<div className={clsx(styles.breadcrumb, isLast && styles.last)}>
<a
{...focusVisible}
href={isLast ? undefined : item.href || '#'}
className={clsx(styles.anchor, { [styles.compressed]: isCompressed })}
aria-current={isLast ? 'page' : undefined} // Active breadcrumb item is implemented according to WAI-ARIA 1.1
aria-disabled={isLast && 'true'}
onClick={isLast ? preventDefault : onClickHandler}
tabIndex={isLast ? 0 : undefined} // tabIndex is added to the last crumb to keep it in the index without an href
onFocus={() => textTruncated && setOpenPopover(true)}
onBlur={() => textTruncated && setOpenPopover(false)}
onMouseEnter={() => textTruncated && setOpenPopover(true)}
onMouseLeave={() => textTruncated && setOpenPopover(false)}
>
<span className={styles.text} ref={mergedRef}>
{item.text}
</span>
{(isLast || isFirst) && isCompressed && (
<span className={styles['virtual-item']} ref={virtualTextRef}>
{item.text}
</span>
)}
</a>
{!isLast ? (
<span className={styles.icon}>
<InternalIcon name="angle-right" />
</span>
) : null}
</div>
{openPopover && <Portal>{popoverContent}</Portal>}
</>
<div className={clsx(styles.breadcrumb, isLast && styles.last)}>
<a
{...focusVisible}
href={isLast ? undefined : item.href || '#'}
className={clsx(styles.anchor, { [styles.compressed]: isCompressed })}
aria-current={isLast ? 'page' : undefined} // Active breadcrumb item is implemented according to WAI-ARIA 1.1
aria-disabled={isLast && 'true'}
onClick={isLast ? preventDefault : onClickHandler}
tabIndex={isLast ? 0 : undefined} // tabIndex is added to the last crumb to keep it in the index without an href
>
<span className={styles.text}>{item.text}</span>
</a>
{!isLast ? (
<span className={styles.icon}>
<InternalIcon name="angle-right" />
</span>
) : null}
</div>
);
}
5 changes: 1 addition & 4 deletions src/breadcrumb-group/item/styles.scss
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@
font-weight: styles.$font-weight-bold;
text-decoration: none;
cursor: default;
pointer-events: none;
}
}
}
@@ -49,7 +50,3 @@
display: block;
}
}
.virtual-item {
@include styles.awsui-util-hide;
visibility: hidden;
}