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.

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

fix(AnalyticalTable): update column header icons to align with latest spec #6598

Merged
merged 2 commits into from
Nov 18, 2024
Merged
Changes from 1 commit
Commits
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
Next Next commit
Fix(AnalyticalTable): update column header icons to align with latest…
… spec
Lukas742 committed Nov 6, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit f4a95c64371dfe4c36e30e2c3b26d2225fe74ea8
Original file line number Diff line number Diff line change
@@ -49,3 +49,8 @@
display: flex;
justify-content: center;
}

.icon {
height: 0.8rem;
width: 0.8rem;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't this result in subpixels which might cause weird rendering issues?

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
import IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js';
import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
@@ -112,15 +113,17 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
style.textAlign = column.hAlign.toLowerCase() as any;
}

if (column.isSorted) margin++;
if (column.isGrouped) margin++;
if (isFiltered) margin++;
if (column.isSorted) margin += 0.8;
if (column.isGrouped) margin += 0.8;
if (isFiltered) margin += 0.8;

if (margin === 0) {
return style;
}

if (margin > 0) margin += 0.5;
if (margin > 0) {
margin += 0.75;
}

style.marginInlineEnd = `${margin}rem`;

@@ -218,11 +221,20 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
className={classNames.iconContainer}
data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
>
{isFiltered && <Icon name={iconFilter} aria-hidden />}
{isFiltered && (
<Icon design={IconDesign.NonInteractive} name={iconFilter} aria-hidden className={classNames.icon} />
)}
{column.isSorted && (
<Icon name={column.isSortedDesc ? iconSortDescending : iconSortAscending} aria-hidden />
<Icon
design={IconDesign.NonInteractive}
name={column.isSortedDesc ? iconSortDescending : iconSortAscending}
aria-hidden
className={classNames.icon}
/>
)}
{column.isGrouped && (
<Icon design={IconDesign.NonInteractive} name={iconGroup} aria-hidden className={classNames.icon} />
)}
{column.isGrouped && <Icon name={iconGroup} aria-hidden />}
</div>
</div>
{hasPopover && popoverOpen && (

Unchanged files with check annotations Beta

function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
useEffect(() => {
attachResizeHandler(onChange);
}, []);

Check warning on line 12 in packages/base/src/Device/index.cy.tsx

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array
const unregister = () => {
detachResizeHandler(onChange);
}) {
useEffect(() => {
attachOrientationChangeHandler(onChange);
}, []);

Check warning on line 32 in packages/base/src/Device/index.cy.tsx

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array
const unregister = () => {
detachOrientationChangeHandler(onChange);
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 79 in packages/charts/src/components/BarChart/BarChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
}
interface DimensionConfig extends IChartDimension {
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
: 0;
const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 188 in packages/charts/src/components/BarChart/BarChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
const onItemLegendClick = useLegendItemClick(onLegendClick);
const labelFormatter = useLabelFormatter(primaryDimension);
speed={2}
backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}

Check warning on line 15 in packages/charts/src/components/BarChart/Placeholder.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
>
<rect x="20" y="10" width="1" height="135" />
<rect x="20" y="20" width="85" height="15" />
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 69 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
}
interface DimensionConfig extends IChartDimension {
...rest
} = props;
const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 146 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
const chartConfig = {
yAxisVisible: false,
);
} else {
onDataPointClick(
enrichEventWithDetails({} as any, {

Check warning on line 225 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
value: eventOrIndex.value,
dataKey: eventOrIndex.dataKey,
dataIndex: eventOrIndex.index,
{chartConfig.xAxisVisible &&
dimensions.map((dimension, index) => {
let AxisComponent;
const axisProps: any = {

Check warning on line 299 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
dataKey: dimension.accessor,
interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
tickLine: index < 1,
/>
)}
{sortedMeasures?.map((element, index) => {
const chartElementProps: any = {

Check warning on line 437 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
isAnimationActive: noAnimation === false
};
let labelPosition = 'top';