What's Changed

New Features 🎉

chore(PPDSC-2837): update TNL font by @evgenitsn in #649
feat(PPDSC-2838): use new s3 for pr links by @Xin00163 in #663
feat(PPDSC-2798): expose css variables by @mutebg in #653

Bug Fixes 🐛

fix(PPDSC-1866): handle string line height by @mstuartf in #643
Fix/ppdsc 2611 revert by @mstuartf in #656
fix(PPDSC-2829): add inverse focus outline styles by @mstuartf in #639
Fix/ppdsc 2854 flaky tests by @mstuartf in #680

Other Changes 🧱

chore(PPDSC-2732): migrate staging docs from k8s to S3 by @JohnTParsons in #638
ci(PPDSC-2746): migrate prod docs from k8s to s3 by @JohnTParsons in #644
docs(PPDSC-2801): update Label storybook scenarios by @evgenitsn in #652
docs(PPDSC-2668): standfirst page by @mstuartf in #651
docs(PPDSC-2805): update Ordered list component storybook scenarios by @evgenitsn in #654
chore(PPDSC-2832): simplify percy regeneration script by @JohnTParsons in #658
docs(PPDSC-2807): update Paragraph component storybook scenarios by @evgenitsn in #659
docs(PPDSC-2821): update TextBlock component storybook scenarios by @evgenitsn in #661
docs(PPDSC-2667) image documentation by @RashikaNewsUK in #647
Chore/ppdsc 0000 v7 release by @mstuartf in #675
docs(PPDSC-2811): update screen-reader-only scenarios by @mutebg in #662
docs(PPDSC-2819): update StructuredList component storybook scenarios by @evgenitsn in #673
docs(PPDSC-2796): video player documentation by @RashikaNewsUK in #670
docs(PPDSC-2812): update scroll stories by @mutebg in #667
Docs/ppdsc 2562 content updates miscellaneous by @jannuk59 in #633

Full Changelog: v6.9.0...v7.0.0

Changes:

Card

The card’s default style preset have changed. headlineHeadingInteractive style preset has changed color in the base state.

Before

base: {       
  color: '{{colors.inkBase}}',    
},

After

base: {       
   color: '{
      {colors.inkContrast}}',     
},

If you want to keep the previous color we suggest you change the headlineHeadingInteractive style preset from your theme, with the previous color

Divider

The DividerInverse style preset has changed.
Specifically, the border color from borderColor: inkInverse to borderColor: interface010

If you want to keep the old styling, please add a style preset for the Divider in your theme containing the old tokens

Before

{
  dividerInverse: {
    base: {
      borderStyle: 'solid',
      borderColor: '{{colors.inkInverse}}',
      borderWidth: '{{borders.borderWidthDefault}}',
    },
  },
}

After

{
  dividerInverse: {
    base: {
      borderStyle: 'solid',
      borderColor: '{{colors.interface010}}',
      borderWidth: '{{borders.borderWidthDefault}}',
    },
  },
}

Accordion

The accordion defaults transition preset has been changed in V7.

Before

accordion: {
    header: {
      transitionPreset: 'backgroundColorChange',
      ...
    },
  }

After

accordion: {
    header: {
      transitionPreset: ['fontColorChange', 'backgroundColorChange'],
      ...
    }
}

accordionHeader style preset has also been changed:

Before

accordionHeader: {
  base: {
    backgroundColor: '{{colors.interface010}}',
    ...
  },
  hover: {
    ...
  },
  disabled: {
    ...
  },
},

After

accordionHeader: {
  base: {
    backgroundColor: '{{colors.interfaceBackground}}',
    ...
    iconColor: '{{colors.inkBase}}',
  },
  hover: {
    ...
    iconColor: '{{colors.interactiveInput040}}',
  },
  disabled: {
    ...
    iconColor: '{{colors.inkNonEssential}}',
  },
}

AudioPlayer

A few changes have been made to the AudioPlayer component styling in v7:

Default AudioPlayerTimeDisplay typographyPreset changed from utilityButton030 to utilityLabel020
Default AudioPlayerVolumeControl spaceBetween changed from space030 to space010
Default AudioPlayerPlayPauseButton size changed from large to medium
audioPlayerVolumeControlThumb style preset updated
audioPlayerVolumeControlPopover style preset updated

Follow these steps to restore the old styling to the AudioPlayer component:

1. Pass a size prop to the AudioPlayerPlayPauseButton:

- <AudioPlayerPlayPauseButton />
+ <AudioPlayerPlayPauseButton size="large" />

2. Add a spaceBetween override to the AudioPlayerVolumeControl:

- <AudioPlayerVolumeControl />
+ <AudioPlayerVolumeControl overrides={{spaceBetween: ‘space020’}} />

