Implement new separator design (#33599)
* Remove `onFocus` and `onBlur` handlers react-resizable-panels fixed the issue where focus-visible was not working as expected, so we no longer need this bit of code. * Implement new hover/focus separator * Collapse the panel when clicking on the new focus separator * Remove `isFocusedViaKeyboard` from snapshot * Update tests and storybook * Expand panel only on double click * Add animation * Fix tests * Don't render border when type is bar * Single click to expand, double click to collapse * Change focus separator color
This commit is contained in:
R Midhun Suresh
@@ -15,7 +15,6 @@ import {
|
||||
type ResizerViewSnapshot,
|
||||
} from "@element-hq/web-shared-components";
|
||||
import { debounce } from "lodash";
|
||||
import whatInput from "what-input";
|
||||
|
||||
import SettingsStore from "../../settings/SettingsStore";
|
||||
import { SettingLevel } from "../../settings/SettingLevel";
|
||||
@@ -25,13 +24,11 @@ function getInitialState(): ResizerViewSnapshot {
|
||||
return {
|
||||
isCollapsed: true,
|
||||
initialSize: 0,
|
||||
isFocusedViaKeyboard: false,
|
||||
};
|
||||
}
|
||||
return {
|
||||
isCollapsed: false,
|
||||
initialSize: SettingsStore.getValue("RoomList.panelSize") ?? undefined,
|
||||
isFocusedViaKeyboard: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -87,12 +84,18 @@ export class ResizerViewModel
|
||||
};
|
||||
|
||||
private onSeparatorClick = (): void => {
|
||||
// When panel is collapsed, single click should expand the panel.
|
||||
if (this.panelHandle?.isCollapsed()) {
|
||||
const lastSize = SettingsStore.getValue("RoomList.panelSize");
|
||||
this.panelHandle.resize(`${lastSize ?? 100}%`);
|
||||
}
|
||||
};
|
||||
|
||||
public onDoubleClick = (): void => {
|
||||
// When the panel is expanded, double click should collapse.
|
||||
if (!this.panelHandle?.isCollapsed()) this.panelHandle?.collapse();
|
||||
};
|
||||
|
||||
public onPointerUp = (): void => {
|
||||
this.mouseClickHandler.onPointerUp();
|
||||
};
|
||||
@@ -104,28 +107,6 @@ export class ResizerViewModel
|
||||
public onPointerDown = (): void => {
|
||||
this.mouseClickHandler.onPointerDown();
|
||||
};
|
||||
|
||||
public onFocus = (): void => {
|
||||
/**
|
||||
* The intention here is to make the separator visible when it is focused by keyboard
|
||||
* navigation i.e tabbing through the app.
|
||||
*
|
||||
* There's a good reason to take this approach instead of just relying on the focus-visible
|
||||
* selector:
|
||||
* When exactly an element gets focus-visible is determined by browser heuristics and usually
|
||||
* interacting with the mouse will not give an element focus-visible.
|
||||
* However with this separator on chrome, mouse interaction occasionally gives it focus-visible.
|
||||
* The leads to flakey separator behaviour.
|
||||
*/
|
||||
const currentNavigation = whatInput.ask();
|
||||
if (currentNavigation === "keyboard") {
|
||||
this.snapshot.merge({ isFocusedViaKeyboard: true });
|
||||
}
|
||||
};
|
||||
|
||||
public onBlur = (): void => {
|
||||
this.snapshot.merge({ isFocusedViaKeyboard: false });
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
|
||||
import { waitFor } from "jest-matrix-react";
|
||||
import { type PanelImperativeHandle } from "@element-hq/web-shared-components";
|
||||
import whatInput from "what-input";
|
||||
|
||||
import { ResizerViewModel } from "../../../src/viewmodels/structures/ResizerViewModel";
|
||||
import SettingsStore from "../../../src/settings/SettingsStore";
|
||||
@@ -27,7 +26,6 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
expect(vm.getSnapshot()).toStrictEqual({
|
||||
isCollapsed: true,
|
||||
initialSize: 0,
|
||||
isFocusedViaKeyboard: false,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,7 +35,6 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
expect(vm.getSnapshot()).toStrictEqual({
|
||||
isCollapsed: false,
|
||||
initialSize: 34,
|
||||
isFocusedViaKeyboard: false,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -46,7 +43,6 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
expect(vm.getSnapshot()).toStrictEqual({
|
||||
isCollapsed: false,
|
||||
initialSize: undefined,
|
||||
isFocusedViaKeyboard: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -89,7 +85,7 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
expect(mockHandle.resize).not.toHaveBeenCalledWith("34%");
|
||||
});
|
||||
|
||||
describe("should expand panel on click()", () => {
|
||||
describe("should expand panel on double click when panel is collapsed", () => {
|
||||
it("to last non-zero width that the user set", () => {
|
||||
const vm = new ResizerViewModel();
|
||||
SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
|
||||
@@ -98,11 +94,9 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
isCollapsed: jest.fn().mockReturnValue(true),
|
||||
} as unknown as PanelImperativeHandle;
|
||||
vm.setPanelHandle(mockHandle);
|
||||
|
||||
// Simulate click
|
||||
vm.onPointerDown();
|
||||
vm.onPointerUp();
|
||||
|
||||
expect(mockHandle.resize).toHaveBeenCalledWith("34%");
|
||||
});
|
||||
|
||||
@@ -113,22 +107,23 @@ describe("LeftPanelResizerViewModel", () => {
|
||||
isCollapsed: jest.fn().mockReturnValue(true),
|
||||
} as unknown as PanelImperativeHandle;
|
||||
vm.setPanelHandle(mockHandle);
|
||||
|
||||
// Simulate click
|
||||
vm.onPointerDown();
|
||||
vm.onPointerUp();
|
||||
|
||||
expect(mockHandle.resize).toHaveBeenCalledWith("100%");
|
||||
});
|
||||
});
|
||||
|
||||
it("should set isFocusedViaKeyboard state correctly", () => {
|
||||
whatInput.ask = jest.fn().mockReturnValue("keyboard");
|
||||
it("should collapse panel on click when panel is expanded", () => {
|
||||
const vm = new ResizerViewModel();
|
||||
vm.onFocus();
|
||||
expect(vm.getSnapshot().isFocusedViaKeyboard).toStrictEqual(true);
|
||||
vm.onBlur();
|
||||
expect(vm.getSnapshot().isFocusedViaKeyboard).toStrictEqual(false);
|
||||
const mockHandle = {
|
||||
collapse: jest.fn(),
|
||||
isCollapsed: jest.fn().mockReturnValue(false),
|
||||
} as unknown as PanelImperativeHandle;
|
||||
vm.setPanelHandle(mockHandle);
|
||||
|
||||
vm.onDoubleClick();
|
||||
expect(mockHandle.collapse).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should resize to nearest whole number", () => {
|
||||
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 14 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@@ -27,11 +27,6 @@ export interface ResizerViewSnapshot {
|
||||
* This is the initial size of the panel if available; should be interpreted as percentage.
|
||||
*/
|
||||
initialSize?: number;
|
||||
/**
|
||||
* Whether the separator is currently focused by navigating
|
||||
* to it using keyboard input.
|
||||
*/
|
||||
isFocusedViaKeyboard: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -41,14 +41,9 @@ const meta = {
|
||||
component: LeftResizablePanelViewWrapper,
|
||||
// This is a structural component, so nothing to visually test.
|
||||
tags: ["autodocs", "!snapshot"],
|
||||
argTypes: {
|
||||
// This snapshot state is not relevant for this View.
|
||||
isFocusedViaKeyboard: { table: { disable: true } },
|
||||
},
|
||||
args: {
|
||||
initialSize: 20,
|
||||
isCollapsed: false,
|
||||
isFocusedViaKeyboard: false,
|
||||
onLeftPanelResize: fn(),
|
||||
setPanelHandle: fn(),
|
||||
},
|
||||
|
||||
@@ -8,12 +8,33 @@
|
||||
.separator {
|
||||
/* Necessary to avoid weird focus outlines (doubled on one side, absent on one side etc...) */
|
||||
outline-offset: -2px;
|
||||
|
||||
/* We set the separator container to relative so that the child container (activeSeparatorContainer)
|
||||
can be absolutely positioned */
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* When type=border, we just render a 1px border */
|
||||
.separator[data-separator-type="border"] {
|
||||
width: 0px;
|
||||
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
|
||||
/*
|
||||
We reserve 1px of space even though the actual separator is absolute positioned.
|
||||
This keeps the panel looking the same as when the border was part of the panel.
|
||||
*/
|
||||
width: 1px;
|
||||
|
||||
/* We can disable the browser focus ring since we show a thicker separator on focus */
|
||||
outline: none;
|
||||
|
||||
.activeSeparatorContainer {
|
||||
.activeSeparator {
|
||||
width: 0px;
|
||||
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* When type=bar, we render the 12px separator */
|
||||
@@ -28,3 +49,36 @@
|
||||
.separator:focus-visible {
|
||||
background: var(--cpd-color-bg-action-tertiary-hovered);
|
||||
}
|
||||
|
||||
/* When type=border and the user hovers/focuses the separator, we make the separator thicker */
|
||||
.separator[data-separator-type="border"]:is([data-separator="hover"], [data-separator="active"]),
|
||||
.separator[data-separator-type="border"]:focus-visible {
|
||||
.activeSeparatorContainer {
|
||||
.activeSeparator {
|
||||
width: 0px;
|
||||
border-right: 2px solid var(--cpd-color-border-interactive-secondary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container for the separator when the left panel is expanded */
|
||||
.activeSeparatorContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/*
|
||||
By making this container absolutely positioned an wide enough to cover the entire hit region,
|
||||
we're able to intercept all the pointer events.
|
||||
Without this, we'd only capture the events within a narrow 2px/1px border.
|
||||
*/
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
|
||||
.activeSeparator {
|
||||
/* Fade in/ fade out the border */
|
||||
transition: border 0.15s ease-in-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,14 +17,13 @@ import { Flex } from "../../core/utils/Flex";
|
||||
type SeparatorViewProps = ResizerViewSnapshot & SeparatorViewActions;
|
||||
|
||||
const Wrapper = ({
|
||||
onFocus,
|
||||
onBlur,
|
||||
onPointerDown,
|
||||
onPointerMove,
|
||||
onPointerUp,
|
||||
onDoubleClick,
|
||||
...snapshot
|
||||
}: SeparatorViewProps): JSX.Element => {
|
||||
const vm = useMockedViewModel(snapshot, { onFocus, onBlur, onPointerDown, onPointerMove, onPointerUp });
|
||||
const vm = useMockedViewModel(snapshot, { onPointerDown, onPointerMove, onPointerUp, onDoubleClick });
|
||||
return <SeparatorView className="Separator" vm={vm} />;
|
||||
};
|
||||
|
||||
@@ -35,13 +34,11 @@ const meta = {
|
||||
component: SeparatorViewWrapper,
|
||||
tags: ["autodocs"],
|
||||
args: {
|
||||
onFocus: fn(),
|
||||
onBlur: fn(),
|
||||
onPointerUp: fn(),
|
||||
onPointerMove: fn(),
|
||||
onPointerDown: fn(),
|
||||
onDoubleClick: fn(),
|
||||
isCollapsed: true,
|
||||
isFocusedViaKeyboard: false,
|
||||
},
|
||||
parameters: {
|
||||
design: {
|
||||
@@ -118,16 +115,17 @@ export const KeyboardFocused: Story = {
|
||||
decorators: [(Story) => commonDecorator(Story)],
|
||||
args: {
|
||||
isCollapsed: false,
|
||||
isFocusedViaKeyboard: true,
|
||||
},
|
||||
play: async ({ canvas, canvasElement }) => {
|
||||
const separator = canvas.getByRole("separator");
|
||||
separator.focus();
|
||||
// Wait for animations to finish
|
||||
await new Promise((r) => setTimeout(r, 500));
|
||||
await expect(canvasElement).toMatchImageSnapshot();
|
||||
},
|
||||
};
|
||||
|
||||
export const Hover: Story = {
|
||||
export const HoverWhenCollapsed: Story = {
|
||||
// We'll manually take a screenshot for this story
|
||||
tags: ["autodocs", "!snapshot"],
|
||||
decorators: [
|
||||
@@ -159,3 +157,47 @@ export const Hover: Story = {
|
||||
await expect(canvasElement).toMatchImageSnapshot();
|
||||
},
|
||||
};
|
||||
|
||||
export const HoverWhenExpanded: Story = {
|
||||
// We'll manually take a screenshot for this story
|
||||
tags: ["autodocs", "!snapshot"],
|
||||
args: {
|
||||
isCollapsed: false,
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
height: "600px",
|
||||
}}
|
||||
>
|
||||
<ResizableGroup>
|
||||
<div
|
||||
style={{
|
||||
height: "600px",
|
||||
width: "200px",
|
||||
}}
|
||||
/>
|
||||
<Panel collapsible defaultSize="0" minSize="200px" maxSize="400px">
|
||||
<Flex tabIndex={0} align="center" justify="center">
|
||||
LEFT CONTENT
|
||||
</Flex>
|
||||
</Panel>
|
||||
<Story />
|
||||
<Panel>
|
||||
<Flex align="center" justify="center">
|
||||
MAIN CONTENT
|
||||
</Flex>
|
||||
</Panel>
|
||||
</ResizableGroup>
|
||||
</div>
|
||||
),
|
||||
],
|
||||
play: async ({ canvas, canvasElement }) => {
|
||||
const separator = canvas.getByRole("separator");
|
||||
separator.dataset.separator = "hover";
|
||||
// Wait for animations to finish
|
||||
await new Promise((r) => setTimeout(r, 500));
|
||||
await expect(canvasElement).toMatchImageSnapshot();
|
||||
},
|
||||
};
|
||||
|
||||
@@ -15,17 +15,16 @@ import * as stories from "./SeparatorView.stories";
|
||||
import { BaseViewModel } from "../../core/viewmodel";
|
||||
import { ResizableGroup, Panel, type ResizerViewSnapshot, SeparatorView, type SeparatorViewActions } from "..";
|
||||
|
||||
const { Default, LeftPanelExpanded, KeyboardFocused } = composeStories(stories);
|
||||
const { Default, LeftPanelExpanded, KeyboardFocused, HoverWhenCollapsed, HoverWhenExpanded } = composeStories(stories);
|
||||
|
||||
class MockViewModel extends BaseViewModel<ResizerViewSnapshot, unknown> implements SeparatorViewActions {
|
||||
public constructor(snapshot: ResizerViewSnapshot) {
|
||||
super(undefined, snapshot);
|
||||
}
|
||||
public onBlur: () => void = vi.fn();
|
||||
public onFocus: () => void = vi.fn();
|
||||
public onPointerUp: () => void = vi.fn();
|
||||
public onPointerMove: () => void = vi.fn();
|
||||
public onPointerDown: () => void = vi.fn();
|
||||
public onDoubleClick: () => void = vi.fn();
|
||||
}
|
||||
|
||||
function renderPanel(initialSnapshot?: Partial<ResizerViewSnapshot>): MockViewModel {
|
||||
@@ -57,6 +56,16 @@ describe("<SeparatorView />", () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders HoverWhenCollapsed story", () => {
|
||||
const { container } = render(<HoverWhenCollapsed />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders HoverWhenExpanded story", () => {
|
||||
const { container } = render(<HoverWhenExpanded />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should call onPointerDown and onPointerUp on pointer events", async () => {
|
||||
const vm = renderPanel();
|
||||
const separator = screen.getByRole("separator");
|
||||
@@ -65,12 +74,10 @@ describe("<SeparatorView />", () => {
|
||||
expect(vm.onPointerUp).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it("should call onFocus and onBlur when receiving/loosing focus", async () => {
|
||||
it("should call onDoubleClick on double click", async () => {
|
||||
const vm = renderPanel();
|
||||
const separator = screen.getByRole("separator");
|
||||
separator.focus();
|
||||
expect(vm.onFocus).toHaveBeenCalled();
|
||||
separator.blur();
|
||||
expect(vm.onBlur).toHaveBeenCalled();
|
||||
await userEvent.dblClick(separator);
|
||||
expect(vm.onDoubleClick).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -33,14 +33,9 @@ export interface SeparatorViewActions {
|
||||
onPointerDown: () => void;
|
||||
|
||||
/**
|
||||
* onFocus handler for the separator.
|
||||
* onDoubleClick handler for the separator.
|
||||
*/
|
||||
onFocus: () => void;
|
||||
|
||||
/**
|
||||
* onBlur handler for the separator.
|
||||
*/
|
||||
onBlur: () => void;
|
||||
onDoubleClick: () => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -53,14 +48,14 @@ interface Props {
|
||||
*/
|
||||
export function SeparatorView({ vm, className }: Props): React.ReactNode {
|
||||
const { translate: _t } = useI18n();
|
||||
const { isCollapsed, isFocusedViaKeyboard } = useViewModel(vm);
|
||||
const { isCollapsed } = useViewModel(vm);
|
||||
|
||||
/**
|
||||
* There are two types of separator:
|
||||
* - bar: This shows a thick bar separator with a resize icon in the middle; shown when the panel is collapsed.
|
||||
* - border: This is just a 1px wide separator; shown when the panel is expanded.
|
||||
* - border: This is just a thin separator; shown when the panel is expanded.
|
||||
*/
|
||||
const type = isCollapsed || isFocusedViaKeyboard ? "bar" : "border";
|
||||
const type = isCollapsed ? "bar" : "border";
|
||||
|
||||
const barContent = (
|
||||
<Tooltip description={_t("left_panel|separator_label")} placement="right">
|
||||
@@ -75,19 +70,29 @@ export function SeparatorView({ vm, className }: Props): React.ReactNode {
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
/**
|
||||
* This border is:
|
||||
* - a 1px border that separates the left panel and main content.
|
||||
* - a 2px border when the panel is expanded and the user is interacting with the separator.
|
||||
*/
|
||||
const border = (
|
||||
<div className={styles.activeSeparatorContainer}>
|
||||
<div className={styles.activeSeparator} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Separator
|
||||
className={classNames(styles.separator, className)}
|
||||
onPointerUp={vm.onPointerUp}
|
||||
onPointerMove={vm.onPointerMove}
|
||||
onPointerDown={vm.onPointerDown}
|
||||
onFocus={vm.onFocus}
|
||||
onBlur={vm.onBlur}
|
||||
aria-label={_t("left_panel|separator_label")}
|
||||
data-separator-type={type}
|
||||
onDoubleClick={vm.onDoubleClick}
|
||||
disableDoubleClick
|
||||
>
|
||||
{type === "bar" ? barContent : null}
|
||||
{type === "bar" ? barContent : border}
|
||||
</Separator>
|
||||
);
|
||||
}
|
||||
|
||||
+170
-9
@@ -80,7 +80,7 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
|
||||
exports[`<SeparatorView /> > renders HoverWhenCollapsed story 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="height: 600px;"
|
||||
@@ -95,7 +95,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-2"
|
||||
id="react-use-id-2"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 49.751 1 0px; overflow: visible;"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
@@ -115,7 +115,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="99.502"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="49.751"
|
||||
aria-valuenow="0"
|
||||
class="SeparatorView-module_separator Separator"
|
||||
data-separator="inactive"
|
||||
data-separator-type="bar"
|
||||
@@ -142,7 +142,160 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-4"
|
||||
id="react-use-id-4"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50.249 1 0px; overflow: visible;"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
class="Flex-module_flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
MAIN CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SeparatorView /> > renders HoverWhenExpanded story 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="height: 600px;"
|
||||
>
|
||||
<div
|
||||
data-group="true"
|
||||
data-testid="react-use-id-1"
|
||||
id="react-use-id-1"
|
||||
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
style="height: 600px; width: 200px;"
|
||||
/>
|
||||
<div
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-2"
|
||||
id="react-use-id-2"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
class="Flex-module_flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
tabindex="0"
|
||||
>
|
||||
LEFT CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-controls="react-use-id-2"
|
||||
aria-label="Click or drag to expand"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="SeparatorView-module_separator Separator"
|
||||
data-separator="inactive"
|
||||
data-separator-type="border"
|
||||
data-testid="react-use-id-3"
|
||||
id="react-use-id-3"
|
||||
role="separator"
|
||||
style="flex: 0 0 auto; touch-action: none;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparatorContainer"
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparator"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-4"
|
||||
id="react-use-id-4"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
class="Flex-module_flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
MAIN CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="height: 600px;"
|
||||
>
|
||||
<div
|
||||
data-group="true"
|
||||
data-testid="react-use-id-1"
|
||||
id="react-use-id-1"
|
||||
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-2"
|
||||
id="react-use-id-2"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.426 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
>
|
||||
<div
|
||||
class="Flex-module_flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
tabindex="0"
|
||||
>
|
||||
LEFT CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-controls="react-use-id-2"
|
||||
aria-label="Click or drag to expand"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="96.852"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="48.426"
|
||||
class="SeparatorView-module_separator Separator"
|
||||
data-separator="inactive"
|
||||
data-separator-type="border"
|
||||
data-testid="react-use-id-3"
|
||||
id="react-use-id-3"
|
||||
role="separator"
|
||||
style="flex: 0 0 auto; touch-action: none;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparatorContainer"
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparator"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-4"
|
||||
id="react-use-id-4"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.574 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
@@ -175,7 +328,7 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-2"
|
||||
id="react-use-id-2"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.309 1 0px; overflow: visible;"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.426 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
@@ -193,9 +346,9 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
|
||||
aria-controls="react-use-id-2"
|
||||
aria-label="Click or drag to expand"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="96.618"
|
||||
aria-valuemax="96.852"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="48.309"
|
||||
aria-valuenow="48.426"
|
||||
class="SeparatorView-module_separator Separator"
|
||||
data-separator="inactive"
|
||||
data-separator-type="border"
|
||||
@@ -204,12 +357,20 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
|
||||
role="separator"
|
||||
style="flex: 0 0 auto; touch-action: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparatorContainer"
|
||||
>
|
||||
<div
|
||||
class="SeparatorView-module_activeSeparator"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-panel="true"
|
||||
data-testid="react-use-id-4"
|
||||
id="react-use-id-4"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.691 1 0px; overflow: visible;"
|
||||
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.574 1 0px; overflow: visible;"
|
||||
>
|
||||
<div
|
||||
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
|
||||
|
||||
Reference in New Issue
Block a user