Skip to content

Commit

Permalink
fix(List): fix responsive list item (#1059)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lisa18289
Lisa18289 authored Dec 18, 2024
1 parent 7e1e321 commit a8fc2db
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 233 deletions.
1 change: 1 addition & 0 deletions ...mponents/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
View file
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
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
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

0 comments on commit a8fc2db

Please sign in to comment.