Skip to content

Commit 9f361a1

Browse files
avinashbotavinashbot
authored
revert: Revert "feat: Add directional resize buttons to code editor's resize control" (#3349)
1 parent 3e9837c commit 9f361a1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+124
-1408
lines changed

‎pages/code-editor/base-props.ts

-3
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,4 @@ export const i18nStrings: CodeEditorProps.I18nStrings = {
3535
preferencesModalThemeFilteringAriaLabel: 'Filter themes',
3636
preferencesModalThemeFilteringClearAriaLabel: 'Clear',
3737
preferencesModalThemeFilteringPlaceholder: 'Filter themes',
38-
39-
resizeHandleAriaLabel: 'Resize handle',
40-
resizeHandleTooltipText: 'Drag or select to resize',
4138
};

‎src/__integ__/__snapshots__/themes.test.ts.snap

-48
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
7171
"color-background-control-checked": "#0073bb",
7272
"color-background-control-default": "#ffffff",
7373
"color-background-control-disabled": "#d5dbdb",
74-
"color-background-direction-button-active": "#2a2e33",
75-
"color-background-direction-button-default": "#545b64",
76-
"color-background-direction-button-disabled": "#eaeded",
77-
"color-background-direction-button-hover": "#414750",
7874
"color-background-dropdown-item-default": "#ffffff",
7975
"color-background-dropdown-item-dimmed": "transparent",
8076
"color-background-dropdown-item-filter-match": "#f1faff",
@@ -386,8 +382,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
386382
"color-text-column-sorting-icon": "#687078",
387383
"color-text-control-disabled": "#aab7b8",
388384
"color-text-counter": "#687078",
389-
"color-text-direction-button-default": "#ffffff",
390-
"color-text-direction-button-disabled": "#aab7b8",
391385
"color-text-disabled": "#aab7b8",
392386
"color-text-disabled-inline-edit": "#545b64",
393387
"color-text-dropdown-footer": "#687078",
@@ -736,10 +730,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
736730
"color-background-control-checked": "#00a1c9",
737731
"color-background-control-default": "#1a2029",
738732
"color-background-control-disabled": "#414750",
739-
"color-background-direction-button-active": "#2a2e33",
740-
"color-background-direction-button-default": "#545b64",
741-
"color-background-direction-button-disabled": "#2a2e33",
742-
"color-background-direction-button-hover": "#414750",
743733
"color-background-dropdown-item-default": "#2a2e33",
744734
"color-background-dropdown-item-dimmed": "transparent",
745735
"color-background-dropdown-item-filter-match": "#12293b",
@@ -1051,8 +1041,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
10511041
"color-text-column-sorting-icon": "#95a5a6",
10521042
"color-text-control-disabled": "#687078",
10531043
"color-text-counter": "#95a5a6",
1054-
"color-text-direction-button-default": "#ffffff",
1055-
"color-text-direction-button-disabled": "#687078",
10561044
"color-text-disabled": "#687078",
10571045
"color-text-disabled-inline-edit": "#95a5a6",
10581046
"color-text-dropdown-footer": "#95a5a6",
@@ -1401,10 +1389,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
14011389
"color-background-control-checked": "#0073bb",
14021390
"color-background-control-default": "#ffffff",
14031391
"color-background-control-disabled": "#d5dbdb",
1404-
"color-background-direction-button-active": "#2a2e33",
1405-
"color-background-direction-button-default": "#545b64",
1406-
"color-background-direction-button-disabled": "#eaeded",
1407-
"color-background-direction-button-hover": "#414750",
14081392
"color-background-dropdown-item-default": "#ffffff",
14091393
"color-background-dropdown-item-dimmed": "transparent",
14101394
"color-background-dropdown-item-filter-match": "#f1faff",
@@ -1716,8 +1700,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
17161700
"color-text-column-sorting-icon": "#687078",
17171701
"color-text-control-disabled": "#aab7b8",
17181702
"color-text-counter": "#687078",
1719-
"color-text-direction-button-default": "#ffffff",
1720-
"color-text-direction-button-disabled": "#aab7b8",
17211703
"color-text-disabled": "#aab7b8",
17221704
"color-text-disabled-inline-edit": "#545b64",
17231705
"color-text-dropdown-footer": "#687078",
@@ -2066,10 +2048,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
20662048
"color-background-control-checked": "#0073bb",
20672049
"color-background-control-default": "#ffffff",
20682050
"color-background-control-disabled": "#d5dbdb",
2069-
"color-background-direction-button-active": "#2a2e33",
2070-
"color-background-direction-button-default": "#545b64",
2071-
"color-background-direction-button-disabled": "#eaeded",
2072-
"color-background-direction-button-hover": "#414750",
20732051
"color-background-dropdown-item-default": "#ffffff",
20742052
"color-background-dropdown-item-dimmed": "transparent",
20752053
"color-background-dropdown-item-filter-match": "#f1faff",
@@ -2381,8 +2359,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
23812359
"color-text-column-sorting-icon": "#687078",
23822360
"color-text-control-disabled": "#aab7b8",
23832361
"color-text-counter": "#687078",
2384-
"color-text-direction-button-default": "#ffffff",
2385-
"color-text-direction-button-disabled": "#aab7b8",
23862362
"color-text-disabled": "#aab7b8",
23872363
"color-text-disabled-inline-edit": "#545b64",
23882364
"color-text-dropdown-footer": "#687078",
@@ -2731,10 +2707,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
27312707
"color-background-control-checked": "#006ce0",
27322708
"color-background-control-default": "#ffffff",
27332709
"color-background-control-disabled": "#dedee3",
2734-
"color-background-direction-button-active": "#232b37",
2735-
"color-background-direction-button-default": "#424650",
2736-
"color-background-direction-button-disabled": "#ebebf0",
2737-
"color-background-direction-button-hover": "#333843",
27382710
"color-background-dropdown-item-default": "#ffffff",
27392711
"color-background-dropdown-item-dimmed": "transparent",
27402712
"color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3046,8 +3018,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
30463018
"color-text-column-sorting-icon": "#424650",
30473019
"color-text-control-disabled": "#b4b4bb",
30483020
"color-text-counter": "#656871",
3049-
"color-text-direction-button-default": "#ffffff",
3050-
"color-text-direction-button-disabled": "#b4b4bb",
30513021
"color-text-disabled": "#b4b4bb",
30523022
"color-text-disabled-inline-edit": "#424650",
30533023
"color-text-dropdown-footer": "#656871",
@@ -3396,10 +3366,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
33963366
"color-background-control-checked": "#006ce0",
33973367
"color-background-control-default": "#ffffff",
33983368
"color-background-control-disabled": "#dedee3",
3399-
"color-background-direction-button-active": "#232b37",
3400-
"color-background-direction-button-default": "#424650",
3401-
"color-background-direction-button-disabled": "#ebebf0",
3402-
"color-background-direction-button-hover": "#333843",
34033369
"color-background-dropdown-item-default": "#ffffff",
34043370
"color-background-dropdown-item-dimmed": "transparent",
34053371
"color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3711,8 +3677,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
37113677
"color-text-column-sorting-icon": "#424650",
37123678
"color-text-control-disabled": "#b4b4bb",
37133679
"color-text-counter": "#656871",
3714-
"color-text-direction-button-default": "#ffffff",
3715-
"color-text-direction-button-disabled": "#b4b4bb",
37163680
"color-text-disabled": "#b4b4bb",
37173681
"color-text-disabled-inline-edit": "#424650",
37183682
"color-text-dropdown-footer": "#656871",
@@ -4061,10 +4025,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
40614025
"color-background-control-checked": "#42b4ff",
40624026
"color-background-control-default": "#0f141a",
40634027
"color-background-control-disabled": "#333843",
4064-
"color-background-direction-button-active": "#232b37",
4065-
"color-background-direction-button-default": "#424650",
4066-
"color-background-direction-button-disabled": "#232b37",
4067-
"color-background-direction-button-hover": "#333843",
40684028
"color-background-dropdown-item-default": "#1b232d",
40694029
"color-background-dropdown-item-dimmed": "transparent",
40704030
"color-background-dropdown-item-filter-match": "#333843",
@@ -4376,8 +4336,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
43764336
"color-text-column-sorting-icon": "#b4b4bb",
43774337
"color-text-control-disabled": "#656871",
43784338
"color-text-counter": "#a4a4ad",
4379-
"color-text-direction-button-default": "#ffffff",
4380-
"color-text-direction-button-disabled": "#656871",
43814339
"color-text-disabled": "#656871",
43824340
"color-text-disabled-inline-edit": "#b4b4bb",
43834341
"color-text-dropdown-footer": "#a4a4ad",
@@ -4726,10 +4684,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
47264684
"color-background-control-checked": "#42b4ff",
47274685
"color-background-control-default": "#161d26",
47284686
"color-background-control-disabled": "#333843",
4729-
"color-background-direction-button-active": "#232b37",
4730-
"color-background-direction-button-default": "#424650",
4731-
"color-background-direction-button-disabled": "#232b37",
4732-
"color-background-direction-button-hover": "#333843",
47334687
"color-background-dropdown-item-default": "#1b232d",
47344688
"color-background-dropdown-item-dimmed": "transparent",
47354689
"color-background-dropdown-item-filter-match": "#333843",
@@ -5041,8 +4995,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
50414995
"color-text-column-sorting-icon": "#b4b4bb",
50424996
"color-text-control-disabled": "#656871",
50434997
"color-text-counter": "#a4a4ad",
5044-
"color-text-direction-button-default": "#ffffff",
5045-
"color-text-direction-button-disabled": "#656871",
50464998
"color-text-disabled": "#656871",
50474999
"color-text-disabled-inline-edit": "#b4b4bb",
50485000
"color-text-dropdown-footer": "#a4a4ad",

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

-10
Original file line numberDiff line numberDiff line change
@@ -5690,16 +5690,6 @@ The object should contain, among others:
56905690
"optional": true,
56915691
"type": "string",
56925692
},
5693-
{
5694-
"name": "resizeHandleAriaLabel",
5695-
"optional": true,
5696-
"type": "string",
5697-
},
5698-
{
5699-
"name": "resizeHandleTooltipText",
5700-
"optional": true,
5701-
"type": "string",
5702-
},
57035693
{
57045694
"name": "statusBarGroupAriaLabel",
57055695
"optional": true,

‎src/code-editor/__integ__/code-editor.test.ts

-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ test(
142142

143143
await page.keys('Tab'); // Tab into gutter
144144
await page.keys('Tab'); // Tab into editor area
145-
await page.keys('Tab'); // Tab into drag handle
146145
await page.keys('Tab');
147146
await expect(page.isFocused(codeEditorWrapper.findSettingsButton().toSelector())).resolves.toBe(true);
148147

‎src/code-editor/__tests__/code-editor.test.tsx

+2-13
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { createWrapper } from '@cloudscape-design/test-utils-core/dom';
1010
import '../../__a11y__/to-validate-a11y';
1111
import CodeEditor, { CodeEditorProps } from '../../../lib/components/code-editor';
1212
import TestI18nProvider from '../../../lib/components/i18n/testing';
13-
import { PointerEventMock } from '../../../lib/components/internal/utils/pointer-events-mock.js';
1413
import { CodeEditorWrapper, ElementWrapper } from '../../../lib/components/test-utils/dom';
1514
import { KeyCode } from '../../internal/keycode';
1615
import {
@@ -23,18 +22,13 @@ import {
2322

2423
import resizableStyles from '../../../lib/components/code-editor/resizable-box/styles.css.js';
2524
import styles from '../../../lib/components/code-editor/styles.css.js';
26-
import dragHandleStyles from '../../../lib/components/internal/components/drag-handle/styles.css.js';
2725
import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
2826

2927
jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
3028
...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
3129
warnOnce: jest.fn(),
3230
}));
3331

34-
beforeAll(() => {
35-
(window as any).PointerEvent ??= PointerEventMock;
36-
});
37-
3832
afterEach(() => {
3933
(warnOnce as jest.Mock).mockReset();
4034
});
@@ -518,8 +512,8 @@ describe('Code editor component', () => {
518512
it('updates size when resize handle is dragged', () => {
519513
const { wrapper } = renderCodeEditor({ editorContentHeight: 10 });
520514
editorMock.resize.mockClear();
521-
fireEvent.pointerDown(wrapper.findByClassName(dragHandleStyles.handle)!.getElement());
522-
fireEvent.pointerMove(document, { clientY: 100 });
515+
fireEvent.mouseDown(wrapper.findByClassName(resizableStyles['resizable-box-handle'])!.getElement());
516+
fireEvent.mouseMove(document.body, { clientY: 100 });
523517
expect(editorMock.resize).toHaveBeenCalledTimes(1);
524518
});
525519

@@ -643,7 +637,6 @@ describe('Code editor component', () => {
643637
messages={{
644638
'code-editor': {
645639
'i18nStrings.paneCloseButtonAriaLabel': 'Custom close',
646-
'i18nStrings.resizeHandleAriaLabel': 'Custom resize handle',
647640
},
648641
}}
649642
>
@@ -654,10 +647,6 @@ describe('Code editor component', () => {
654647
act(() => emulateAceAnnotationEvent!());
655648
wrapper.findErrorsTab()!.click();
656649
expect(wrapper.findPane()!.findButton()!.getElement()).toHaveAttribute('aria-label', 'Custom close');
657-
expect(wrapper.findPane()!.find('[role=slider]')!.getElement()).toHaveAttribute(
658-
'aria-label',
659-
'Custom resize handle'
660-
);
661650
});
662651

663652
test('supports using preferences modal strings from i18n provider', () => {

‎src/code-editor/__tests__/common.ts

-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,4 @@ export const i18nStrings: CodeEditorProps.I18nStrings = {
2828
preferencesModalThemeFilteringAriaLabel: 'Filter themes aria',
2929
preferencesModalThemeFilteringClearAriaLabel: 'Clear',
3030
preferencesModalThemeFilteringPlaceholder: 'Filter themes',
31-
32-
resizeHandleAriaLabel: 'Resize handle',
33-
resizeHandleTooltipText: 'Drag or select to resize',
3431
};

‎src/code-editor/assets/resize-handler.svg

+3
Loading

‎src/code-editor/index.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,6 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
221221
onResize();
222222
fireNonCancelableEvent(onEditorContentResize, { height });
223223
}}
224-
handleAriaLabel={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}
225-
handleTooltipText={i18n('i18nStrings.resizeHandleTooltipText', i18nStrings?.resizeHandleTooltipText)}
226224
>
227225
<div
228226
ref={editorRef}
@@ -274,8 +272,6 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
274272
format => (row, column) => format({ row, column })
275273
)}
276274
closeButtonAriaLabel={i18n('i18nStrings.paneCloseButtonAriaLabel', i18nStrings?.paneCloseButtonAriaLabel)}
277-
handleAriaLabel={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}
278-
handleTooltipText={i18n('i18nStrings.resizeHandleTooltipText', i18nStrings?.resizeHandleTooltipText)}
279275
/>
280276
</div>
281277
{isPreferencesModalVisible && (

‎src/code-editor/interfaces.ts

-3
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,6 @@ export namespace CodeEditorProps {
167167
preferencesModalThemeFilteringPlaceholder?: string;
168168
preferencesModalThemeFilteringAriaLabel?: string;
169169
preferencesModalThemeFilteringClearAriaLabel?: string;
170-
171-
resizeHandleAriaLabel?: string;
172-
resizeHandleTooltipText?: string;
173170
}
174171
export interface ResizeDetail {
175172
height: number;

‎src/code-editor/pane.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ interface PaneProps {
2626

2727
cursorPositionLabel?: (row: number, column: number) => string;
2828
closeButtonAriaLabel?: string;
29-
handleAriaLabel?: string;
30-
handleTooltipText?: string;
3129

3230
onClose: () => void;
3331
onAnnotationClick: (annotation: Ace.Annotation) => void;
@@ -45,8 +43,6 @@ export const Pane = ({
4543
onAnnotationClear,
4644
cursorPositionLabel,
4745
closeButtonAriaLabel,
48-
handleAriaLabel,
49-
handleTooltipText,
5046
}: PaneProps) => {
5147
const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);
5248
const listRef = useRef<HTMLTableSectionElement>(null);
@@ -92,13 +88,7 @@ export const Pane = ({
9288

9389
return (
9490
<div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role="tabpanel" aria-labelledby={ariaLabelledBy}>
95-
<ResizableBox
96-
height={paneHeight}
97-
minHeight={MIN_HEIGHT}
98-
onResize={newHeight => setPaneHeight(newHeight)}
99-
handleAriaLabel={handleAriaLabel}
100-
handleTooltipText={handleTooltipText}
101-
>
91+
<ResizableBox height={paneHeight} minHeight={MIN_HEIGHT} onResize={newHeight => setPaneHeight(newHeight)}>
10292
<FocusLock className={styles['focus-lock']} autoFocus={true} restoreFocus={true}>
10393
<div className={styles.pane__list} tabIndex={-1}>
10494
<table className={styles.pane__table} role="presentation">

0 commit comments

Comments
 (0)