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

Danger button background, spacing and more! #681

Merged
merged 5 commits into from
Nov 27, 2023
Merged

Danger button background, spacing and more! #681

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85e4949
Use snackskal as danger button background
lindskogen Nov 27, 2023
cb3ce79
Decrease spacing for button
lindskogen Nov 27, 2023
f3c70f7
Standardize clear filters button
lindskogen Nov 27, 2023
0c360ab
Adjust RouteLeg for new design
lindskogen Nov 27, 2023
ae2a95a
Replace negative margin with border-radius
lindskogen Nov 27, 2023
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
2 changes: 1 addition & 1 deletion packages/elements/src/components/ui/buttons/FlatButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
color: var(--lhds-color-red-500);

&:hover {
background: var(--lhds-color-red-50);
background: var(--snackskal-light);
}

&:focus-visible {
Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/components/ui/buttons/SecondaryButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
color: var(--lhds-color-red-600);

&:hover {
background-color: var(--lhds-color-red-50);
background-color: var(--snackskal-light);
border: 1px solid var(--lhds-color-red-400);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/components/ui/buttons/common/ButtonContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
{label}
</span>
)}
{label ? <Space /> : null}
{label ? <Space half /> : null}
{rightContent}
</div>
);
Expand Down
80 changes: 38 additions & 42 deletions packages/elements/src/components/ui/route-leg/RouteLeg.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const Demo = () => (

export const Overview = () => {
return (
<Box gap={5}>
<Box gap={5} alignItems={"flex-start"}>
{routeLegSizes.map((size) => (
<Box width={220} gap={2} key={size}>
<Box gap={2} key={size}>
<Heading as={"h4"}>{size}</Heading>
<RouteLeg
variant={"ship"}
Expand Down Expand Up @@ -68,7 +68,7 @@ export const WithChildren = () => (
);

export const Compact = () => (
<Box width={220}>
<Box alignItems={"flex-start"}>
<RouteLeg
variant={"ship"}
departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
Expand All @@ -79,7 +79,7 @@ export const Compact = () => (
);

export const CompactWithChildren = () => (
<Box width={220}>
<Box alignItems={"flex-start"}>
<RouteLeg
variant={"ship"}
departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
Expand All @@ -91,46 +91,42 @@ export const CompactWithChildren = () => (
</Box>
);
export const StandardWithStrikethrough = () => (
<Box width={220}>
<RouteLeg
variant={"ship"}
departure={{
location: "Göteborg",
dateTime: "23 Aug 09:15",
originalDateTime: "23 Aug 09:10",
}}
arrival={{
location: "Frederikshavn",
dateTime: "23 Aug 12:50",
originalDateTime: "23 Aug 12:40",
}}
label={"1st route"}
/>
</Box>
<RouteLeg
variant={"ship"}
departure={{
location: "Göteborg",
dateTime: "23 Aug 09:15",
originalDateTime: "23 Aug 09:10",
}}
arrival={{
location: "Frederikshavn",
dateTime: "23 Aug 12:50",
originalDateTime: "23 Aug 12:40",
}}
label={"1st route"}
/>
);

export const RelaxedWithStrikethrough = () => (
<Box width={220}>
<RouteLeg
variant={"ship"}
departure={{
location: "Göteborg",
dateTime: "23 Aug 09:15",
originalDateTime: "23 Aug 09:10",
}}
arrival={{
location: "Frederikshavn",
dateTime: "23 Aug 12:50",
originalDateTime: "23 Aug 12:40",
}}
size={"relaxed"}
label={"1st route"}
/>
</Box>
<RouteLeg
variant={"ship"}
departure={{
location: "Göteborg",
dateTime: "23 Aug 09:15",
originalDateTime: "23 Aug 09:10",
}}
arrival={{
location: "Frederikshavn",
dateTime: "23 Aug 12:50",
originalDateTime: "23 Aug 12:40",
}}
size={"relaxed"}
label={"1st route"}
/>
);

export const CompactWithStrikethrough = () => (
<Box width={220}>
<Box alignItems={"flex-start"}>
<RouteLeg
variant={"ship"}
departure={{
Expand All @@ -150,7 +146,7 @@ export const CompactWithStrikethrough = () => (
);

export const CompactWithLabel = () => (
<Box width={220}>
<Box alignItems={"flex-start"}>
<RouteLeg
variant={"ship"}
departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
Expand All @@ -162,7 +158,7 @@ export const CompactWithLabel = () => (
);

export const CompactWithLabelSelected = () => (
<Box width={220}>
<Box width={250}>
<RouteLeg
variant={"ship"}
departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
Expand All @@ -184,7 +180,7 @@ export const Relaxed = () => (
);

export const RelaxedSelected = () => (
<Box width={220}>
<Box width={250}>
<RouteLeg
variant={"rail"}
departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
Expand Down Expand Up @@ -232,7 +228,7 @@ export const Multileg = () => (
);

export const MultilegCompact = () => (
<Box width={264} border={`1px solid ${cssColor("--lhds-color-ui-300")}`}>
<Box width={270} border={`1px solid ${cssColor("--lhds-color-ui-300")}`}>
<Box indent={3} spacing={3}>
<RouteLeg
variant={"rail"}
Expand Down
14 changes: 7 additions & 7 deletions packages/elements/src/components/ui/route-leg/RouteLeg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,20 +126,20 @@ export const RouteLeg: React.FC<RouteLegProps> = ({
/>
)}
<div className={styles.grid}>
<Column alignItems={"center"} gap={0.5}>
<Icon icon={icon} fixedWidth size={24} />
<Column alignItems={"center"}>
<Icon icon={icon} fixedWidth size={20} />
<Space half />
<Box
flex={1}
border={`1px solid ${cssColor("--lhds-color-ui-300")}`}
border={`1px solid ${cssColor("--lhds-color-ui-900")}`}
borderRadius={2}
/>
<Box
flex={"none"}
border={`4px solid ${cssColor("--lhds-color-blue-100")}`}
background={cssColor("--lhds-color-blue-500")}
borderRadius={"50%"}
lindskogen marked this conversation as resolved.
Show resolved Hide resolved
style={{ marginTop: -1 }}
lindskogen marked this conversation as resolved.
Show resolved Hide resolved
border={`2px solid ${cssColor("--lhds-color-ui-900")}`}
width={16}
height={16}
borderRadius={8}
/>
</Column>
<Column gap={size === "standard" ? 3 : 2}>
Expand Down
5 changes: 3 additions & 2 deletions packages/filter/src/features/search-filter/features/chips/SearchFilterChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { ReactNode, useCallback } from "react";
import { Row } from "@stenajs-webui/core";
import { FlatButton } from "@stenajs-webui/elements";
import { FlatButton, stenaClean } from "@stenajs-webui/elements";
import { useSearchFilterDispatch } from "../../context/SearchFilterDispatchContext";
import { useSearchFilterActions } from "../../context/SearchFilterActionsContext";

Expand All @@ -28,7 +28,8 @@ export const SearchFilterChips: React.FC<SearchFilterChipsProps> = ({
{!disableClearAllButton && (
<FlatButton
size={"small"}
label={"Clear all"}
leftIcon={stenaClean}
label={"Clear"}
onClick={onClickClearAll}
/>
)}
Expand Down