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

Jump to bottom

Web Components: Align to non-gutter grid line and use CSS grid #4174

Closed
asudoh opened this issue Oct 8, 2020 · 1 comment
Closed

Web Components: Align to non-gutter grid line and use CSS grid #4174

asudoh opened this issue Oct 8, 2020 · 1 comment
Labels
dev Needs some dev work epic package: web components Work necessary for the IBM.com Library web components package priority: high

Comments

@asudoh
Copy link
Contributor

asudoh commented Oct 8, 2020

The problem

Some components, like feature card and video player, does not work unless they are put in a Carbon grid or a similar style. OTOH, some components, like callout, creates grid by itself.

The solution

Understand the rationals behind it. Some possibilities:

  • Remove the requirement of grid if possible
  • Clearly document the grid requirement
  • Having feature card, video player, etc. render grid by itself
@asudoh asudoh added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Oct 8, 2020
@asudoh asudoh mentioned this issue Oct 8, 2020
Closed
29 tasks
@RobertaJHahn RobertaJHahn added this to the Sprint 20-25 milestone Oct 14, 2020
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Dec 18, 2020
@asudoh
fix(feature-card): ensure aligned to grid line
e7c017c 
Changes style of feature card to ensure it's aligned to grid line
without gutter.

The style of feature card used to have adjustments (e.g. by negative
margin) to adjust for its surrounding grid gutter, which is removed
with this change.

Refs carbon-design-system#4174.
@asudoh asudoh mentioned this issue Dec 18, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Dec 23, 2020
@asudoh
fix(feature-card): ensure aligned to grid line (#4751)
072e68f 
### Related Ticket(s)

Refs #4174.

### Description

Changes style of feature card to ensure it's aligned to grid line without gutter.

The style of feature card used to have adjustments (e.g. by negative margin) to adjust for its surrounding grid gutter, which is removed with this change.

### Changelog

**New**

- Simplified Carbon grid style for stories.

**Changed**

- Fixed feature card to ensure it's aligned to grid line (without gutter).

**Removed**

- Style adjustments in feature card (e.g. by negative margin) to adjust for its surrounding grid gutter.
@asudoh asudoh mentioned this issue Jan 11, 2021
Merged
@asudoh asudoh self-assigned this Jan 13, 2021
@jeffchew
Copy link
Member

After investigation, @asudoh notes that this is more like 20+ story points and should be converted into an epic. The team discussed and we are ok to move this out of #4100 and will target a future minor release (tentatively v1.1.0).

@RobertaJHahn let's add this to the next engineering refinement meeting to break this work down, tentatively begin the work in sprint 21-02.

@RobertaJHahn RobertaJHahn removed this from the Sprint 21-01 milestone Jan 14, 2021
kodiakhq bot pushed a commit that referenced this issue Jan 22, 2021
@asudoh
chore(content-block-simple): use CSS grid for layout (#4859)
d09861b 
### Related Ticket(s)

Refs #4174.

### Description

Updates `<dds-content-block-simple>` to use CSS grid for layout so it properly alignes to Carbon grid lines considering contents both one using gutter and one not using gutter.

### Changelog

**Changed**

- `<dds-content-block-simple>` to use CSS grid for layout.
- `<dds-content-block-simple>` story:
  - Use `<dds-card-cta>` instead of `<dds-text-cta>`.
  - Use `<dds-image-with-caption>` instead of `<dds-image>`.
- `<dds-callout-media>` so it won't be affected by change in `<dds-content-block-simple>`.
- Several fixes to `<dds-link-list>`:
  - Ensure the max width calculation is based on the content.
  - Eliminate negative margin adjustment for Web Components to ensure it doesn't rely on certain padding in the parent container.
- Fix icon placement of `<dds-link-list-item-cta>`.
@asudoh asudoh mentioned this issue Jan 23, 2021
Closed
@RobertaJHahn RobertaJHahn changed the title Components: Investigate the requirement of grid usage Web Components: Investigate the requirement of grid usage Jan 29, 2021
@RobertaJHahn RobertaJHahn changed the title Web Components: Investigate the requirement of grid usage Web Components: Align to non-gutter grid line and use CSS grid Feb 10, 2021
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@asudoh @IgnacioBecerra
chore(content-block-simple): use CSS grid for layout (carbon-design-s…
d3da9b1 
…ystem#4859)

### Related Ticket(s)

Refs carbon-design-system#4174.

### Description

Updates `<dds-content-block-simple>` to use CSS grid for layout so it properly alignes to Carbon grid lines considering contents both one using gutter and one not using gutter.

### Changelog

**Changed**

- `<dds-content-block-simple>` to use CSS grid for layout.
- `<dds-content-block-simple>` story:
  - Use `<dds-card-cta>` instead of `<dds-text-cta>`.
  - Use `<dds-image-with-caption>` instead of `<dds-image>`.
- `<dds-callout-media>` so it won't be affected by change in `<dds-content-block-simple>`.
- Several fixes to `<dds-link-list>`:
  - Ensure the max width calculation is based on the content.
  - Eliminate negative margin adjustment for Web Components to ensure it doesn't rely on certain padding in the parent container.
- Fix icon placement of `<dds-link-list-item-cta>`.
@asudoh asudoh mentioned this issue Mar 5, 2021
Merged
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Mar 13, 2021
@asudoh
chore(content-group): update base class to new layout
679cc8f 
As we finished migrating all content patterns to the new layout aligning
to non-gutter grid, updates the base classes to the new one, that
finishes the migration.

Refs carbon-design-system#4174.
@asudoh asudoh mentioned this issue Mar 13, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Mar 18, 2021
@asudoh
chore(content-group): update base class to new layout (#5480)
167ab8e 
### Related Ticket(s)

Refs #4174.

### Description

As we finished migrating all content patterns to the new layout aligning to non-gutter grid, updates the base classes to the new one, that finishes the migration.

### Changelog

**Changed**

- `DDSContentBlock`/`DDSContentGroup` abstract classes to use the new layout of content pattern, aligning to non-gutter grid.
@jeffchew jeffchew mentioned this issue Mar 29, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
dev Needs some dev work epic package: web components Work necessary for the IBM.com Library web components package priority: high
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@asudoh @jeffchew @RobertaJHahn