All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
Prefix the change with one of these keywords:
- Added: for new features.
- Changed: for changes in existing functionality.
- Deprecated: for soon-to-be removed features.
- Removed: for now removed features.
- Fixed: for any bug fixes.
- Security: in case of vulnerabilities.
- Removed: Support for React 16
- Removed:
ViewerContainer
component
- Fixed: issue with not programmically changing the active / initial tab on
Tabs
component - Deprecated:
initialTab
inTabs
component. Please useactiveTab
instead. - Added: Quote component
- Fixed: Taskflow button has better focus state
- Changed: BREAKING hooks object is not exported anymore. You can import hooks now directly, for example import { useFocus } from '@amsterdam/asc-ui' #1528
- Removed: BREAKING the variant prop in Checkbox component, #1539
- Changed: Breadcrumbs component now marked as stable
- Changed: Line-height of breadcrumbs component according to spec.
- Fixed: Search button in header is elongated #1227
- Fixed: Searchbar focus management #1485
- Removed: BREAKING
Focus
component #1507 - Removed: BREAKING Variant prop in Radio component, tertiary variant is now default #1125
- Added: Support for React 17
- Changed: BREAKING Minimum React version is now
16.14.0
- Changed: BREAKING Minimum Styled Components version is now
5.1.0
- Added:
headerLogoTextAs
prop toHeader
component to overwrite the defaulth1
tag - Fixed: The
Select
component shows the default browser focus - Changed: The
as
andforwardedAs
props are now correctly typed with theElementType
type.
- Changed: Types for the
Alert
component (AlertProps
andAlertLevel
) are now exported from the package root.
- Added: New
Breadcumbs
component #1241 - Fixed:
Modal
component no longer produceszIndexOffset
exceptions #1289 - Fixed:
Tag
component width is now displayed correctly in IE11 #634 - Changed:
ContextMenu
will now work without managing theopen
prop from a parent component #1321 - Changed: Most of the documentation has been re-written to use the MDX file format #558
- Changed:
Button
component now changes background color when focussed #1296 - Changed: BREAKING the
Alert
levels have been modified to align to their respective function #1295
- Added:
initialTab
prop toTabs
component
- Changed:
ButtonProps
is now exported publicly from the package.
- Changed: Moved packages to @amsterdam organization on NPM.
- Fixed: issue where the
Select
component would call theonChange
callback both on component mount as well as on value change. - Changed: Refactored and exported
srOnlyStyle
for screen-reader only elements.
- Fixed: Previous version did not publish, use this one instead.
- Fixed: Radio button active state had bug on IE11
- Fixed: alert close button overrides min-width
- Fixed: Buttons need to be at least 90px width
- Changed: Changed Tabs TabButton
color
in accordance with Design System, added padding to tab content in Tabs stories - Changed: Tabs container fade is now same width as tab-button right margin
- Fixed: Icon overlay of Checkbox now ignores pointer events
- Fixed: Taskflow button had a styling issue when focussed
- Removed: style rule
max-width: 620px
from FormTitle - Added: A new experimental
Tabs
component for tabbed content. - Deprecated:
icon
prop now only accepts strings:download
orexternal
. If you want to use a custom icon, please pass it as a child - Changed:
icon
prop to render a download or external link icon - Deprecated:
with-chevron
variant in Link component. Please useinList
prop instead - Removed: custom (yellow) focus-styles on focussable components, so it will now use the browser's default
- Removed: BREAKING
fillWhenFocused
,focusFill
,outlineWhenFocused
andfocusOutline
- Removed: BREAKING
focusStyle
prop inLink
component - Added:
CompactThemeProvider
now accepts the same props asThemeProvider
- Changed: Utility functions for applying focus styling are now exported (
focusOutline
,outlineWhenFocused
,focusFill
, andfillWhenFocused
) - Fixed: The Select component with the
disabled
prop had an issue with background-color (See PR) - Changed: BREAKING indeterminate state on checkbox should only work when
checked === false
and not truthy. This also inverts behaviour when clicking on an indeterminate checkbox: it will enable all instead of disable all first - Added: Form elements Checkbox and Radio now have a white background (instead of transparent) (see PR).
- Added: SVG assets for Ball, Bell, Broom, Building, Buildings, Camera, Car, ChargingPoint, ChatBubble, Chatting, Clock, Collaborate, DocumentCheckmark, DocumentEdit, DocumentEuroSign, EditDocument, Energy, EuroCoin, FastForward, Favourite, Filter, FontEnlarge, FullScreen, HandEuroCoin, Handicap, HousePlant, Housing, IdentityCard, Info, Lamp, Layers, List, LocationFields, MarketStall, Minimize, Pause, PersonDesk, PersonalLogin, Phone, Picture, Plane, Play, Pointer, PublicParks, Purse, Reaction, Religion, Replay, Ruler, Share, Stop, Student, Suitcase, Swimming, ThumbnailResults, ThumbsDown, ThumbsUp, UmbrellaChairs, Video, Volume, VolumeOff, Vote, Wifi icons
- Changed: SVG Ellipsis icon
- Changed: BREAKING Removed fill attribute from SVG ChevronSorting icon
- Changed: Introduced
createEvent
utility to support creating events in older browsers. - Removed: BREAKING previously marked deprecated components
- Changed: Link component works better on dark backgrounds
- Changed: BREAKING Footer components. Check out footer story for example on usage
- Added: Export
SelectWrapperStyle
- Changed: BREAKING set height of input and select elements to 44px (from 40px) to match the design system
- Added: Make it possible to programmatically set the value and value label for the select component
- Added: general
deprecatedWarning
- Deprecated:
color
prop inParagraph
andTypography
components. Instead use your own custom style rules. - Changed: updated the styling of
Alert
conform to design system - Changed: Select can now handle large texts by overflowing into an ellipsis
- Changed: BREAKING removed the
compact
prop/variant inAlert
- Changed: BREAKING
svgFill
now only accepts CSS color literal or aThemeFn
which returns a CSS color (see: Amsterdam#594). - Changed: BREAKING The
Link
component no longer supports passing in acolor
prop, use a styled component with thesvgFill
instead. - Changed: BREAKING elements using
aria-hidden
are no longer set todisplay: none
- Fixed: BackDrop component is now decoupled from React Portals
- Fixed: Button in the SearchBar component is now aligned with the TextField
- Fixed: Toggle now hides elements inside properly
- Deprecated:
onDarkBackground
prop inLink
. UsedarkBackground
instead. - Added: make it possible to define which boundaries should be used for edge detection
- Changed: ContextMenu list is positioned absolute now
- Added: ContextMenuSelect component, to be used for touchscreens. Check out the story on how to implement
- Changed:
::after
and::before
pseudo elements are now also set tobox-sizing: border-box;
by default - Changed: HTML5 elements are set to display block for older browsers
- Added: Supplement colors to default theme
- Changed: Stabilized TopTaskLink
- Added:
directChildrenOnly
argument foruseFocusWithArrows
hook - Added:
noMultiline
prop to Accordion. - Changed: Accordion displays multiline title by default
- Changed: slight changes to icons in asc-assets': Pano, Map, DocumentText, Data and Api
- Added:
Alert
component has a new variant:warning
- Added: ErrorMessage component
- Added: Added TextArea component
- Added: Added FormTitle component (see design system)
- Fixed:
Radio
andCheckbox
warnings on newsetState()
updates by react-dom. Check here for more info. - Changed: Internal SVG icon imports are replaced with React components, eliminating the need for including an SVG loader (closes #459)
- Added: Added TopTaskLink component
- Added:
theme
prop toThemeProvider
to pass a custom theme - Changed: BREAKING ASC now ships with ESM modules using the
module
field. Make sure that the code is transformed properly if you need to support older platforms (see the documentation or this example WebPack project). - Changed: BREAKING
createTheme
method fromTheme
. - Changed: BREAKING removed
themeName
fromThemeProvider
- Changed: BREAKING removed
asc-core
package.Theme
andascDefaultTheme
can now be found inasc-ui
- Changed: BREAKING
AlertMessage
export is renamed toAlert
. - Changed: BREAKING
Icon
component refactored color attribute to being string with css color. - Changed: BREAKING removed the
errorMessage
prop inSelect
. Use theerror
prop and the ErrorMessage component - Changed: BREAKING removed the
errorMessage
prop inTextField
. Use theerror
prop and the ErrorMessage component - Added Hidden component
- Changed: AmsterdamLogo is now the default logo in the Header
- Changed: Breaking
SearchBar
-onChange
andonSubmit
will pass an event now instead of the input value - Deprecated:
SearchBar
-onWatchValue
andonSubmit
button. Instead wrap the component in aform
element with anonSubmit
and useonChange
andonClear
instead ofonWatchValue
- Removed:
text-decoration
hover styling from theHeaderTitle
component (according to design system) - Added: indeterminate state to Checkboxes
- Changed: BREAKING package
styled-components
is now a peer-dependency inasc-core
! Include the packagestyled-components
in your project. - Changed: The
TextField
component does now have an associated label - Changed: Discernible name for the
AmsterdamLogo
anchor - Changed: Accessible names for the
ShareButton
component - Added: Accordion component
- Added: Alert component
- Deprecated:
GridContainer
&GridItem
, useRow
withColumn
instead - Changed: arrowIcon on ContextMenu is not required anymore
- Changed: BREAKING dropped support for
$as
prop (used components: Button, Tag, Heading, FooterHeading and Link). Use styled-component'sforwardedAs
prop instead - Changed: BREAKING
objectFitPolyfill
is now a peerDependency inasc-ui
- Changed: Header logo can be passed as a prop in the Header component.
- Changed: BREAKING Moved
@datapunt/asc-assets/assets/**
to@datapunt/asc-assets/static/**
(lowercase) - Changed: The
perceivedLoading
utility is now exported so it can be used in other apps - Added: Make it possible to pass a z-index offset to the backdrop
- Added: CompactPager component
- Fixed: Breaking z-index on the
Header
- Changed: Removed
background-color
style for List comp - Fixed: click outside modal box didn't close the modal
- Added: "open" prop to MenuToggle to also control the open-state outside of the component
- Added: Select (dropdown) component.
- Changed: TextField got new
FormLabel
witherrorMessage
- Changed: FormLabel has updated style (to design system)
- Changed: Input has
error
variant - Added: RadioGroup component.
- Changed: Radio component. (completely redeveloped)
- Changed: FilterBox component (removed show more button + sublabel)
- Fixed: IE11 support, by adding
babel-loader
to webpack config - Added: FilterTag component.
- Changed: Keep the toggle component background colour when toggled and not toggled.
- Added: Export a
BackDrop
component that can be used for i.e. React Portals - Changed: Setup for managing the
z-index
of the project's components,z-index
can now be imported in single projects - Added:
active
prop to MenuButton to enable activeStyles (instead of only on:hover, :focus
) - Fixed: Update styling on
Text Button
variant - Fixed: Menu also closes
OnMouseLeave
when it was opened with anonClick
event - Added: ViewerContainer component, a placeholder on viewers to hold components
- Fixed: Modal issue: closing modal when clicking on it
- Expose context components to be used in custom components
- Added: Functionality to publish a canary release for internal testing
- Added: Checkbox has a new variant: 'tertiary'
- Changed: Publish script for stable releases has changed, due to addition of canary releases
- Removed: Breaking change:
css
prop for SearchBar and SearchBarToggle.
- Added: Button has a new variant: 'application'
- Added: Components "FilterBox" and "FilterOption"
- Added: LabelContext for getting an active state when used with a Checkbox
- Added: default
position
prop for Label(Text) is 'right' - Added: Checkbox has Error state, by passing an
error
prop - Fixed: updated Checkbox according to design system
- Added: accessibility support for MenuFlyOut to navigate with arrow keys when open
- Fixed: firefox issue with blurring on MenuFlyOut
- Fixed: reset the breakpoints for typography in the CompactTheme as they are not used in this theme
- Added: Make it possible to order the ListItems inside a List component by passing an
order
prop - Added: OrderedList component
- Changed: Card and ImageCard 'loading' prop to 'isLoading'
- Changed: max-width on Container is now desktop (1920px)
- Changed: max-width on HeaderWrapperStyle is moved to HeaderStyle.
- Removed: specific parameter hasLongText from the paragraph, will be implemented in the consumer applications
- Changed: the breakpoints for the typography font sizes are changed to from
tabletS
tolaptop
- Removed: width: 100% on CustomHTMLBlock img and video
- Added: theme spacing unit and a themeSpacing util to retrieve a size from the theme's spacing unit.
- Fixed: issue with button's size
- Changed: The
max-width
value of the header is now defined by the max width of the grid in the theme configuration - Deprecated:
fromTheme
util method. UsegetValueFromTheme
instead
- Fixed: issue with button's margin
- Added: bullet-list style to List component
- Removed:
Dataportaal
implemenation for header and frontpage blocks - Added: extra focus style options
- Added: Button variants
Text button
(transparent and borderless) andTaskflow button
(adds narrow arrow on the right side of the button)
- Added: export CompactThemeProvider
- Added: Checkbox component
- Deprecated: Renamed the
color
function for extracting a color from the theme tothemeColor
for resolving ambiguity with the color prop in css
- Fixed: svg object contains svg's again
- Changed: Set Modal's className on wrapper (solved issue where className was set on Portal component)
- Fixed: IE11 issue in Article component
- Deprecated: 'linkType' on Link component. Please use variant instead.
- Added: Able to pass a 'color' prop to Link
- Changed: Link now has a default color black
- Removed: margin-top from Footer and max-width from FooterContent (very specific styling)
- Changed:
MenuFlyOut
no longer opens on tab keydown, onlyenter
orspace
(besidesclick
ormouseover
) - Changed: LinkList(LinkListItem) is renamed to List(ListItem), the Link functionality has to be done in the implementation
- Changed: Breaking change, ListItem(div) is replaced by a ListItem(li), was used as block container in the Modal, Should be replaced in the implementation
- Added: MenuButton component: this now can be used as a button or link inside MenuItem
- Changed: BREAKING MenuItem now doesn't accept any onClick or href props: it's just a wrapper now. Use MenuButton inside MenuItem
- Removed: functionality to use arrows inside a MenuFlyOut / MenuToggle. This created a lot of (unnecessary) complexity. Perhaps will be added in the future if really needed.
- Added: Card components with implementation stories
- Added: tag component
- Added: new way of loading svg's: instead of importing like this:
import Logo from '@datapunt/asc-assets/lib/assets/Icons/Logo.svg'
you now can use the svg object:import { svg } from '@amsterdam/asc-assets'
and load it like this:background-image: url(${svg.Logo})
- Added: Image component can render images as a square (including IE11)
- Added: react-docgen-typescript-loader to storybook config for showing props with description
- Added: font-display: swap; in font-face definitions
- Added: separate tsconfig for building the lib: now excludes .test and .stories files
- Deprecated: Made IconButton, ButtonBar and ShareBar deprecated. Also refactored this in other components than use IconButton
- Added: stories for buttons
- Changed: Refactored the Button component to use the prop "variants" instead of "color".
- Removed: ShareBar, named export however still exists
- Added: Blog Components
- Changed: BREAKING Heading:
as
prop is now$as
- Added: New Typography based components: Heading, Paragraph and Link. Typography is still exported, however not recommended to use for headings, links or paragraphs. Instead use one of these components
- Added: Footer components
- Changed: Added className / ...otherProps on components that didn't had this already
- Changed typography.ts