Skip to content

Releases: NYPL/nypl-design-system

v3.0.0 React 18 / Chakra 2.8

14 Mar 18:57
3a92fad
Compare
Choose a tag to compare

Adds

  • Adds 5% and 10% opacities for the semantic colors in the color pallette.
  • Adds the Menu component.
  • Adds the MultiSelect v2 component.
  • Adds the useMultiSelect hook.

Updates

  • Updates the repo to use Node 18.
  • Updates to React 18 and Chakra 2.8.
  • Updates the StatusBadge component to add the type prop.
  • Updates the StatusBadge component to change the UI styles.
  • Updates the base Modal component to use the useDSHeading hook internally to render a DS Heading for the headingText prop.
  • Updates the Heading component to use native Chakra responsive styles to handle the font sizes of the component's internal heading, overline and subtitle elements. This also resolves the flashing font size bug that is most noticeable on slower internet connections.
  • Updates the Text component to use native Chakra responsive styles for the font sizes of the subtitle1 and subtitle2 variants.
  • Updates the NewsletterSignup component to follow NYPL recommendations and use more direct language for the email field error message.
  • Updates the default export to include FocusLock, useStyleConfig, and useMultiStyleConfig from Chakra UI.
  • Updates the default export to include the test helper "MatchMedia".
  • Updates the Accordion component to include the ariaLabel and buttonInteractionRef props.
  • Updates the Tabs component to use horizontal scrolling and arrow buttons step through tabs in mobile view.

Fixes

  • Removes console warnings from the CheckboxGroup component when a non-Checkbox component is passed as a child.
  • Fixes the responsive styles related to the image in the FeaturedContent component.

Breaking Changes

  • Removes the NewsletterSignup and SocialMediaLinks components.
  • Updates the TagSet component to allow for more properties in the tag data object. The onClick function now returns the entire data object in the callback argument instead of just the tag label.
  • Updates the Link component to follow Chakra's patterns for usage with application framework routing systems, as well as a general refactor. Usage with Next.js has been updated.

v2.1.6

22 Feb 22:44
e2563de
Compare
Choose a tag to compare

Updates

  • Updates focus ring color in Notification and Breadcrumbs to match color of text.
  • Updates the StatusBadge styles so that if an icon is passed, the icon and text line up with one another

Fixes

  • Fixes a styling issue on the range DatePicker for the month and year types
    where the in-range selected date values did not have the correct DS colors.
  • Fixes the desktop font size for the "heading5" variant in the Heading component.

v2.1.5

06 Feb 14:26
6ca9214
Compare
Choose a tag to compare

Adds

  • Adds the "navigationMoreVert" option (vertical ellipsis) to the Icon component.

Updates

  • Updates Tabs to be scrollable when the width of the tab set is greater than the viewport.
  • Updates the required comment field so it cannot be submitted when empty for the FeedbackBox component.
  • Updates the Heading component to use a custom @media query method to handle the responsive font-size styles.
  • Updates the Text component to use native Chakra responsive styles for the font sizes of the subtitle1 and subtitle2 variants.

Fixes

  • Fixes the focus ring style for the open button in the FeedbackBox component.
  • Forcibly focuses on the open button when the FeedbackBox form is closed to ensure focus is not lost.

v2.1.4

06 Feb 14:24
Compare
Choose a tag to compare

Adds

  • Adds optional placeholder and placeholderTo props to the DatePicker component.
  • Adds the "actionDelete", "actionHome", "actionLockClosed",
    "actionPayment", "communicationCall", "communicationChatBubble", and "communicationEmail" options to the Icon component.

Updates

  • Updates the DatePicker's initialDate and initialDateTo props to accept
    an empty string.

Fixes

  • Fixes bug where month and year Datepicker calendars were rendering
    vertically rather than horizontally.

v2.1.3

07 Dec 17:00
f2b8fc9
Compare
Choose a tag to compare

Adds

  • Adds the hasVisitedStyles prop to Link which is used to include or omit the visited state styles. Default value is true.
  • Adds the useDSHeading hook to render a default H2 heading or a custom heading element.
  • Adds the sizeBasedOn prop to the Image component.
  • Adds the isDarkBackgroundImage prop to the Hero component.

