Releases: helpscout/hsds-react
Blue - v0.0.84
Card: Fix autoWordWrap prop use for non-Links
This update resolves the issue with Card
when passing in the autoWordWrap
prop for non-Link use. Previously, it would pass the prop into a div
selector, resulting in a warning.
Tests have been added for this update! 🎉
Blue - v0.0.83
CloseButton enhancements and Overflow fixes
This update adds hover, active, and focus CSS styles to the CloseButton.
A storybook example for CloseButton has also been setup to demo these
new styles, as well as the various sizes CloseButton provides.
Overflow enhancement 💪
Also in this update are fixes for Overflow, which was affected when used
with Tags. Overflow has been updated to better handle child components
wrapped with Animate. An additional check is done on mount via a setTimeout
,
which can be adjusted, to check and re-adjust the height of Overflow.
This is useful for things wrapped in Animate, as they typically don't exist
in the DOM for the first couple of render cycles.
Tag/Badge enhancements ✨
Lastly, some enhancements were made to the Tag and Badge components,
specifically adding a display
prop which enables them to render with
display: block
or display: inline-block
. For certain UI, this was
useful to ensure consistent UI height. This was spotted when testing out
the ChatList.Item component.
Blue - v0.0.82
Utilities: Expose all of Blue's utils
This update exposes all of Blue's utils, making them available to be
imported and used.
All of the utilities come bundled within a utilities
object.
Example
import { smoothScroll } from '@helpscout/blue/utilities'
// Now you can do things with smoothScroll.smoothScrollTo()!
Alternatively, you can do this (which might not be recommended, as it imports all the utils):
import { utilities } from '@helpscout/blue'
const {
smoothScroll
} = utilities
// Now you can do things with smoothScroll.smoothScrollTo()!
Blue - v0.0.81
Card: Add fullHeight styles
This update adds a new prop to the Card component allowing it to have
full height styles (height: 100%
). This is useful for when the Card
is contained within a flex-based element, and you require the Card
to expand the entire height of the parent element.
Text/Heading: Add linkStyle
and center
styles
This update updates the Text and Heading components with 2 new props:
linkStyle
and center
. This props apply CSS styles that make the
text look like Links and center-align text (respectively).
Blue - v0.0.80
Modal: Provide delay for CloseButton reposition
This update adds a new prop to Modal
, which provides a delayed time before
the CloseButton is repositiioned (if the CloseButton is enabled).
This is necessary for certain situations where content that's injected into
the Modal.Body
changes size, from a no-scrollbar state to a scrollbar state.
An example would be media (like images) unfurling during the mount state,
which is hidden via the Animation transition.
This is very edge-case, but it's something that I saw during Beacon
integration.
Testing: Jest/Travis
This update also changes Jest's setting to --runInBand
to ensure more reliable and stable tests in Travis. The downside to this is that it slows down the test run a bit 😢
Blue - v0.0.79
Most 🐛 Fixes!
Modal: Can open/close with isOpen prop change
This update fixes PortalWrapper to open/close the composed component
(Modal, Drop) with an isOpen prop change.
Jest tests were added for PortalWrapper, Modal and Drop. Karma tests were
also added for Modal.
Resolves: #164
Input : Allow state to be updated by new value
prop
When the input is initialized, the value property of its state is set to the passed value prop. The value prop on the internal state is then only updated via the handleOnChange
. This is fine when the user is in control of the input. There may be times however, where we want to update the value on the internal state programatically, such as allowing a picker to inject content, as shown below.
This PR updates the Input component such that the value on the internal state can be updated by passing a new value prop to the component.
Blue - v0.0.78
Modal: Allow reposition CloseButton in sub components
This update adds the positionCloseNode
method from Modal as context,
which allows the Modal.Body
sub-component to call it on mount.
Typically, this should happen by default. However, there may be cases
where Modal.Body
gets injected asynchronously (like transitioning from
loading -> loaded states).
This all fires behind the scenes. No changes are required for users of Modal
😄
Blue - v0.0.77
Modal.Content: To handle null children
This update fixes the Modal.Content
sub-component to also
handle null
children content. Tests for null
were added to
Modal.Content
and Modal
.
Blue - v0.0.76
Modal: Handle null child
This update accounts for the rare edge case where a child component
of a Modal may be null
.
Blue - v0.0.75
Modal and List: Bug Fixes
This update is a follow-up to the Modal.Content sub-component addition.
When implementing the new Modal structure, I discovered by rejecting
non-sub-component children, it causes unexpected issues for wrapper-like
components.
This restriction has been removed for Modal.
It is still highly recommended that you use either Modal.Body or Modal.Content to ensure that the UI looks correct.
There was a CSS bug that was introduced into Lists during the Tag
enhancement, which changed the display from block
to flex
.
This update fixes this by defaulting to a display of block
, but
providing the ability to use flex
via a prop.
Follow-up to https://github.com/helpscout/blue/releases/tag/v0.0.73