3. Add a typographyPreset override to the AudioPlayerTimeDisplay:

- <AudioPlayerTimeDisplay />
+ <AudioPlayerTimeDisplay overrides={{typographyPreset: ‘utilityLabel010’}} />

4. Restore the old audioPlayerVolumeControlThumb style preset:

audioPlayerVolumeControlThumb: {
    base: {
      boxShadow: '{{shadows.shadow010}}',
      backgroundColor: '{{colors.interactivePrimary030}}',
      borderStyle: 'solid',
-     borderColor: '{{colors.interactivePrimary010}}',
+     borderColor: '{{colors.interfaceBackground}}',
      borderWidth: '{{borders.borderWidth010}}',
      borderRadius: '{{borders.borderRadiusCircle}}',
      iconColor: '{{colors.inkNonEssential}}',
    },
  },

5. Restore the old audioPlayerVolumeControlPopover style preset:

audioPlayerVolumeControlPopover: {
    base: {
-     boxShadow: '{{shadows.shadow050}}',
+     boxShadow: '{{shadows.shadow060}}',
      borderRadius: '{{borders.borderRadiusDefault}}',
-     backgroundColor: '{{colors.interfaceBackground}}',
+     backgroundColor: '{{colors.interface010}}',
    },
  },

Banner

Padding and grid overrides have been changed in the Banner component in v7.

To restore the old styling add padding and grid overrides as follows:

- <Banner />
+ <Banner
+   overrides={{
+     paddingInline: "spaceInset045",
+     paddingBlock: "spaceInset045",
+     grid: {
+       props: {
+         xsMargin: "space040",
+         smMargin: "space040",
+         mdMargin: "space040",
+         lgMargin: "space050",
+         xlMargin: "space050",
+         xsRowGutter: "space040",
+         smRowGutter: "space040",
+         mdRowGutter: "space040",
+         lgRowGutter: "space050",
+         xlRowGutter: "space050",
+         xsColumnGutter: "space040",
+         smColumnGutter: "space040",
+         mdColumnGutter: "space040",
+         lgColumnGutter: "space050",
+         xlColumnGutter: "space050"
+       }
+     }
+   }} />

OrderedList

If a paragraph of text is supplied to OrderedList, the second line onwards will left align with the first line, not with the number, for consistency with UnorderedList behaviour.

Slider

The Slider component defaults and sliderLabels style preset have been changed in V7.

component defaults

Before

slider: {
  track: {
    size: 'sizing030',
    ...
  },
  ...
}

After

slider: {
  track: {
    size: 'sizing020',
    ...
  },
  ...
  }

StylePreset:

color and iconColor for base state has been changed sliderLabels stylePreset:

Before

sliderLabels: {
  base: {
    color: '{{colors.inkSubtle}}',
    iconColor: '{{colors.inkSubtle}}',
    ...
  },
  ...
}

After

sliderLabels: {
  base: {
    color: '{{colors.inkBase}}',
    iconColor: '{{colors.inkBase}}',
    ...
  },
  ...
}

Popover

The Popover style presets have been changed in V7.

Before

popover: {
  base: {
    boxShadow: '{{shadows.shadow050}}',
    ...
  },
  ...
},
popoverPanel: {
  base: {
    color: '{{colors.neutral090}}',
    ...
  },
  ...
},
popoverHeader: {
  base: {
    borderColor: '{{colors.neutral040}}',
    ...
  },
  ...
},
popoverCloseButtonContainer: {
  base: {
    borderColor: '{{colors.neutral040}}',
    ...
  },
  ...
}

After

popover: {
  base: {
    boxShadow: '{{shadows.shadow060}}',
    ...
  },
  ...
},
popoverPanel: {
  base: {
    color: '{{colors.inkBase}}',
    ...
  },
  ...
},
popoverHeader: {
  base: {
    borderColor: '{{colors.interface050}}',
    ...
  },
  ...
},
popoverCloseButtonContainer: {
  base: {
    borderColor: '{{colors.interface050}}',
    ...
  },
  ...
}

Select

The Select component defaults have been changed in V7.

Before

select: {
  small: {
    button: {
      minHeight: 'sizing060',
      ...
    },
    ...
  },
  medium: {
    button: {
      spaceInset: 'spaceInset020',
      typographyPreset: 'utilityBody020',
      ...
    }
    ...
  },
  large: {
    button: {
      spaceInset: 'spaceInset030',
      ...
    }
    ...
  },
},
selectOption: {
  medium: {
    minHeight: 'sizing080',
    spaceInset: 'spaceInset020',
    ...
  },
  large: {
    minHeight: 'sizing090',
    spaceInset: 'spaceInsetStretch030',
    ...
  }
}

After

