Skip to content

chore(CardHorizontal): migrate to CSS Modules with visual regression baseline #1039

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

Open
DreaminDani wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore(CardHorizontal): migrate to CSS Modules with visual regression baseline #1039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4bac2a
test(CardHorizontal): add visual regression baseline before CSS Modul…
DreaminDani May 20, 2026
f7558ef
chore(CardHorizontal): migrate styling from styled-components to CSS …
DreaminDani May 20, 2026
679597b
chore(CardHorizontal): reword changeset in imperative mood
DreaminDani May 26, 2026
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
5 changes: 5 additions & 0 deletions .changeset/migrate-cardhorizontal-to-css-modules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clickhouse/click-ui': patch
---

Migrate CardHorizontal from styled-components to css modules with no change in behavior
216 changes: 216 additions & 0 deletions src/components/CardHorizontal/CardHorizontal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
.header {
max-width: 100%;
gap: inherit;
}

.description {
display: flex;
width: 100%;
flex: 1;
flex-direction: column;
align-self: start;
gap: var(--click-card-horizontal-space-md-gap);
}

.cardicon {
width: var(--click-card-horizontal-icon-size-all);
height: var(--click-card-horizontal-icon-size-all);
}

.contentwrapper {
display: flex;
width: 100%;
flex-direction: row;
}

.contentwrapper_size_md {
gap: var(--click-card-horizontal-space-md-gap);
}

.contentwrapper_size_sm {
gap: var(--click-card-horizontal-space-sm-gap);
}

/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
required for browser compatibility per .browserslistrc */
@media (max-width: 768px) {
.contentwrapper {
flex-direction: column;
}
}

.icontextcontentwrapper {
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
}

.icontextcontentwrapper_alignment_top {
align-items: flex-start;
}

.icontextcontentwrapper_alignment_center {
align-items: center;
}

.icontextcontentwrapper_size_md {
gap: var(--click-card-horizontal-space-md-gap);
}

.icontextcontentwrapper_size_sm {
gap: var(--click-card-horizontal-space-sm-gap);
}

.wrapper {
display: inline-flex;
width: 100%;
max-width: 100%;
justify-content: flex-start;
align-items: center;
align-self: auto;
border: 1px solid var(--card-stroke-default);
border-radius: var(--click-card-horizontal-radii-all);
background: var(--card-bg-default);
color: var(--card-title-default);
font: var(--click-card-horizontal-typography-title-default);
}

.wrapper_color_default {
Copy link
Copy Markdown
Contributor Author

@DreaminDani DreaminDani May 20, 2026

Choose a reason for hiding this comment

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

I kinda like this pattern. Should we codify it into the skill?

Copy link
Copy Markdown
Member

@hoorayimhelping hoorayimhelping May 26, 2026

Choose a reason for hiding this comment

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

Which pattern specifically?

Copy link
Copy Markdown
Contributor Author

@DreaminDani DreaminDani May 26, 2026

Choose a reason for hiding this comment

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

Naming a bunch of component-specific vars to avoid having to specify them from the global variables throughout the entire file. It's exactly what I would have done.

--card-bg-default: var(--click-card-horizontal-default-color-background-default);
--card-bg-hover: var(--click-card-horizontal-default-color-background-hover);
--card-bg-active: var(--click-card-horizontal-default-color-background-active);
--card-bg-disabled: var(--click-card-horizontal-default-color-background-disabled);
--card-title-default: var(--click-card-horizontal-default-color-title-default);
--card-title-hover: var(--click-card-horizontal-default-color-title-hover);
--card-title-active: var(--click-card-horizontal-default-color-title-active);
--card-title-disabled: var(--click-card-horizontal-default-color-title-disabled);
--card-stroke-default: var(--click-card-horizontal-default-color-stroke-default);
--card-stroke-hover: var(--click-card-horizontal-default-color-stroke-hover);
--card-stroke-active: var(--click-card-horizontal-default-color-stroke-active);
--card-stroke-disabled: var(--click-card-horizontal-default-color-stroke-disabled);
--card-desc-default: var(--click-card-horizontal-default-color-description-default);
--card-desc-hover: var(--click-card-horizontal-default-color-description-hover);
--card-desc-active: var(--click-card-horizontal-default-color-description-active);
--card-desc-disabled: var(--click-card-horizontal-default-color-description-disabled);
}

.wrapper_color_muted {
--card-bg-default: var(--click-card-horizontal-muted-color-background-default);
--card-bg-hover: var(--click-card-horizontal-muted-color-background-hover);
--card-bg-active: var(--click-card-horizontal-muted-color-background-active);
--card-bg-disabled: var(--click-card-horizontal-muted-color-background-disabled);
--card-title-default: var(--click-card-horizontal-muted-color-title-default);
--card-title-hover: var(--click-card-horizontal-muted-color-title-hover);
--card-title-active: var(--click-card-horizontal-muted-color-title-active);
--card-title-disabled: var(--click-card-horizontal-muted-color-title-disabled);
--card-stroke-default: var(--click-card-horizontal-muted-color-stroke-default);
--card-stroke-hover: var(--click-card-horizontal-muted-color-stroke-hover);
--card-stroke-active: var(--click-card-horizontal-muted-color-stroke-active);
--card-stroke-disabled: var(--click-card-horizontal-muted-color-stroke-disabled);
--card-desc-default: var(--click-card-horizontal-muted-color-description-default);
--card-desc-hover: var(--click-card-horizontal-muted-color-description-hover);
--card-desc-active: var(--click-card-horizontal-muted-color-description-active);
--card-desc-disabled: var(--click-card-horizontal-muted-color-description-disabled);
}

.wrapper_alignment_top {
align-items: flex-start;
align-self: stretch;
}

