Skip to content

fix(MeetingRowContent): use grid layout to adapt different length #749

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

Merged
maxinteger merged 3 commits into from
Jan 23, 2025
Merged

fix(MeetingRowContent): use grid layout to adapt different length #749

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
14fb357
fix(MeetingRowContent): use grid layout to adapt different length
xiaolin5207 Jan 20, 2025
0d9a25c
feat(automotive): meeting list item
maxinteger Jan 21, 2025
216fc4f
feat(automotive): change width in meting list item
xiaolin5207 Jan 22, 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
22 changes: 20 additions & 2 deletions src/components/MeetingListItem/MeetingListItem.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,12 +307,21 @@ Colors.parameters = {
{
buttonGroup: (
<ButtonGroup spaced>
<ButtonHyperlink>Link</ButtonHyperlink>
<ButtonHyperlink>
Link for Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap
</ButtonHyperlink>
</ButtonGroup>
),
children: (
<Text type="body-primary" tagName="p">
{MeetingMarker.AcceptedActive}
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap
</Text>
),
color: MeetingMarker.AcceptedActive,
Expand All @@ -327,6 +336,10 @@ Colors.parameters = {
children: (
<Text type="body-primary" tagName="p">
{MeetingMarker.AcceptedInactive}
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap
</Text>
),
color: MeetingMarker.AcceptedInactive,
Expand All @@ -335,7 +348,12 @@ Colors.parameters = {
{
buttonGroup: (
<ButtonGroup spaced>
<ButtonHyperlink>Link</ButtonHyperlink>
<ButtonHyperlink>
Link for Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap
</ButtonHyperlink>
</ButtonGroup>
),
children: (
Expand Down
36 changes: 36 additions & 0 deletions src/components/MeetingRowContent/MeetingRowContent.style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,42 @@
}
}

.md-meeting-list-item-wrapper {
display: grid;
grid-template-columns: max-content minmax(0, 3fr) minmax(0, 2fr);
justify-content: unset;

div[data-position='middle'] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

> * {
width: 100%;
}
}

div[data-position='end'] {
width: 100%;
display: flex;
justify-content: end;
justify-self: end;
flex-direction: column;
align-items: flex-end;

> * {
width: 100%;
justify-content: end;
}

a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

.md-meeting-row-content-end-section {
.md-button-group-wrapper > .md-icon-wrapper > svg {
path {
Expand Down
Loading