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

Border for Content Block components not displaying correctly #3662

Closed
larahanlon2 opened this issue Aug 20, 2020 · 0 comments
Closed

Border for Content Block components not displaying correctly #3662

larahanlon2 opened this issue Aug 20, 2020 · 0 comments
Assignees
@IgnacioBecerra
Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 20-19

Comments

@larahanlon2
Copy link

-->

Detailed description

Describe in detail the issue you're having.
When selecting the border knob in Storybook the border is appearing directly under the last item in the layout without any spacing above the border.

Screen Shot 2020-08-20 at 9 21 13 AM

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

Is this issue related to a specific component?
Content Block Simple – with aside elements

Content Block Mixed – with aside elements

What did you expect to happen? What happened instead? What would you like to see changed?
On lg, xlg, max breakpoints the spacing above the border should be 160px.
On md breakpoint the spacing above the border should be 96px.
On sm breakpoint the spacing above the border should be 64px.

What browser are you working in?
Chrome

What version of the IBM.com Library are you using?
Current

Steps to reproduce the issue

Open Storybook, select with aside elements, select 'border' knob:
https://ibmdotcom-react.mybluemix.net/?path=/story/components-contentblocksimple--with-aside-elements

Additional information

Design specs are here: https://ibm.box.com/s/7hg6ro0zkx7bb3ghut7c4attwbn625yt

Example of actual design specs for lg breakpoint:
Screen Shot 2020-08-20 at 9 41 45 AM
@larahanlon2 larahanlon2 added bug Something isn't working dev Needs some dev work labels Aug 20, 2020
@RobertaJHahn RobertaJHahn added the severity 3 Affects minor functionality, has a workaround label Aug 26, 2020
@RobertaJHahn RobertaJHahn added the package: react Work necessary for the Carbon for IBM.com react components package label Aug 26, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-19 milestone Aug 26, 2020
@IgnacioBecerra IgnacioBecerra self-assigned this Sep 16, 2020
This was referenced Sep 17, 2020
Merged
Closed
kodiakhq bot pushed a commit that referenced this issue Sep 22, 2020
@IgnacioBecerra
fix(content-block): border not displaying properly (#3992)
d2e1fa2 
### Related Ticket(s)

Issue #3662 

### Description

Provided spacing between the last item of the ContentBlock layout and the border at the bottom. This was done by adding a few CSS properties to the Layout .sccs file in order to accommodate for spacing and different screen sizes.

Before: 
![](https://user-images.githubusercontent.com/53093550/90777418-63ddb700-e2c9-11ea-9c31-375a38322b42.png)

After:

![](https://user-images.githubusercontent.com/53093550/90777807-ebc3c100-e2c9-11ea-8a0d-a20d2ddf1613.png)

### Changelog

**Changed**

- Added bottom spacing to the layout border .scss class

<!-- 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: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@jeffchew jeffchew mentioned this issue Sep 24, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 20-19
Development

No branches or pull requests
8 participants
@kennylam @jeffchew @ariellalgilmore @ljcarot @IgnacioBecerra @JennySanchez @RobertaJHahn @larahanlon2