Updates

  • Removes disabled variant from Link theme file, as it isn't being used.
  • Updates the font-weight to "regular" for the subtitle1 and subtitle2 text styles.
  • Updates the "digitalCollectionsBlack" variant of the Logo component to use NYPL color design tokens.
  • Updates the following components to accept JSX.Element type values into their "title" prop: List, NewsletterSignup,
  • Updates the following components to accept JSX.Element type values into their "headingText" prop: AlphabetFilter, AudioPlayer, ComponentWrapper, SearchBar, VideoPlayer
  • Updates the Notification component to accept JSX.Element type values into its "notificationHeading" prop.
  • Updates the StructuredContent component to accept JSX.Element type values into its "headingText" and "calloutText" props.
  • Updates the FeaturedContent component by adjusting the spacing in the "fullScreen" variant to better align the component text content with the page text content.
  • Updates the "campaign" variant of the Hero component to improve the spacing around the component.
  • Updates the Card component so that it accepts the imageProps.isLazy prop and passes it to its internal Image component.

Fixes

  • Adds z-index on hover to the SearchBar's select icon so it no longer disappears.
  • Adds z-index to the DatePicker's calendar container so that the helper text does not shift when the calendar opens.

v2.1.2

09 Nov 20:56
62dad0c
Compare
Choose a tag to compare

Adds

  • Adds the sizeBasedOn prop to the Logo component.
  • Added the autoComplete prop to the TextInput component for setting the "autocomplete" attribute manually.

Updates

  • Updates max version for Chakra UI to 1.8.9 for minor bug fixes.
  • Updates the layout for the "campaign" variant of the Hero component to have consistent padding on its left and right sides.
  • Updates the getSectionColors function to also return dark mode color variants.
  • Updates the NewsletterSignup component's newsletterSignupType prop to render proper dark mode variant colors.

v2.1.1

30 Oct 13:08
24125ed
Compare
Choose a tag to compare

Adds

  • Adds a changelog to the story pages for the Heading component.

Updates

  • Updates the Heading component to set the aria-roledescription value as "subtitle" (a more familiar and recognizable value) for the overline element.
  • Updates the FeedbackBox and NewsletterSignup components to set the tabindex on the internal elements to "-1".
  • Updates DatePicker's TextInput to always have an aria-label attribute that tells screen reader users how to access the calendar.
  • Updates Storybook to v7.5.1.

Fixes

  • Fixes a bug in the Hero component where custom background colors were not rendering properly in dark mode for the "campaign" and "tertiary" variants.

Deprecates

  • Deprecates the "secondary" and "fiftyFifty" variants of the Hero component.

v2.1.0

18 Oct 15:59
1cd65b7
Compare
Choose a tag to compare

Adds

  • Adds the ComponentChangelogTable component.
  • Adds a changelog to the story pages for the DatePicker, FeedbackBox, Hero, Slider, and TextInput components.
  • Adds the FeaturedContent component.
  • Adds the NewsletterSignup component.

Updates

  • Temporarily renaming FilterBar, MultiSelect, MultiSelectGroup, useMultiSelect, and useFilterBar Storybook page files so they don't show up in the Storybook sidebar.
  • Updates the Slider component to use appropriate aria-label values for the slider thumbs and text input fields.
  • Updates TextInput so it no longer incorrectly overwrites the aria-describedby value to undefined when part of the DatePicker component.
  • Updates DatePicker so that focus remains on input after value is changed.
  • Updates the FeedbackBox component to remove the underline on the component's Privacy Policy link.
  • Updates DatePicker to pass a additionalHelperTextIds to its TextInput if needed so that the aria-describedby value can be associated with all relevant helperTexts.

Fixes

  • Fixes an issue with backgroundColor and foregroundColor props not prioritizing the passed design token values for the Hero component.

v2.0.1

28 Sep 20:37
4d074a8
Compare
Choose a tag to compare

NOTE: Version number 2.0.0 was previously released in 2019 and is marked as deprecated in npm. The first stable relase for Reservoir v2 is 2.0.1.

v2.0.0

28 Sep 19:01
0aede4c
Compare
Choose a tag to compare

Breaking Changes

  • This update introduces a number of visual breaking changes related to typography styles.
  • Removes the FilterBar and MultiSelect components.
  • Removes the useFilterBar and useMultiSelect hooks.

Adds

  • Adds the isUnderlined prop to the Link component.
  • Adds the "standalone" variant to the Link component.
  • Adds NYPL Patterns to the Links Accessibility Guide.
  • Adds the SocialMediaLinks component.

Updates

  • Updates underline styles of the Link component.
  • Updates the hex value for the Link Primary color style.
  • Updates the Link component so that non-button variants change color once visited.
  • Updates the Link component to explicitly assign the text color for the "buttonPrimary" variant hover state.
  • Updates all components that render text to use the Typo2023 color scheme.
  • Updates the base styles to use the Typo2023 styles.
  • Updates all components to implement the Typo2023 styles.
  • Updates the Breadcrumbs, Card, Heading, Pagination, and SkipNavigation components to implement the Typo2023 link patterns.