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

fix(List): fix responsive list item #1059

Merged
merged 2 commits into from
Dec 18, 2024
Merged

fix(List): fix responsive list item #1059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f3067b
fix(List): fix responsive list item
Lisa18289 Dec 10, 2024
87e0cf6
feat(List): support multiple texts in sub title
Lisa18289 Dec 18, 2024
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
1 change: 1 addition & 0 deletions ...mponents/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const OptionsButton: FC<Props> = (props) => {
color="secondary"
className={className}
aria-label={stringFormatter.format("list.options")}
tunnelId={null}
>
<IconContextMenu />
</Button>
Expand Down
215 changes: 23 additions & 192 deletions ...nts/src/components/List/components/Items/components/Item/components/View/View.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,22 @@
@use "@/styles/mixins/containerBreakpointSizes";

.view {
--title-width: 30ch;
display: flex;
padding: var(--list-item--padding);
display: grid;
gap: var(--list-item--content-to-content-spacing);
align-items: start;

&:has(.title:not(:empty)):has(.topContent):has(.content):has(.action) {
grid-template-areas:
"title topContent action "
"content content content";
grid-template-columns: var(--title-width) 1fr auto;
}

&:has(.title:not(:empty)):has(.topContent):has(.content):not(:has(.action)) {
grid-template-areas:
"title topContent"
"content content ";
grid-template-columns: var(--title-width) 1fr;
}

&:has(.title:not(:empty)):has(.topContent):not(:has(.content)):not(
:has(.action)
) {
grid-template-areas: "title topContent";
grid-template-columns: var(--title-width) 1fr;
}

&:has(.title:not(:empty)):not(:has(.topContent)):has(.content):not(
:has(.action)
) {
grid-template-areas:
"title "
"content";
grid-template-columns: auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):not(
:has(.action)
) {
grid-template-areas: "title";
grid-template-columns: 1fr;
}

&:not(:has(.title:not(:empty))):has(.topContent):has(.content):has(.action) {
grid-template-areas:
"topContent action"
"content content";
grid-template-columns: 1fr auto;
}

&:not(:has(.title:not(:empty))):not(:has(.topContent)):has(.content):has(
.action
) {
grid-template-areas: "content action";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):has(.content):has(.action) {
grid-template-areas:
"title action "
"content content";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):has(
.action
) {
grid-template-areas: "title action";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):has(.topContent):not(:has(.content)):has(.action) {
grid-template-areas: "title topContent action";
grid-template-columns: var(--title-width) 1fr auto;
}

&:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):has(
.action
) {
grid-template-areas: "topContent action";
grid-template-columns: 1fr auto;
}

&:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):not(
:has(.action)
) {
grid-template-areas: "topContent";
grid-template-columns: auto;
.content {
display: flex;
flex-wrap: wrap;
gap: var(--list-item--content-to-content-spacing);
align-items: center;
flex-grow: 1;
}

.title {
grid-area: title;
order: 0;
flex-grow: 1;
display: grid;
grid-column-gap: var(--list-item--content-to-content-spacing);
grid-template-areas:
Expand All @@ -110,7 +35,7 @@
grid-template-columns: 1fr;
}

&:not(:has(.text)) {
&:not(:has(.subTitle)) {
grid-template-areas: "avatar title";

&:not(:has(.avatar)) {
Expand All @@ -128,122 +53,28 @@
align-self: center;
}

.text {
.subTitle {
grid-area: subtitle;
font-size: var(--list-item--subtitle-font-size);

.text:not(:last-child):after {
content: "–";
display: inline-block;
margin: 0 var(--size-rem--s);
}
}
}

.topContent {
grid-area: topContent;
}

.content {
grid-area: content;
order: 2;
}

.action {
grid-area: action;
align-self: center;
justify-self: end;
margin-left: auto;
}

@include containerBreakpointSizes.containerBreakpointSizes(
250,
450,
650,
850,
1050
) {
&:has(.title:not(:empty)):has(.topContent):has(.content):has(.action) {
grid-template-areas:
"title action"
"topContent topContent"
"content content ";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):has(.topContent):has(.content):not(
:has(.action)
) {
grid-template-areas:
"title "
"topContent"
"content ";
grid-template-columns: auto;
}

&:has(.title:not(:empty)):has(.topContent):not(:has(.content)):not(
:has(.action)
) {
grid-template-areas:
"title "
"topContent";
grid-template-columns: auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):has(.content):not(
:has(.action)
) {
grid-template-areas:
"title "
"content";
grid-template-columns: auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):not(
:has(.action)
) {
grid-template-areas: "title";
grid-template-columns: auto;
}

&:not(:has(.title:not(:empty))):has(.topContent):has(.content):has(
.action
) {
grid-template-areas:
"topContent action "
"content content ";
grid-template-columns: 1fr auto;
}

&:not(:has(.title:not(:empty))):not(:has(.topContent)):has(.content):has(
.action
) {
grid-template-areas: "content action";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):has(.content):has(
.action
) {
grid-template-areas:
"title action "
"content content ";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):has(
.action
) {
grid-template-areas: "title action";
grid-template-columns: 1fr auto;
}

&:has(.title:not(:empty)):has(.topContent):not(:has(.content)):has(
.action
) {
grid-template-areas:
"title action "
"topContent topContent";
grid-template-columns: 1fr auto;
}

&:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):has(
.action
) {
grid-template-areas: "topContent action";
grid-template-columns: 1fr auto;
}
.bottomContent {
order: 4;
width: 100%;
}
}
42 changes: 21 additions & 21 deletions .../components/src/components/List/components/Items/components/Item/components/View/View.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,41 @@ import type { PropsContext } from "@/lib/propsContext";
import { dynamic, PropsContextProvider } from "@/lib/propsContext";
import { OptionsButton } from "@/components/List/components/Items/components/Item/components/OptionsButton";
import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
import type {
PropsWithClassName,
PropsWithContainerBreakpointSize,
} from "@/lib/types/props";
import type { PropsWithClassName } from "@/lib/types/props";
import clsx from "clsx";
import { getContainerBreakpointSizeClassName } from "@/lib/getContainerBreakpointSizeClassName";

type Props = PropsWithChildren &
PropsWithClassName &
PropsWithContainerBreakpointSize;
type Props = PropsWithChildren & PropsWithClassName;

const getStyleForContentSlot = (slot?: string) =>
slot === "top"
? styles.topContent
: slot === "bottom"
? styles.content
? styles.bottomContent
: styles.topContent;

export const View = (props: Props) => {
const { children, className, containerBreakpointSize = "m" } = props;
const { children, className } = props;

const propsContext: PropsContext = {
ContextMenu: {
wrapWith: <OptionsButton className={styles.action} />,
placement: "bottom end",
tunnelId: "button",
},
Button: {
className: styles.action,
tunnelId: "button",
},
ActionGroup: {
className: styles.action,
ignoreBreakpoint: true,
tunnelId: "button",
Button: {
tunnelId: null,
},
},
Content: {
className: dynamic((p) => getStyleForContentSlot(p.slot)),
tunnelId: "topContent",
},
Avatar: {
className: styles.avatar,
Expand All @@ -53,28 +52,29 @@ export const View = (props: Props) => {
},
Text: {
className: styles.text,
tunnelId: "title",
tunnelId: "text",
},
Link: {
unstyled: true,
},
};

const rootClassName = clsx(
styles.view,
className,
styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],
);
const rootClassName = clsx(styles.view, className);

return (
<div className={rootClassName}>
<PropsContextProvider props={propsContext} mergeInParentContext>
<TunnelProvider>
{children}
<div className={styles.title}>
<TunnelExit id="title" />
<div className={styles.content}>
{children}
<div className={styles.title}>
<TunnelExit id="title" />
<div className={styles.subTitle}>
<TunnelExit id="text" />
</div>
</div>
</div>
<TunnelExit id="topContent" />
<TunnelExit id="button" />
</TunnelProvider>
</PropsContextProvider>
</div>
Expand Down
Loading
Loading