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

Jump to bottom

Convert table actions hover UX/behavior #7640

Merged
merged 6 commits into from
Apr 2, 2024
Merged

Convert table actions hover UX/behavior #7640

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b0d45b2
Fix strut issue in action cells
cee-chen Mar 28, 2024
4df25f2
Convert initial styles for desktop action cells
cee-chen Apr 1, 2024
2c6f412
Clean up/convert responsive actions hover CSS to Emotion
cee-chen Apr 1, 2024
14b17f7
🔥 Remove the `showOnHover` prop from EuiTableRowCell
cee-chen Apr 1, 2024
4a6a8e8
♻️ Move cell `showOnHover` API to basic table `actions` API
cee-chen Apr 1, 2024
22b40da
Fix strut CSS for expander cells as well
cee-chen Apr 2, 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
6 changes: 3 additions & 3 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
Expand Down Expand Up @@ -448,7 +448,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
Expand Down Expand Up @@ -569,7 +569,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
Expand Down
8 changes: 1 addition & 7 deletions src/components/basic_table/basic_table.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,6 @@ export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css`
// Fix to make the loading indicator position correctly in Safari
// For whatever annoying reason, Safari doesn't respect `position: relative;`
// on `tbody` without `position: relative` on the parent `table`
export const safariLoadingWorkaround = () => css`
export const safariLoadingWorkaround = css`
position: relative;
`;

// Unsets the extra height caused by tooltip/popover wrappers around table action buttons
// Without this, the row height jumps whenever actions are disabled
export const euiBasicTableActionsWrapper = css`
line-height: 1;
`;
2 changes: 0 additions & 2 deletions src/components/basic_table/basic_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ import { EuiTableSortMobileProps } from '../table/mobile/table_sort_mobile';
import {
euiBasicTableBodyLoading,
safariLoadingWorkaround,
euiBasicTableActionsWrapper,
} from './basic_table.styles';

type DataTypeProfiles = Record<
Expand Down Expand Up @@ -1174,7 +1173,6 @@ export class EuiBasicTable<T extends object = any> extends Component<
align="right"
textOnly={false}
hasActions={hasCustomActions ? 'custom' : true}
css={euiBasicTableActionsWrapper}
>
<ExpandedItemActions
actions={actualActions}
Expand Down
6 changes: 6 additions & 0 deletions src/components/table/table_row_cell.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
color: ${euiTheme.colors.text};
`,

hasActions: css`
/* Unsets the extra strut caused by inline-block display of buttons/icons/tooltips.
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
Without this, the row height jumps whenever actions are disabled. */
line-height: 1;
`,

// valign
middle: css`
vertical-align: middle;
Expand Down
1 change: 1 addition & 0 deletions src/components/table/table_row_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
const styles = useEuiMemoizedStyles(euiTableRowCellStyles);
const cssStyles = [
styles.euiTableRowCell,
hasActions && styles.hasActions,
styles[valign],
...(isResponsive
? [
Expand Down