Skip to content

Commit

Permalink
Pangolin 3072: Header cell updates (#2629)
Browse files Browse the repository at this point in the history 
* fix(rebase): update design tokens and header-cell.styles.tsx to resolve merge conflicts

* fix(rebase): update header-cell.styles.tsx to resolve merge conflict

* feat(header cell updates): remove unused font-size-for-table-header decision token

* feat(header cell updates): remove unused value from sortableHeaderProps in header-cell.tsx

* feat(header cell): fix merge conflicts in rebase

* fix(design tokens): remove unused avatar design tokens left over from rebase
  • Loading branch information
@ByronDWall
ByronDWall authored Oct 30, 2023
1 parent 4e6399f commit f69f396
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 39 deletions.
6 changes: 6 additions & 0 deletions .changeset/rich-avocados-live.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@commercetools-uikit/data-table': minor
'@commercetools-uikit/design-system': minor
---

Update data table header styles, clamp header cell label to not extend past 2 lines in height, update and animate header cell sorting icons
8 changes: 4 additions & 4 deletions design-system/materials/custom-properties.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@
95%
);
--background-color-for-table-cell-when-hovered: hsl(232, 18%, 98%);
--background-color-for-table-header: hsl(232, 18%, 95%);
--background-color-for-table-header: hsl(232, 18%, 98%);
--background-color-for-tag: hsl(232, 18%, 95%);
--background-color-for-tag-warning: hsl(
25.110132158590307,
Expand Down Expand Up @@ -334,7 +334,7 @@
--border-color-for-button-as-icon-as-primary: hsl(232, 18%, 80%);
--border-color-for-button-as-icon-when-disabled: #fff;
--border-color-for-table-header: #fff;
--border-color-for-table-header-as-bottom: hsl(232, 18%, 90%);
--border-color-for-table-header-as-bottom: hsl(232, 18%, 95%);
--border-color-for-table-manager-droppable-list: hsl(232, 18%, 80%);
--border-color-for-collapsible-panel-header: hsl(232, 18%, 90%);
--border-color-for-stamp-when-error: hsl(339.1304347826087, 100%, 85%);
Expand Down Expand Up @@ -440,7 +440,7 @@
--font-color-for-link-as-secondary: #1a1a1a;
--font-color-for-link-as-primary-when-active: hsl(175, 55%, 45%);
--font-color-for-link-as-secondary-when-active: hsl(175, 55%, 45%);
--font-color-for-table-header: #1a1a1a;
--font-color-for-table-header: hsl(232, 18%, 40%);
--font-color-for-localized-input-label: hsl(232, 18%, 60%);
--font-color-for-view-switcher: hsl(232, 18%, 40%);
--font-color-for-view-switcher-when-disabled: hsl(232, 18%, 60%);
Expand Down Expand Up @@ -539,7 +539,7 @@
--font-weight-for-text-as-caption: 400;
--font-weight-for-text-as-detail: 400;
--font-weight-for-button: 500;
--font-weight-for-table-header: 600;
--font-weight-for-table-header: 500;
--font-weight-for-text-as-bold: 600;
--margin-for-table-header: 8px;
--margin-for-table-cell-as-condensed: 8px;
Expand Down
8 changes: 4 additions & 4 deletions design-system/materials/custom-properties.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
"--background-color-for-input-when-readonly": "hsl(232, 18%, 95%)",
"--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
"--background-color-for-table-cell-when-hovered": "hsl(232, 18%, 98%)",
"--background-color-for-table-header": "hsl(232, 18%, 95%)",
"--background-color-for-table-header": "hsl(232, 18%, 98%)",
"--background-color-for-tag": "hsl(232, 18%, 95%)",
"--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
"--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
Expand Down Expand Up @@ -258,7 +258,7 @@
"--border-color-for-button-as-icon-as-primary": "hsl(232, 18%, 80%)",
"--border-color-for-button-as-icon-when-disabled": "#fff",
"--border-color-for-table-header": "#fff",
"--border-color-for-table-header-as-bottom": "hsl(232, 18%, 90%)",
"--border-color-for-table-header-as-bottom": "hsl(232, 18%, 95%)",
"--border-color-for-table-manager-droppable-list": "hsl(232, 18%, 80%)",
"--border-color-for-collapsible-panel-header": "hsl(232, 18%, 90%)",
"--border-color-for-stamp-when-error": "hsl(339.1304347826087, 100%, 85%)",
Expand Down Expand Up @@ -338,7 +338,7 @@
"--font-color-for-link-as-secondary": "#1a1a1a",
"--font-color-for-link-as-primary-when-active": "hsl(175, 55%, 45%)",
"--font-color-for-link-as-secondary-when-active": "hsl(175, 55%, 45%)",
"--font-color-for-table-header": "#1a1a1a",
"--font-color-for-table-header": "hsl(232, 18%, 40%)",
"--font-color-for-localized-input-label": "hsl(232, 18%, 60%)",
"--font-color-for-view-switcher": "hsl(232, 18%, 40%)",
"--font-color-for-view-switcher-when-disabled": "hsl(232, 18%, 60%)",
Expand Down Expand Up @@ -429,7 +429,7 @@
"--font-weight-for-text-as-caption": "400",
"--font-weight-for-text-as-detail": "400",
"--font-weight-for-button": "500",
"--font-weight-for-table-header": "600",
"--font-weight-for-table-header": "500",
"--font-weight-for-text-as-bold": "600",
"--margin-for-table-header": "8px",
"--margin-for-table-cell-as-condensed": "8px",
Expand Down
8 changes: 4 additions & 4 deletions design-system/materials/internals/definition.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ decisionGroupsByTheme:
background-color-for-table-cell-when-hovered:
choice: color-neutral-98
background-color-for-table-header:
choice: color-neutral-95
choice: color-neutral-98
background-color-for-tag:
choice: color-neutral-95
background-color-for-tag-warning:
Expand Down Expand Up @@ -696,7 +696,7 @@ decisionGroupsByTheme:
border-color-for-table-header:
choice: color-surface
border-color-for-table-header-as-bottom:
choice: color-neutral-90
choice: color-neutral-95
border-color-for-table-manager-droppable-list:
choice: color-neutral
border-color-for-collapsible-panel-header:
Expand Down Expand Up @@ -876,7 +876,7 @@ decisionGroupsByTheme:
font-color-for-link-as-secondary-when-active:
choice: color-primary
font-color-for-table-header:
choice: color-solid
choice: color-neutral-40
font-color-for-localized-input-label:
choice: color-neutral-60
font-color-for-view-switcher:
Expand Down Expand Up @@ -1099,7 +1099,7 @@ decisionGroupsByTheme:
font-weight-for-button:
choice: font-weight-500
font-weight-for-table-header:
choice: font-weight-600
choice: font-weight-500
font-weight-for-text-as-bold:
choice: font-weight-600

Expand Down
17 changes: 9 additions & 8 deletions design-system/src/design-tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export const themes = {
backgroundColorForInputWhenActive:
'hsl(203.05555555555554, 93.9130434783%, 95%)',
backgroundColorForTableCellWhenHovered: 'hsl(232, 18%, 98%)',
backgroundColorForTableHeader: 'hsl(232, 18%, 95%)',
backgroundColorForTableHeader: 'hsl(232, 18%, 98%)',
backgroundColorForTag: 'hsl(232, 18%, 95%)',
backgroundColorForTagWarning:
'hsl(25.110132158590307, 89.0196078431%, 95%)',
Expand Down Expand Up @@ -280,7 +280,7 @@ export const themes = {
borderColorForButtonAsIconAsPrimary: 'hsl(232, 18%, 80%)',
borderColorForButtonAsIconWhenDisabled: '#fff',
borderColorForTableHeader: '#fff',
borderColorForTableHeaderAsBottom: 'hsl(232, 18%, 90%)',
borderColorForTableHeaderAsBottom: 'hsl(232, 18%, 95%)',
borderColorForTableManagerDroppableList: 'hsl(232, 18%, 80%)',
borderColorForCollapsiblePanelHeader: 'hsl(232, 18%, 90%)',
borderColorForStampWhenError: 'hsl(339.1304347826087, 100%, 85%)',
Expand Down Expand Up @@ -368,7 +368,7 @@ export const themes = {
fontColorForLinkAsSecondary: '#1a1a1a',
fontColorForLinkAsPrimaryWhenActive: 'hsl(175, 55%, 45%)',
fontColorForLinkAsSecondaryWhenActive: 'hsl(175, 55%, 45%)',
fontColorForTableHeader: '#1a1a1a',
fontColorForTableHeader: 'hsl(232, 18%, 40%)',
fontColorForLocalizedInputLabel: 'hsl(232, 18%, 60%)',
fontColorForViewSwitcher: 'hsl(232, 18%, 40%)',
fontColorForViewSwitcherWhenDisabled: 'hsl(232, 18%, 60%)',
Expand Down Expand Up @@ -460,7 +460,7 @@ export const themes = {
fontWeightForTextAsCaption: '400',
fontWeightForTextAsDetail: '400',
fontWeightForButton: '500',
fontWeightForTableHeader: '600',
fontWeightForTableHeader: '500',
fontWeightForTextAsBold: '600',
marginForTableHeader: '8px',
marginForTableCellAsCondensed: '8px',
Expand Down Expand Up @@ -796,7 +796,7 @@ const designTokens = {
backgroundColorForTableCellWhenHovered:
'var(--background-color-for-table-cell-when-hovered, hsl(232, 18%, 98%))',
backgroundColorForTableHeader:
'var(--background-color-for-table-header, hsl(232, 18%, 95%))',
'var(--background-color-for-table-header, hsl(232, 18%, 98%))',
backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))',
backgroundColorForTagWarning:
'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
Expand Down Expand Up @@ -924,7 +924,7 @@ const designTokens = {
'var(--border-color-for-button-as-icon-when-disabled, #fff)',
borderColorForTableHeader: 'var(--border-color-for-table-header, #fff)',
borderColorForTableHeaderAsBottom:
'var(--border-color-for-table-header-as-bottom, hsl(232, 18%, 90%))',
'var(--border-color-for-table-header-as-bottom, hsl(232, 18%, 95%))',
borderColorForTableManagerDroppableList:
'var(--border-color-for-table-manager-droppable-list, hsl(232, 18%, 80%))',
borderColorForCollapsiblePanelHeader:
Expand Down Expand Up @@ -1067,7 +1067,8 @@ const designTokens = {
'var(--font-color-for-link-as-primary-when-active, hsl(175, 55%, 45%))',
fontColorForLinkAsSecondaryWhenActive:
'var(--font-color-for-link-as-secondary-when-active, hsl(175, 55%, 45%))',
fontColorForTableHeader: 'var(--font-color-for-table-header, #1a1a1a)',
fontColorForTableHeader:
'var(--font-color-for-table-header, hsl(232, 18%, 40%))',
fontColorForLocalizedInputLabel:
'var(--font-color-for-localized-input-label, hsl(232, 18%, 60%))',
fontColorForViewSwitcher:
Expand Down Expand Up @@ -1208,7 +1209,7 @@ const designTokens = {
fontWeightForTextAsCaption: 'var(--font-weight-for-text-as-caption, 400)',
fontWeightForTextAsDetail: 'var(--font-weight-for-text-as-detail, 400)',
fontWeightForButton: 'var(--font-weight-for-button, 500)',
fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
fontWeightForTableHeader: 'var(--font-weight-for-table-header, 500)',
fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
marginForTableHeader: 'var(--margin-for-table-header, 8px)',
marginForTableCellAsCondensed:
Expand Down
106 changes: 92 additions & 14 deletions packages/components/data-table/src/header-cell.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,74 @@
import { css } from '@emotion/react';
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { getCellInnerStyles } from './cell.styles';
import { designTokens } from '@commercetools-uikit/design-system';
import type { THeaderCell } from './header-cell';

const getButtonStyle = () => css`
cursor: pointer;
/* remove user-agent button styles */
border: none;
background: none;
text-decoration: none;
color: inherit;
font: inherit;
font-size: ${designTokens.fontSizeForTable};
font-size: ${designTokens.fontSize10};
font-family: inherit;
`;

/* When a sortable header is deselected,
* (i.e. when another sortable header is selected)
* the AngleUpDown is animated with fadeIn
*
* When the user hovers over a sortable header that
* is not the active sorted column, the icon for
* the current sort direction is animated with fadeIn
*/
const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;

/* When a sortable header is activated/selected,
* and the sort direction is 'desc', the ArrowDown
* icon is animated with rotateClockwise
*/
const rotateClockwise = keyframes`
from {
transform: rotate(-180deg);
} to {
transform: rotate(0deg);
}
`;

/* When a sortable header is activated/selected,
* and the sort direction is 'asc', the ArrowUp
* icon is animated with rotateCounterClockwise
*/
const rotateCounterClockwise = keyframes`
from {
transform: rotate(180deg);
} to {
transform: rotate(0deg);
}
`;

/* A sortable header has the two arrow svg icons
* GIVEN column is sortable and is not focused
* THEN AngleUpDown icon is shown (default behaviour)
* AND AngleUp or AngleDown icon is not shown
* AND ArrowUp or ArrowDown icon is not shown
*
* GIVEN column is sortable and foucsed
* GIVEN column is sortable and foucsed or hovered
* THEN AngleUpDown icon is hidden
* AND AngleUp or AngleDown icon is shown
* AND ArrowUp or ArrowDown icon is shown
*/
type TGetSortableHeaderStyles = {
isActive?: boolean;
label?: 'asc' | 'desc';
};

const getSortableHeaderStyles = (props: TGetSortableHeaderStyles) => css`
Expand All @@ -37,18 +78,25 @@ const getSortableHeaderStyles = (props: TGetSortableHeaderStyles) => css`
svg[data-icon-state='inactive'],
svg[data-icon-state='active'] {
margin-left: ${designTokens.spacing20};
margin-left: ${designTokens.spacing10};
flex-shrink: 0;
}
svg[data-icon-state='inactive'] {
display: ${props.isActive ? 'none' : 'inline-block'};
animation: ${fadeIn} 150ms ease-in-out;
}
svg[data-icon-state='active'] {
display: ${props.isActive ? 'inline-block' : 'none'};
animation: ${props.isActive &&
css`
${props.label === 'asc'
? rotateCounterClockwise
: rotateClockwise} 150ms ease-in-out
`};
}
/* for cases where svgs have a predefined fill */
> svg * {
fill: ${designTokens.fontColorForTableHeader} !important;
fill: ${designTokens.colorNeutral60} !important;
}
:hover,
Expand All @@ -58,6 +106,10 @@ const getSortableHeaderStyles = (props: TGetSortableHeaderStyles) => css`
}
svg[data-icon-state='active'] {
display: inline-block;
animation: ${!props.isActive &&
css`
${fadeIn} 150ms ease-in-out
`};
}
}
`;
Expand All @@ -71,7 +123,7 @@ type THeaderCellInner = Pick<
const HeaderCellInner = styled.div<THeaderCellInner>`
box-sizing: border-box;
display: flex;
justify-content: space-between;
justify-content: flex-start;
padding: 0
${(props) =>
props.isCondensed
Expand All @@ -89,8 +141,8 @@ type TBaseHeaderCell = {
shouldClipContent?: boolean;
};
const BaseHeaderCell = styled.th<TBaseHeaderCell>`
color: ${designTokens.fontColorForTableHeader};
background-color: ${designTokens.backgroundColorForTableHeader};
color: ${designTokens.colorNeutral40};
background-color: ${designTokens.colorNeutral98};
position: ${(props) =>
props.disableHeaderStickiness ? 'relative' : 'sticky'};
Expand All @@ -100,8 +152,22 @@ const BaseHeaderCell = styled.th<TBaseHeaderCell>`
/* remove user-agent styles */
padding: 0;
font-weight: ${designTokens.fontWeightForTableHeader};
font-size: ${designTokens.fontSizeForTable};
font-weight: ${designTokens.fontWeight500};
font-size: ${designTokens.fontSize10};
/**
* bottom border that doesn't overshadow the resize indicator
*/
:after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: ${designTokens.borderWidth1};
bottom: 0;
left: 0;
background-color: ${designTokens.colorNeutral95};
}
/* this ensures that, when dragging this header's column resizer
it remains above the rest of the headers, preventing accidental hovers/flickering */
Expand All @@ -116,11 +182,22 @@ const BaseHeaderCell = styled.th<TBaseHeaderCell>`
`;

const HeaderLabelWrapper = styled.div`
display: inline-flex;
/* ensure height stays the same even if label is empty
1.4em = default line-height */
min-height: 1.4em;
margin: ${designTokens.marginForTableHeader} 0;
flex: 1;
flex: 0 0 fit-content;
`;

const HeaderLabelTextWrapper = styled.span`
/* ensure that the header text truncates on the second line
https://css-tricks.com/line-clampin/#aa-the-standardized-way */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
`;

const HeaderIconWrapper = styled.div`
Expand All @@ -135,5 +212,6 @@ export {
HeaderCellInner,
BaseHeaderCell,
HeaderLabelWrapper,
HeaderLabelTextWrapper,
HeaderIconWrapper,
};
Loading

1 comment on commit f69f396

@vercel
Copy link

@vercel vercel bot commented on f69f396 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui-kit – ./

ui-kit-git-main-commercetools.vercel.app
uikit.commercetools.com
ui-kit-commercetools.vercel.app
ui-kit-five-rho.vercel.app

Please sign in to comment.