-
Notifications
You must be signed in to change notification settings - Fork 54
Media Indicator - remove spacing on the low-level component #3062
Conversation
} from '@bbc/gel-foundations/spacings'; | ||
import { GEL_GROUP_1_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints'; | ||
import { GEL_MINION } from '@bbc/gel-foundations/typography'; | ||
import { GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like we still are using this GEL_SPACING_HLF,
When looking at where it's used, it's applied to the Time element
https://github.com/bbc/psammead/blob/302a5857b799b4f2cd192a0ccfe468ba5bd86487/packages/components/psammead-media-indicator/src/index.jsx#L33
Makes me think that this should be passed in as a Child, rather than be within this component.
We already have the children
prop.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A consequence of the change would be that other components that use psammead-media-indicator
would need to be updated.
I’ve looked at Psammead and Simorgh to see how much work this would be.
Psammead:
Stories and tests/test helpers in these two components, that can be carried out in one PR
packages/components/psammead-grid/src/index.stories.jsx:
packages/components/psammead-story-promo/src/index.stories.jsx:
packages/components/psammead-story-promo/src/index.test.jsx:
packages/components/psammead-story-promo/testHelpers/IndexAlsosContainer.jsx:
(Note, the top-level dependency in psammead would need to be updated)
In Simorgh, the changes would be to these containers - being carried out as part of the Desktop redesign: bbc/simorgh#5139
src/app/containers/StoryPromo/IndexAlsos/index.jsx:
src/app/containers/StoryPromo/MediaIndicator/index.jsx:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is still a top story photogallery
story even though topStory
styles/prop got removed
…ead into media-indicator-remove-spacing
…ead into media-indicator-remove-spacing
packages/components/psammead-media-indicator/src/index.stories.jsx
Outdated
Show resolved
Hide resolved
….jsx Co-Authored-By: Sareh <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Everything looks good, inline
toggle works properly now 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Changes look good.
Looking at the ChromaticQA snapshots, there is a visual difference in the height for the 'inline' version of the MediaIndicator - this is expected.
Resolves #NUMBER
Overall change:
After passing the
inLine
prop added in this PR to theMedia Indicator
used in theIndex Alsos
, we've realized that theMediaIndicatorWrapper
styles are not suitable.Before:
After:
For this reason, we've decided to remove the spacing on the
Media Indicator
so we can add them at a top-level in a separate PR (Story Promo/Index Alsos).Code changes:
padding
andheight
from theMediaIndicatorWrapper
topStory
test