Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-15 11:04:49 +00:00
Code Issues Releases Activity

update to blueprintjs 5.x

Browse Source
This commit is contained in:
David Lechner
2023-06-28 14:42:55 -05:00
committed by David Lechner
parent 2fc3bea48f
commit 65e5627568
57 changed files with 369 additions and 889 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022-2023 The Pybricks Authors
import { Classes, Icon, IconName, IconSize, Spinner } from '@blueprintjs/core';
import { Classes, Icon, IconSize, Spinner } from '@blueprintjs/core';
import { mergeRefs, useId } from '@react-aria/utils';
import classNames from 'classnames';
import React, { useRef } from 'react';
@@ -21,7 +21,7 @@ type ButtonProps = {
/** When true, the button will use the {@link Classes.MINIMAL} style. */
minimal?: boolean;
/** Icon that will be displayed to the left of the button content. */
icon: IconName;
icon: JSX.Element;
/** A reference to the underlying <button> HTML element. */
elementRef?: React.ForwardedRef<HTMLButtonElement>;
/** Called when the button is pressed. */
@@ -78,7 +78,7 @@ export const Button: React.FunctionComponent<ButtonProps> = ({
/>
) : (
<>
<Icon icon={icon} aria-hidden />
<Icon icon={icon} />
{isLabelVisible && (
<span id={labelId} className={Classes.BUTTON_TEXT}>
{label}
src/components/ClipboardIcon.tsx
+4 -4
View File
@@ -3,17 +3,17 @@
// Icon for indicating external links
import { Icon } from '@blueprintjs/core';
import React from 'react';
import './clipboard.scss';
import { Icon } from '@blueprintjs/core';
import { Duplicate } from '@blueprintjs/icons';
import React from 'react';
const ClipboardIcon: React.FunctionComponent = () => {
return (
<span className="pb-clipboard">
&nbsp;
<sup>
<Icon icon="duplicate" iconSize={12} />
<Icon icon={<Duplicate size={12} />} />
</sup>
</span>
);
src/components/ExternalLinkIcon.tsx
+4 -4
View File
@@ -3,17 +3,17 @@
// Icon for indicating external links
import { Icon } from '@blueprintjs/core';
import React from 'react';
import './external-link.scss';
import { Icon } from '@blueprintjs/core';
import { Share } from '@blueprintjs/icons';
import React from 'react';
const ExternalLinkIcon: React.FunctionComponent = () => {
return (
<span className="pb-external-link">
&nbsp;
<sup>
<Icon icon="share" iconSize={12} />
<Icon icon={<Share size={12} />} />
</sup>
</span>
);
src/components/HelpButton.tsx
+2 -1
View File
@@ -2,6 +2,7 @@
// Copyright (c) 2022-2023 The Pybricks Authors
import { Classes } from '@blueprintjs/core';
import { Help } from '@blueprintjs/icons';
import React, { useCallback, useEffect, useState } from 'react';
import { OverlayContainer } from 'react-aria';
import { useBoolean } from 'usehooks-ts';
@@ -55,7 +56,7 @@ const HelpButton: React.FunctionComponent<HelpButtonProps> = ({
helpForLabel,
})}
minimal
icon="help"
icon={<Help />}
elementRef={setOpenButton}
onPress={setIsDialogOpenTrue}
/>
src/components/HelpDialog.scss
+3 -3
View File
@@ -1,13 +1,13 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
@use '@blueprintjs/core/lib/scss/variables' as bp;
.#{bp.$ns}-popover2-open.#{bp.$ns}-popover2-placement-right {
.#{bp.$ns}-popover-open.#{bp.$ns}-popover-placement-right {
animation: open-right 0.25s;
}
.#{bp.$ns}-popover2-close.#{bp.$ns}-popover2-placement-right {
.#{bp.$ns}-popover-close.#{bp.$ns}-popover-placement-right {
animation: close-right 0.25s;
}
src/components/HelpDialog.tsx
+9 -15
View File
@@ -3,11 +3,10 @@
import './HelpDialog.scss';
import { Classes } from '@blueprintjs/core';
import { Classes as Classes2 } from '@blueprintjs/popover2';
import {
POPOVER_ARROW_SVG_SIZE,
Popover2Arrow,
} from '@blueprintjs/popover2/lib/cjs/popover2Arrow';
PopoverArrow,
} from '@blueprintjs/core/lib/cjs/components/popover/popoverArrow';
import classNames from 'classnames';
import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
import {
@@ -88,11 +87,6 @@ const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> =
),
);
// HACK: workaround https://github.com/palantir/blueprint/pull/5302
useEffect(() => {
arrow?.setAttribute('aria-hidden', 'true');
}, [arrow]);
// HACK: since there are not keyboard focusable elements for autoFocus
// we have to manually focus the only focusable element in the dialog,
// otherwise the FocusScope doesn't work.
@@ -110,7 +104,7 @@ const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> =
<div className={Classes.OVERLAY_BACKDROP} {...underlayProps}>
<div
className={classNames(
Classes2.POPOVER2_TRANSITION_CONTAINER,
Classes.POPOVER_TRANSITION_CONTAINER,
Classes.OVERLAY_CONTENT,
)}
ref={setPopperElement}
@@ -119,14 +113,14 @@ const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> =
>
<div
className={classNames(
Classes2.POPOVER2,
`${Classes2.POPOVER2}-${isOpen ? 'open' : 'close'}`,
`${Classes2.POPOVER2_CONTENT_PLACEMENT}-right`,
Classes2.POPOVER2_CONTENT_SIZING,
Classes.POPOVER,
`${Classes.POPOVER}-${isOpen ? 'open' : 'close'}`,
`${Classes.POPOVER_CONTENT_PLACEMENT}-right`,
Classes.POPOVER_CONTENT_SIZING,
)}
onAnimationEnd={onAnimationEnd}
>
<Popover2Arrow
<PopoverArrow
arrowProps={{ ref: setArrow, style: styles.arrow }}
placement={state?.placement ?? 'auto'}
/>
@@ -141,7 +135,7 @@ const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> =
// clicking anywhere in the dialog closes it
onClick={onClose}
>
<div id={descId} className={Classes2.POPOVER2_CONTENT}>
<div id={descId} className={Classes.POPOVER_CONTENT}>
{children}
</div>
<DismissButton