v4.19.0

Added

• Shared styles can now be imported in SCSS from
  ~pc-nrfconnect-shared/styles.
• When users start an app, the pane is opened again, that was open
  when they left the app the last time. Only the about pane is ignored,
  because we assume people are not interested in returning to the about
  pane.

Changed

• Types for the exported colors got more specific.
• The format for specifying the panes of the app as a property to the
  App component has changed. See below for details.

Steps to upgrade when using this package

• If you had an import like

  @import '~pc-nrfconnect-shared/src/variables';

  in your SCSS code before, you should replace it with

  @import "~pc-nrfconnect-shared/styles";

  because even though for now the code with
  ~pc-nrfconnect-shared/src/variables will keep on working, it is
  not part of the public API that we try to preserve. Contrary to
  ~pc-nrfconnect-shared/styles, which is part of the supported API.
• Previously panes were defined as a pair of pane name and component,
  like this:

  panes={[
    ['Dashboard', Dashboard],
    ['Terminal', Terminal],
  ]}

  This was changed to an array of objects, like this:

  panes={[
    { name: 'Dashboard', Main: Dashboard, },
    { name: 'Terminal', Main: Terminal, },
  ]}

  The old format still is supported but will issue a warning and will
  be removed in the future.

v4.18.0

4.18.0

Changed

• Updated functions in the usageData object for sending usage data to
  Google Analytics.

Steps to upgrade when using this package

• When you are using usageData:
  • Change the parameter when calling init
  • Replace calls to sendEvent with sendUsageData

v4.17.3

Fix

• Property active was missing in the TypeScript definition of the pane
  components.

v4.17.2

Fix

• Not defining an app reducer led to an error.

v4.17.1

Changed

• Updated nRF5340 links from PDK to DK.

v4.17.0

Added

• Currently active pane: Selector currentPane to query it and action creator setCurrentPane to change it.

Fix

• When clicking on URLs in log entries the web site was not opened on macOS.

Changed

• Add links to product page and distributors for the PPK2.
• Check stricter order of the imports during linting.

Steps to upgrade when using this package

• The stricter check for order of the imports while linting will probably make your linting fail after upgrading. So it is recommended to run npm run lint -- --fix once after updating, checking all the changes (most will be ok but there are very seldom cases where order is important like in test/setupTests.js in this project) and then commit all these small order changes.

v4.16.1

Fix

• The opacity of disabled elements stacked up when they were nested. E.g.
  in the following code the input had the opacity applied twice (making the
  opacity squared), so it looked lighter than than supposed:

<div className="disabled">
  This{' '} 
  <InlineInput disabled value="doubled"/>
</div>

v4.16.0

Added

• The components Slider, InlineInput and NumberInlineInput now take a
  property disabled.
• All other elements can also be rendered to have a disabled (opaque) look by
  adding the class name disabled to them. This does only change the look, not
  their behaviour.
• A convenience function classNames can be used to construct compound class
  names. It filters out all values that are not strings. The idea of this
  function is to use it with conditionals and potentially unset values like
  this:

       classNames(
            'fixed-class-name',
            isVisible && 'visible',
            isEnabled ? 'enabled' : 'disabled',
            potentiallyUndefined,
       )

• Set a property active on all rendered panes that is only for the currently
  active true and false for all others. This can be used to disable
  rendering of expensive components on inactive panes or to trigger effects
  when a pane gets activated or deactivated like this:

       useEffect(() => {
         if (active) {
            // do stuff on activation
            return () => {
               // do stuff on deactivation
            }
         }
       }, [active])

• The component Slider now takes a property ticks to display ticks at all
  possible values. This only looks reasonable if there are just a few possible
  values.

Changed

• Adapt the styling of disabled Sliders and alike also for the Toggle
  component.
• Components InlineInput and NumberInlineInput grow and shrink depending
  on their current content.

Fixed

• Call the onChangeComplete on the component NumberInlineInput with the
  current value as a number, not as a string as it was before.

v4.15.0

Added

• New components SidePanel, Group and CollapsibleGroup
  which one can use in an app's implementation of a side panel.
• New hook useHotKey to register a hotkey for an action. It is automatically
  removed when the component is unmounted.

Changed

• The default margin at the top and bottom of the side panel is removed.

Steps to upgrade when using this package

• When upgrading to this version it is recommended that apps start using the
  new components SidePanel, Group and CollapsibleGroup to implement
  their side panel, which will automatically take care of the removed top and
  bottom margins. If you prefer to implement a side panel without them, then
  you should check whether you add appropriate margins yourself.

v4.14.4

Updated

• Revert change from 4.14.2: Enable import/no-cycle ESLint rule again