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

Button redesign #2148

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Button redesign #2148

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cd43114
Reimplementation of the Button component with new CSS variables
GomezIvann Jan 24, 2025
fed2e69
Improved focus for Button
GomezIvann Jan 27, 2025
0836769
Button styles small update
GomezIvann Jan 27, 2025
b433a1d
Merge branch 'master' into gomezivann/tokens-button
GomezIvann Jan 30, 2025
6912d07
Update preview.tsx
GomezIvann Jan 30, 2025
245c3d6
Button styles update
GomezIvann Jan 31, 2025
2f3e614
Button styles updates
GomezIvann Feb 3, 2025
3b412a1
Defining width to fix Chromatic issues
GomezIvann Feb 3, 2025
ea41c3b
Preview changes to fix Chromatic
GomezIvann Feb 5, 2025
261947a
Restoring preview-head for font icons
GomezIvann Feb 5, 2025
ccec903
Variables css in index ts
GomezIvann Feb 5, 2025
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
14 changes: 2 additions & 12 deletions apps/website/screens/components/button/code/ButtonCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,7 @@ const sections = [
</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
semantic
</DxcFlex>
</td>
<td>semantic</td>
<td>
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
</td>
Expand Down Expand Up @@ -140,12 +135,7 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
size
</DxcFlex>
</td>
<td>size</td>
<td>
<TableCode>
{
Expand Down
46 changes: 0 additions & 46 deletions packages/lib/src/button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import DxcButton from "./Button";
import DxcFlex from "../flex/Flex";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import { HalstackProvider } from "../HalstackContext";
import DxcInset from "../inset/Inset";
import DxcTooltip from "../tooltip/Tooltip";
import { userEvent, within } from "@storybook/test";
Expand Down Expand Up @@ -36,14 +35,6 @@ const facebookIcon = (
</svg>
);

const opinionatedTheme = {
button: {
baseColor: "#5f249f",
primaryFontColor: "#fff",
secondaryHoverFontColor: "#fff",
},
};

const Button = () => (
<>
<>
Expand Down Expand Up @@ -4927,43 +4918,6 @@ const Button = () => (
</DxcFlex>
</>
</>
<Title title="Opinionated theme" theme="light" level={4} />
<DxcFlex direction="column">
<DxcFlex gap="1rem">
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Primary" icon="home" />
</HalstackProvider>
</ExampleContainer>
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Secondary" icon="home" mode="secondary" />
</HalstackProvider>
</ExampleContainer>
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Tertiary" icon="home" mode="tertiary" />
</HalstackProvider>
</ExampleContainer>
</DxcFlex>
<DxcFlex gap="1rem">
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Primary" icon="home" disabled />
</HalstackProvider>
</ExampleContainer>
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Secondary" icon="home" mode="secondary" disabled />
</HalstackProvider>
</ExampleContainer>
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcButton label="Tertiary" icon="home" mode="tertiary" disabled />
</HalstackProvider>
</ExampleContainer>
</DxcFlex>
</DxcFlex>
</>
);

Expand Down
Loading