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.

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

feat(link-list): aem improvements to end-of-section type #4972

Merged
merged 9 commits into from
Jan 27, 2021
Merged

feat(link-list): aem improvements to end-of-section type #4972

merged 9 commits into from
Jan 27, 2021

Conversation

raphaelamadeu-zz
Copy link
Contributor

Related Ticket(s)

#4902

Description

End variant of Link List was updated to reflect the new design specs by AEM team.

image

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2021

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2021

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2021

Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great progress @raphaelamadeu!

Comment on lines +28 to +29
@property({ reflect: true })
type = LINK_LIST_ITEM_TYPE.DEFAULT;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a JSDoc comment that describes what this property is for? That will be reflected to docs page in Storybook.

* Should happen if there are more than 6 child items slotted in.
*/
@internalProperty()
private _useThreeColumnLayoutForEndType = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you rename _useSplitLayoutForEndType with _endTypeLayout? Good to define an internal enum (defined in this file) like END_TYPE_LAYOUT.TWO_COLUMNS and END_TYPE_LAYOUT.THREE_COLUMNS.

@@ -31,3 +31,18 @@ export enum LINK_LIST_TYPE {
*/
END = 'end',
}

/**
* Link list item type
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Link list item type
* Link list item type. Should mirror `LINK_LIST_TYPE` of parent `<dds-link-list>`.

Comment on lines 58 to 62
if (this.type === LINK_LIST_TYPE.END) {
childItems.forEach(elem => {
(elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
});
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure updating type of child <dds-link-list-item> in updated() lifecycle method, too, to cope with change in type after <dds-link-list-item> is slotted in.

Comment on lines 106 to 124
.#{$dds-prefix}-ce--link-list__list--three-columns {
@include carbon--breakpoint('sm') {
::slotted(#{$dds-prefix}-link-list-item) {
margin-right: -$carbon--layout-01;
}
}

@include carbon--breakpoint('md') {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2rem;

::slotted(#{$dds-prefix}-link-list-item) {
display: block;
margin-left: -$carbon--layout-01;
margin-right: 0;
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seem many duplicate CSS rules with two columns mode. One way to solve it is:

.#{$dds-prefix}-ce--link-list__list--split {
   /* The common rules */
}

.#{$dds-prefix}-ce--link-list__list--two-columns {
  /* 2-column mode-specific rules */
}

.#{$dds-prefix}-ce--link-list__list--three-columns {
  /* 3-column mode-specific rules */
}
.#{$dds-prefix}-ce--link-list__list--split,
.#{$dds-prefix}-ce--link-list__list--three-columns {
   /* The common rules */
}

@RobertaJHahn
Copy link

@raphaelamadeu @StephanieHoman is the designer on this work and should be assigned to review this PR. Please update the design issue (#4900), letting her know that it is ready and provide the links where she can review it.

Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 - Thanks @raphaelamadeu for the update!

Copy link
Member

@jeffchew jeffchew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation looks a little light as far as what the type means, and what options there are. Can you describe what types can be passed in, and what each type does?

Screen Shot 2021-01-24 at 10 02 34 PM

@jeffchew jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Jan 27, 2021
@kodiakhq kodiakhq bot merged commit 736fbe9 into carbon-design-system:master Jan 27, 2021
@RobertaJHahn RobertaJHahn removed the Ready to merge Label for the pull requests that are ready to merge label Jan 29, 2021
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this pull request Feb 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants