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

Pattern: Callout Quote: Misalignment to grid #2399

Closed
ltitle opened this issue May 14, 2020 · 0 comments
Closed

Pattern: Callout Quote: Misalignment to grid #2399

ltitle opened this issue May 14, 2020 · 0 comments
Assignees
@ariellalgilmore @greeshmareddyg
Labels
bug Something isn't working dev Needs some dev work severity 4 Affects minor functionality, no workaround needed
Milestone
Sprint 20-15

Comments

@ltitle
Copy link

ltitle commented May 14, 2020 •
edited
Loading

Callout Quote: Misalignment to grid

Describe in detail the issue you're having.

For medium, large, XL, and max breakpoints all text (quote, source, CTA) should align to the grid with the quotation mark overhanging to the left. Only on small breakpoint should the text have extra padding inside the grid (small breakpoint is currently behaving as expected)

The horizontal rule should overhang 16px on each side of the 10 centered columns. This will make it full width on small breakpoint.

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

Pattern: Callout Quote

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

Expected that text at med, large, xl and max breakpoints will align to the grid as seen in visual specs:
image

As seen in Storybook for med, large, xl and max breakpoints - misaligned to grid, https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/2336/iframe.html?id=patterns-blocks-calloutquote--default
image

Horizontal rule should overhang grid by 16px on each side at all breakpoints. As expected from visual specs:
image

As seen in storybook link above, rule does not overhang:
image

What browser are you working in?

Chrome

Steps to reproduce the issue

Storybook link https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/2336/iframe.html?id=patterns-blocks-calloutquote--default
@ltitle ltitle added the bug Something isn't working label May 14, 2020
@RobertaJHahn RobertaJHahn added the severity 4 Affects minor functionality, no workaround needed label May 15, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-12 milestone May 15, 2020
@RobertaJHahn RobertaJHahn added the dev Needs some dev work label May 15, 2020
@ltitle ltitle mentioned this issue May 15, 2020
Closed
5 tasks
@greeshmareddyg greeshmareddyg self-assigned this Jun 16, 2020
@greeshmareddyg greeshmareddyg mentioned this issue Jun 26, 2020
Closed
@ariellalgilmore ariellalgilmore mentioned this issue Jul 20, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Jul 20, 2020
@ariellalgilmore
fix(CalloutQuote): adjust grid (#3209)
9098b1e 
### Related Ticket(s)

Pattern: Callout Quote: Misalignment to grid - #2399

### Description

### Changelog

**Changed**

-calloutquote component grid hang.

<!-- Deploy Previews are enabled by applying the following labels for the corresponding package: -->
<!-- *** "package: react": React -->
<!-- *** "package: web components": Web Components -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@RobertaJHahn RobertaJHahn mentioned this issue Aug 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ariellalgilmore ariellalgilmore

@greeshmareddyg greeshmareddyg

Labels
bug Something isn't working dev Needs some dev work severity 4 Affects minor functionality, no workaround needed
Projects
None yet
Milestone
Sprint 20-15
Development

No branches or pull requests
10 participants
@kennylam @jeffchew @ariellalgilmore @greeshmareddyg @ljcarot @wonilsuhibm @raphaelamadeu-zz @JennySanchez @RobertaJHahn @ltitle