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

Card link: Storybook: Weird left/right margin balance for single card, need top margin #4399

Closed
asudoh opened this issue Nov 4, 2020 · 1 comment
Closed

Card link: Storybook: Weird left/right margin balance for single card, need top margin #4399

asudoh opened this issue Nov 4, 2020 · 1 comment
Assignees
@ariellalgilmore
Labels
bug Something isn't working package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed storybook
Milestone
Sprint 21-02

Comments

@asudoh
Copy link
Contributor

asudoh commented Nov 4, 2020 •
edited by RobertaJHahn
Loading

Detailed description

Describe in detail the issue you're having.

The card link demo in our Storybook has weird balance between the left/right margin for single card and no margin at the top:

image

Is this issue related to a specific component?

Yes, card.

What did you expect to happen? What happened instead? What would you like to
see changed?

According to design team, we let adopters put arbitrary numbers of cards with arbitrary left/right margins. From that, I'd expect:

  • Center the card
  • 16px top margin

Additional Information
@asudoh asudoh added the bug Something isn't working label Nov 4, 2020
@RobertaJHahn RobertaJHahn added storybook severity 4 Affects minor functionality, no workaround needed package: react Work necessary for the Carbon for IBM.com react components package labels Nov 5, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 21-01 milestone Nov 5, 2020
@ariellalgilmore ariellalgilmore self-assigned this Jan 12, 2021
@ariellalgilmore ariellalgilmore mentioned this issue Jan 19, 2021
Closed
@ariellalgilmore
Copy link
Member

After discussing with designers this issue is actually a web component issue where the cards should align to the left and have a top spacing.

Got some initial feedback from the other designers..
we agree consistency between the two storybooks is the most important, and being aligned to the grid in some way!
We leaned towards the React storybook with the card aligned to the left most column because:
we don’t center align most things in Carbon/IDL
we can be more consistent aligning left because not all components can be easily centered on the grid

@ariellalgilmore ariellalgilmore added package: web components Work necessary for the IBM.com Library web components package and removed package: react Work necessary for the Carbon for IBM.com react components package labels Jan 22, 2021
This was referenced Jan 22, 2021
Closed
Merged
kodiakhq bot pushed a commit that referenced this issue Jan 26, 2021
@ariellalgilmore
fix(card): adjust storybook to align left (#5009)
3beb21f 
### Related Ticket(s)

#4399 

### Description

Updated Card and Card Link to align left and have top padding of 1 rem, so that react and web components are aligned

### Changelog

**Changed**

- storybook change container styles 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@ariellalgilmore @IgnacioBecerra
fix(card): adjust storybook to align left (carbon-design-system#5009)
feb9432 
### Related Ticket(s)

carbon-design-system#4399 

### Description

Updated Card and Card Link to align left and have top padding of 1 rem, so that react and web components are aligned

### Changelog

**Changed**

- storybook change container styles 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ariellalgilmore ariellalgilmore

Labels
bug Something isn't working package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed storybook
Projects
None yet
Milestone
Sprint 21-02
Development

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