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.

Sign up for GitHub

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

[EuiResizableButton] Add new indicator style prop #7455

Merged
merged 11 commits into from
Jan 12, 2024
Merged

[EuiResizableButton] Add new indicator style prop #7455

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2c0a7cc
Add new `showIndicator` prop/flag
cee-chen Jan 9, 2024
56121d0
Split out grab handle vs plain border CSS
cee-chen Jan 9, 2024
b400720
[misc cleanup] Update comments
cee-chen Jan 9, 2024
c8fd6f7
[docs] Update with example
cee-chen Jan 9, 2024
9d43c05
[EuiFlyoutResizable] Update to use new `showIndicator={false}` prop
cee-chen Jan 9, 2024
fa0cd4f
changelog
cee-chen Jan 9, 2024
9e5c42a
Fix Safari visual bug when dragging but not hovered directly over button
cee-chen Jan 10, 2024
e91f0af
[PR feedback] Improve prop name/API & documentation
cee-chen Jan 11, 2024
e5c1313
Update tests/snapshots
cee-chen Jan 11, 2024
60d3439
Merge branch 'main' into resizable-button-showIndicator
cee-chen Jan 11, 2024
1812e86
Update downstream API usages/references :facepalm:
cee-chen Jan 12, 2024
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
2 changes: 1 addition & 1 deletion src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`EuiResizableButton renders 1`] = `
<div>
<button
aria-label="aria-label"
class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-vertical-center-euiTestCss"
class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-grabHandle-vertical-vertical-center-euiTestCss"
data-test-subj="test subject string"
type="button"
/>
Expand Down
159 changes: 106 additions & 53 deletions src/components/resizable_container/resizable_button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,15 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
flex-shrink: 0;
display: flex;
justify-content: center;
gap: ${mathWithUnits(grabHandleHeight, (x) => x * 2)};

&:disabled {
display: none;
}

/* 1 */
&:hover,
&:focus {
gap: 0;
justify-content: center;
}

${euiCanAnimate} {
transition: gap ${transition}, justify-content ${transition};
}

&::before,
&::after {
content: '';
display: block;
background-color: ${euiTheme.colors.darkestShade};
transform: translateZ(0); /* 3 */

${euiCanAnimate} {
transition: width ${transition}, height ${transition},
Expand All @@ -66,11 +52,6 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
&::before,
&::after {
background-color: ${euiTheme.colors.mediumShade};

/* Delay transition on hover so animation is not accidentally triggered on mouse over */
${euiCanAnimate} {
transition-delay: ${transitionSpeed};
}
}
}

Expand All @@ -97,52 +78,124 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('height', '100%')}
${logicalCSS('width', buttonSize)}
margin-inline: ${mathWithUnits(buttonSize, (x) => x / -2)};

&::before,
&::after {
${logicalCSS('width', grabHandleHeight)}
${logicalCSS('height', grabHandleWidth)}
margin-block: ${euiTheme.size.base}; /* 2 */
}

/* 1 */
&:hover,
&:focus,
&:active {
&::before,
&::after {
${logicalCSS('height', '100%')}
margin-block: 0; /* 2 */
transform: none; /* 3 */
}
}
`,
vertical: css`
flex-direction: column;
cursor: row-resize;
${logicalCSS('width', '100%')}
${logicalCSS('height', buttonSize)}
margin-block: ${mathWithUnits(buttonSize, (x) => x / -2)};
`,
border: {
border: css`
&::before,
&::after {
background-color: ${euiTheme.border.color};
}
`,
horizontal: css`
&::before {
${logicalCSS('width', euiTheme.border.width.thin)}
${logicalCSS('height', '100%')}
}

&::before,
&::after {
${logicalCSS('height', grabHandleHeight)}
${logicalCSS('width', grabHandleWidth)}
margin-inline: ${euiTheme.size.base}; /* 2 */
}
&:hover,
&:focus,
&:active {
&::after {
${logicalCSS('width', euiTheme.border.width.thin)}
${logicalCSS('height', '100%')}
}
}
`,
vertical: css`
&::before {
${logicalCSS('height', euiTheme.border.width.thin)}
${logicalCSS('width', '100%')}
}

&:hover,
&:focus,
&:active {
&::after {
${logicalCSS('height', euiTheme.border.width.thin)}
${logicalCSS('width', '100%')}
}
}
`,
},
grabHandle: {
grabHandle: css`
gap: ${mathWithUnits(grabHandleHeight, (x) => x * 2)};

/* 1 */
&:hover,
&:focus {
gap: 0;
}

${euiCanAnimate} {
transition: gap ${transition};
}

/* 1 */
&:hover,
&:focus,
&:active {
&::before,
&::after {
${logicalCSS('width', '100%')}
margin-inline: 0; /* 2 */
transform: none; /* 3 */
background-color: ${euiTheme.colors.darkestShade};
transform: translateZ(0); /* 3 */
}
}
`,

/* Lighten color on :hover */
&:hover {
&::before,
&::after {
/* Delay transition on hover so animation is not accidentally triggered on mouse over */
${euiCanAnimate} {
transition-delay: ${transitionSpeed};
}
}
}
`,
horizontal: css`
&::before,
&::after {
${logicalCSS('width', grabHandleHeight)}
${logicalCSS('height', grabHandleWidth)}
margin-block: ${euiTheme.size.base}; /* 2 */
}

/* 1 */
&:hover,
&:focus,
&:active {
&::before,
&::after {
${logicalCSS('height', '100%')}
margin-block: 0; /* 2 */
transform: none; /* 3 */
}
}
`,
vertical: css`
&::before,
&::after {
${logicalCSS('height', grabHandleHeight)}
${logicalCSS('width', grabHandleWidth)}
margin-inline: ${euiTheme.size.base}; /* 2 */
}

/* 1 */
&:hover,
&:focus,
&:active {
&::before,
&::after {
${logicalCSS('width', '100%')}
margin-inline: 0; /* 2 */
transform: none; /* 3 */
}
}
`,
},
alignIndicator: {
center: css`
align-items: center;
Expand Down
9 changes: 7 additions & 2 deletions src/components/resizable_container/resizable_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,17 @@ export const EuiResizableButton = forwardRef<
) => {
const classes = classNames('euiResizableButton', className);

const resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
const indicatorType = showIndicator ? 'grabHandle' : 'border';

const euiTheme = useEuiTheme();
const styles = euiResizableButtonStyles(euiTheme);
const cssStyles = [
styles.euiResizableButton,
isHorizontal ? styles.horizontal : styles.vertical,
styles.alignIndicator[alignIndicator],
showIndicator ? styles.grabHandle.grabHandle : styles.border.border,
styles[indicatorType][resizeDirection],
styles[resizeDirection],
showIndicator && styles.alignIndicator[alignIndicator],
];

return (
Expand Down