.wrapper_alignment_center {
align-items: center;
align-self: auto;
}

.wrapper_size_md {
padding: var(--click-card-horizontal-space-md-y) var(--click-card-horizontal-space-md-x);
}

.wrapper_size_sm {
padding: var(--click-card-horizontal-space-sm-y) var(--click-card-horizontal-space-sm-x);
}

.wrapper .description {
color: var(--card-desc-default);
font: var(--click-card-horizontal-typography-description-default);
}

.wrapper.wrapper_selectable {
border-color: var(--card-stroke-hover);
}

.wrapper.wrapper_selectable.wrapper_selected {
border-color: var(--card-stroke-active);
}

.wrapper:hover {
font: var(--click-card-horizontal-typography-title-hover);
}

.wrapper.wrapper_selectable:hover {
border-color: var(--card-stroke-default);
background-color: var(--card-bg-hover);
color: var(--card-title-hover);
cursor: pointer;
}

.wrapper.wrapper_selectable.wrapper_selected:hover {
border-color: var(--card-stroke-active);
}

.wrapper.wrapper_selectable:hover .description {
color: var(--card-desc-hover);
font: var(--click-card-horizontal-typography-description-hover);
}

.wrapper.wrapper_selectable:active,
.wrapper.wrapper_selectable:focus,
.wrapper.wrapper_selectable:focus-within {
border-color: var(--card-stroke-active);
background-color: var(--card-bg-active);
color: var(--card-title-active);
}

.wrapper.wrapper_selectable:active .description,
.wrapper.wrapper_selectable:focus .description,
.wrapper.wrapper_selectable:focus-within .description {
color: var(--card-desc-active);
font: var(--click-card-horizontal-typography-description-active);
}

/* stylelint-disable no-descending-specificity -- disabled state intentionally
defined after hover/active to mirror the source cascade order;
pointer-events:none plus tabIndex=-1 prevent hover/focus/active from firing. */
.wrapper.wrapper_disabled,
.wrapper.wrapper_disabled:hover,
.wrapper.wrapper_disabled:active,
.wrapper.wrapper_disabled:focus,
.wrapper.wrapper_disabled:focus-within {
border: 1px solid var(--card-stroke-disabled);
background-color: var(--card-bg-disabled);
color: var(--card-title-disabled);
cursor: not-allowed;
pointer-events: none;
}

.wrapper.wrapper_disabled.wrapper_selected,
.wrapper.wrapper_disabled.wrapper_selected:hover,
.wrapper.wrapper_disabled.wrapper_selected:active,
.wrapper.wrapper_disabled.wrapper_selected:focus,
.wrapper.wrapper_disabled.wrapper_selected:focus-within {
border-color: var(--card-stroke-active);
}

.wrapper.wrapper_disabled .description {
color: var(--card-desc-disabled);
font: var(--click-card-horizontal-typography-description-disabled);
}

.wrapper.wrapper_disabled:active,
.wrapper.wrapper_disabled:focus,
.wrapper.wrapper_disabled:focus-within {
border: 1px solid var(--card-stroke-active);
}
/* stylelint-enable no-descending-specificity */
97 changes: 87 additions & 10 deletions src/components/CardHorizontal/CardHorizontal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Meta, StoryObj } from '@storybook/react-vite';
import { styled } from 'styled-components';
import { CSSProperties, ReactNode } from 'react';

import { ICON_NAMES } from '../Icon/IconCommon';

import { CardHorizontal } from '@/components/CardHorizontal';

const GridCenter = styled.div`
display: grid;
width: 60%;
`;
const gridCenterStyle: CSSProperties = { display: 'grid', width: '60%' };
const GridCenter = ({ children }: { children: ReactNode }) => (
<div style={gridCenterStyle}>{children}</div>
);

const meta: Meta<typeof CardHorizontal> = {
component: CardHorizontal,
Expand Down Expand Up @@ -36,11 +36,18 @@ const meta: Meta<typeof CardHorizontal> = {

export default meta;

export const Playground: StoryObj<typeof CardHorizontal> = {
type Story = StoryObj<typeof CardHorizontal>;

const baseArgs = {
icon: 'building' as const,
title: 'Card title',
description: 'A description very interesting that presumably relates to the card.',
size: 'md' as const,
};

export const Playground: Story = {
args: {
icon: 'building',
title: 'Card title',
description: 'A description very interesting that presumably relates to the card.',
...baseArgs,
disabled: false,
isSelected: false,
badgeText: '',
Expand All @@ -49,6 +56,76 @@ export const Playground: StoryObj<typeof CardHorizontal> = {
badgeIconDir: undefined,
infoText: '',
infoUrl: '',
size: 'md',
},
};

export const Default: Story = {
args: baseArgs,
};

export const Muted: Story = {
args: {
...baseArgs,
color: 'muted',
},
};

export const Small: Story = {
args: {
...baseArgs,
size: 'sm',
},
};

export const AlignmentTop: Story = {
args: {
...baseArgs,
alignment: 'top',
},
};

export const Selectable: Story = {
args: {
...baseArgs,
isSelectable: true,
},
};

export const Selected: Story = {
args: {
...baseArgs,
isSelectable: true,
isSelected: true,
},
};

export const Disabled: Story = {
args: {
...baseArgs,
disabled: true,
},
};

export const DisabledSelected: Story = {
args: {
...baseArgs,
disabled: true,
isSelected: true,
},
};

export const WithBadge: Story = {
args: {
...baseArgs,
badgeText: 'New',
badgeState: 'success',
},
};

export const WithButton: Story = {
args: {
...baseArgs,
infoText: 'Read more',
infoUrl: 'https://clickhouse.com',
},
};
Loading
Loading