select: {
  small: {
    button: {
      minHeight: 'sizing070',
      ...
    },
    ...
  },
  medium: {
    button: {
      spaceInset: 'spaceInset030',
      typographyPreset: 'utilityBody030',
      ...
    }
    ...
  },
  large: {
    button: {
      spaceInset: 'spaceInset040',
      ...
    }
    ...
  },
},
selectOption: {
  medium: {
    minHeight: 'sizing070',
    spaceInset: 'spaceInsetSquish020',
    ...
  },
  large: {
    minHeight: 'sizing080',
    spaceInset: 'spaceInsetSquish030',
    ...
  }
}

Tag

The Tag component defaults have been changed in V7.

StylePreset: tagPrimary stylePreset

Before

hover: {
  backgroundColor: '{{colors.interactiveSecondary020}}',
},
active: {
  borderWidth: '{{borders.borderWidth010}}',
},

After

hover: {
  backgroundColor: '{{colors.interactiveSecondary010}}',
},
active: {
  backgroundColor: '{{colors.interactiveSecondary020}}',
}

borderWidth has changed to backgroundColor: '{{colors.interactiveSecondary020}}', for activestate in stylePresent tagPrimary`

backgroundColor has changed to backgroundColor: '{{colors.interactiveSecondary020}}'for hover state in stylePresent tagPrimary

Link

The Link component which was deprecated in v6 is now removed from newskit in favor the other two link components: LinkInline and LinkStandalone.

The difference between the two you can see in our updated docs page: Link

There is a codemod scripts for replacing old instances of Link with LinkInline or with LinkStandalone.

CaptionInset

CaptionInset has been removed in favour of Caption. You can achieve the same functionality by adding paddingBlock and paddingInline as overrides.

- <CaptionInset />
+ <Caption overrides={{paddingBlock:  "space040",  paddingInline: "space040"}} />

There is also caption-inset codemod which replaces all instances of CodeInset with Caption with correct overrides.

Tooltip

The Tooltip component has a renamed override prop - from distance to offset

There is a codemod script for updating this change automatically to your codebase:

Before

overrides: {
  distance: 'space020',
  ...
}

After

overrides: {
  offset: 'space020',
  ...
}

Popover

The Popover component has a renamed override prop - from distance to offset

There is a codemod script for updating this change automatically to your codebase:

Before

overrides: {
  distance: 'space020',
  ...
}

After

overrides: {
  offset: 'space020',
  ...
}

AudioPlayerVolumeControl

The AudioPlayerVolumeControl component has a renamed override prop - from distance to offset

There is a codemod script for updating this change automatically to your codebase:

Before

overrides: {
  popover: {
    distance: 'space020',
    ...
  }
  ...
}

** After**

overrides: {
  popover: {
    offset: 'space020',
    ...
  }
  ...
}

Tab

The Tab component defaults have changed in V7.
Before

tab: {
  large: {
    spaceInset: 'spaceInsetSquish030',
    ...
},

After

tab: {
    large: {
      paddingBlock: 'space040',
      paddingInline: 'space050',
      ...
    },
  },

TextField

The TextField component defaults have changed in V7.

Before

textField: {
  large: {
    spaceInset: 'spaceInset030',
    ...
  },
},

After

textField: {
  large: {
    paddingInline: 'space040',
    paddingBlock: 'space040',
    ...
  },
}

spaceInset override

spaceInset was removed from the components' types interface and is now replaced by logical properties PaddingInline & PaddingBlock.
spaceInset props in component defaults have also been replaced with logical properties but the tokens remain the same (Any token changes will be listed separately). The following component are impacted:

Banner Block Card Dialog Fieldset Flag Grid-layout Menu Select Strucuture-list Text-field Tabs Title-bar Toast Video-player

Take the Button component for an example:

Before:

button: {
    small: {
      spaceInset: 'spaceInsetSquish020',
      ...
    },
    medium: {
      spaceInset: 'spaceInsetSquish030',
      ...
    },
    large: {
      spaceInset: 'spaceInsetSquish040',
      ...
    }
}

After

button: {
  small: {
    paddingInline: 'space030',
    paddingBlock: 'space020',
   ...
  },
  medium: {
    paddingInline: 'space040',
    paddingBlock: 'space030',
  ...
  },
  large: {
    paddingInline: 'space050',
    paddingBlock: 'space040',
    ...
  },
},

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v7.0.0

What's Changed

New Features 🎉

Bug Fixes 🐛

Other Changes 🧱

Changes:

Card

Divider

Accordion

AudioPlayer

Banner

OrderedList

Slider

Popover

Select

Tag

Link

CaptionInset

Tooltip

Popover

AudioPlayerVolumeControl

Tab

TextField

spaceInset override

Contributors