- Fix
CodeBlock
word break bug
RadioTabGroup
now has a more robust width calculation, and there is no limit on the number of tabs
- Fix the broken type definitions that were not working since 1.7.0. While still not a proper solution and more of a hack—it works as a stopgap solution while we find a better solution.
- Fix text alignment for
stringRight
inInputField
- Simplified markup for
Checkbox
,Switch
,Select
,RadioButton
,RadioGroup
andRadioTabGroup
, wherename
andvalue
props are inherited fromid
if not present.
- Fix CSS variable mismatch for
Sidebar
- Tweak theme values for icons and text inside
InputField
- Add ability to add icons and text inside
InputField
via props
Breadcrumbs
is now far simpler, and immediate children are automatically converted toBreadcrumbItem
CodeBlock
now has robust editing support, and also anonChange
callback
CodeBlock
now is a peer dependency, and supports lazy loading language support, so you are never downloading anything you don't need
- Add fluid typography support
- Add
Tooltip
component - Remove redundant
TablePagination
component
- Fix controlled/uncontrolled input bug for
RadioTabgroup
- Add default styles for
Badge
- Remove
SidebarItemIcon
andSidebarItemText
components to simplify markup - Fix
defaultValue
bug forListBox
- Fix text colour for
ListBox
- Move from
pnpm
toyarn
, because of constant symlinking issues - Fix
NotificationWrapper
overlay issue
- Fix Drawer trigger bug
- Remove
modal-
suffix forModal
class - Fix
kbd
theme issue - Fix
table
theme bug - Fix
ListBox
theme values - Tweak
CodeBlock
token colours
- Add accessibility improvements for most components
- Extract
Pagination
component fromTablePagination
and make it more generic
- Colours now support opacity values
-
Old New --slate-dark-40
--slate-dark40
--red-light-20
--red-light20
— --red-light20-opacity90
— --amber-dark20-opacity20
— --pistacho-opacity40
-
Basically you just have to remove the hyphen after the
light
anddark
string for the new format, and it works on all props:bgColour
,textColour
,var()
etc -
This colour generation is now more robust, as its generated with TS, instead of SCSS.
-
- Removed CJS support, ESM only, because it’s 2024
- Remove Storybook, because we have configurators for each component that does the same job, but better
- Add
Skeleton
component for loading states
- Rename
SelectWithSearch
toListBox
and add fuzzy search, multi-select, and custom entries capabilities
- Add
withDelete
andonDelete
for theBadge
component
- Add
Modal
with the new Popover API
- Add fuzzy search to
ListBox
- Fix type checks and
useClient
directive for vite build
- Fix missing
Span
export
- Fix wrong theme values for
kbd
- Remove exported themes to fallback to original CSS styling
- Update rendering logic for
CodeBlock
- Remove
prism-react-renderer
dev dependency for CodeBlock - Use
prism
with exported themes - Fix
Accordion
toggle issue - Update
vite.config.umd.js
to build a UMD version
- Update
ThemeProvider
to exposesetTheme
anduseTheme
functionality in any component via local storageconst { theme, setTheme } = useTheme();
- Remove the dependency of creating
RootClientSideLayout
- Add a default theme for
CodeBlock
- Update
vite.config.js
to retainuse client;
for Next 14+ support
- Add
button-font
for eachkind
too
- Fix
Button
active theme bug - Add
button-font
via theme
- Fix text colour for lists
- Add
height
prop forDivider
- Add line numbers to
CodeBlock
component withshowLineNumbers
prop - Add better token support
- Fix style overrides for
CodeBlock
component
- Remove
as
prop fromHeading
, so you can now useHeading1
,Heading2
etc
- Tweak
DropdownSelect
styles
- Add accessibility improvements for
Breadcrumbs
, andBadge
- Add new
Meter
component
- Fix
Breadcrumbs
style not loading - Add resets for
Breadcrumbs
element
- Add
OptionCard
component
- Rename
HRule
toDivider
- Rename
ExpandableContent
toOptionCard
- Fix
Breadcrumbs
element type
- Move to Vite
- Move to
pnpm
for package management - Remove
styled-components
as a dependency - Adopt plain CSS for styling
- Support twice as many
defaultColours
- Use
rem
units for font sizes - Ability to set
Element
as a flexbox/grid div usinglayoutAsFlexbox
andlayoutAsGrid
- Add
horizontalPadding
,verticalPadding
,horizontalMargin
, andverticalMargin
- Add generic block-level sectioning elements as custom components. Eg
<Div>
,<Section>
,<Article>
etc - Add copy code to clipboard for
CodeBlock
- Add
RadioTabGroup
component - Convert all millisecond values to seconds
- Remove
ThemeProvider
andtheme
prop from all components - Refactor
Row
andPortion
to use CSS Grid and Flexbox both - Import, usage and extension of
CodeBlock
- Remove
defaultColours
object as exported - Remove
InfoPanel
and extendDrawer
withposition
prop - Rename
sidePadding
andsideMargin
tohorizontalPadding
andhorizontalMargin
- Rename
para
toparagraph
in CSS variables - Rename
FormWrapper
toForm
- Rename
CheckBox
toCheckbox
- Add consistent
showWhen
,closeWhen
andsecondsToShowFor
props for transitory components
- Fix
focusFirstInputOnReset
prop behaviour to properly set focus on first input on reset
- Export custom
PinInputFieldElementType
for supporting custom ref types in TypeScript
- Add an imperative reset handler to reset
PinInputField
from the parent component with ref - Add a
focusFirstInputOnReset
prop for the above change, to opt out of focusing on first input on reset
- Add Tab component label prop to be used as reactnode for custom label
- Fix PinInputField behaviour on paste or replace at position
- Add optional
isDismissable
prop for showing a close button forDrawer
(true by default)
- Fix prop name for disable copy/paste to pasteFromClipboard which takes either enabled or disabled as parameters for
PinInput Field
- Export props types for all components
- Fix excess margin issue for
Tabs
labels - Add toggle for disabling copy/paste functionality in the
PinInputField
component
- Add support for defaultTabIndex props in
Tabs
component because by default it select first tab as active tab
- Rename
style
prop forHeading
andText
tofontStyle
sincestyle
is a reserved prop name in React and causes the react/style-prop-object eslint rule to complain in any project with basic react-app rules setup.
- Fix npm publish action workflow
- Fix unique key issue for
Tabs
- Update command for installing dependencies and build in CI
- Fix broken npm publish action
- Fix styling issues in
Tabs
- Padding and margin values can now be configured via the
globals
object in the theme - Convert utility styles into JS file from plain CSS to access props
- Refactor
TablePagination
for better theme-ing - Tweak
notification
theme object - Add String() constructor to theme object values
- Fix a bunch of inconsistencies in theme values
- ⚠ Breaking change: add
style
prop forHeading
andText
to select font style.
- Add support for passing additional items to the navbar for
Tabs
- Update React peer dependency version
- Export styled-components also from the project to allow component-wide over-rides
- Convert
isMono
,isSans
andisSerif
to astyle
enum - Fix
isSubtext
prop for text elements - Fix cursor-pointer on hover for
ExpandableGroup
- Add back the right margin bottoms for
FormItem
elements insideFormItemGroup
- Fix margin bottom for
Checkbox
andSwitch
inside aForm
- Remove
line-height
property frombody
and apply it more specifically to text elements only
- Add
InputField
invalid state text theme colour - Rework text sizes progression
- Add reset styles for
picture
- Add
weight
prop toElement
to be used inspan
elements - Add types for possible font weight values
- Fix
disabled
styling forInputField
- Remove style overrides in Tabs component
- Add
closeOnClickOutside
prop forInfoPanel
&Drawer
- Fix wrong font value for links in theme file
Drawer
overlay is now theme-able and style-able with props
- Overhaul
Drawer
to now come with a page overlay
- Add span types for
Portion
- Add
spacing
prop forPinInputField
- Add separate theme object for
Drawer
- Allow controlling auto-focus behaviour for
PinInputField
- Add ability to theme disabled states for
primary
,secondary
andtertiary
buttons separately
- Add different letter spacing values for empty and filled
input[type=password]
- Fix
InputField
text colour dark theme bug
- Add
spacing
andretainLayout
props forFormItemGroup
- Fix bug in
onChange
implementation forPinInputField
- Fix missing font family for
hepText
anderrorText
- Replace
onComplete
withonChange
callback forPinInputField
- Add
PinInputField
component
- Add
Drawer
component
- Rename
timeout
prop forDrawer
andNotificationItem
toshowFor
- Fix
Select
border-radius bug
- Move
unit
prop in theMeter
from being displayed via CSS to markup
- Tweak
Badge
padding values
- Fix
Badge
line height bug - Fix
Switch
theme colour mismatch
- Tweak
Badge
padding values
- Fix
Badge
height bug
- Add opinionated defaults for
mark
element
- Add
Badge
component
- Rename
Toast
toDrawer
for better consistency
- Add
Toast
component
- Add
horizontallyCentreThis
,horizontallyCenterThis
,verticallyCentreItems
,verticallyCenterItems
,pushItemsToEnds
as props instead of class names
- Fix
Select
border-radius inheritance bug - Fix
SidebarItemText
hover state text colour
- Fix inconsistent
tabLS
andtabPT
props
- Add types for
Element
’sas
attribute
- Fix text colour for nested links in sidebar for better differentiation
- Fix typo in
portionProps
- Refactor sidebar theme object hierarchy for links and sublinks, remove
linksWrapper
object - Mention
styled-components
requirement in the README
- Rename
tabLS
totabletLandscape
andtabPT
totabletPortrait
for more consistency with the naming scheme and less ambiguity.
- Fix focus states for checkbox, switch, radio and select
- Fix theme throwing error on colour overrides
- Add custom colours to ColorPropsType and export it from library
- Fix InputField element type
General
- Add Storybook for easy testing and documentation
- Each component folder now contains a
<component_name>.stories.tsx
(to create stories) and<component_name>.stories.mdx
(to write docs) file
- Each component folder now contains a
- Add make commands for easy creation of components
- Remove
name
props from RadioGroupoptions
type; Addlabel
andid
- Remove
as
from RadioButton and Checkbox props - Make
shadow
a global prop - Make
shape
a global prop - Add
ExpandableContent
component which implements details and summary tags - Add
Tag
component - Add
opacity
as a global prop - Divider now supports custom background colors
- Add
hr.default
to theme
- Add
- All colour props are now typed
- Add command (
make color-props
) to generate colour props from default colors
- Add command (
Form improvements
- Remove
isAnswers
prop from FormItem - Remove FormItemJointGroup component
- Add
isJoint
prop to FormItemGroup
- Add
- Remove Extra spacing after FormItemGroup
- Add
fields
andonFieldsChange
prop to Form to allow form creation using an array of config 🎉 - RadioGroup and Select now use BaseInputComponent
- Add better and consistent help & error text for each form field
- Make InputLabel atomic
- Add error text for Form which uses Callout component
- Add sizes to Switch component
- Make Select chevron consistent with ExpandableContent
- Make required and disabled states consistent in form fields
- Remove
name
props from RadioGroupoptions
type; Addlabel
andid
Sidebar improvements
- Remove
isSticky
from Sidebar footer sidebar.body.bg
is nowsidebar.bg
in theme- Add sidebar width properties to theme; SidebarHeader, SidebarFooter and SidebarItem span 100% automatically
- Remove
isSticky
from SidebarFooter, it always sticks to bottom - Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
- Make SidebarHeader and SidebarFooter sticky instead of fixed to get simpler and consistent sidebar layout
- Remove
sidebar.linksWrapper.marginTop
andsidebar.linksWrapper.marginBottom
from theme - Remove SidebarItemsGroup and SidebarItemsGroupHeader
New components
- Tooltip (very basic, might overflow screens)
- Callout
- ExpandableContent
- Tag
Removed components
- FormItemJointGroup
- SidebarLink
- SidebarNestedLinks
- SidebarLinksWrapper
- SidebarItemsGroup
- SidebarItemsGroupHeader
- Inside theme:
inputField.default.helpText
is nowinputField.onFocus.helpText
inputField.isInvalid.helpText
is nowinputField.isInvalid.errorText
sidebar.body.bg
is nowsidebar.bg
sidebar.linksWrapper.marginTop
andsidebar.linksWrapper.marginBottom
have been removed
- Remove
isSticky
from SidebarFooter- It always sticks to bottom
- Remove FormItemJointGroup
- Use
isJoint
prop inside FormItemGroup instead
- Use
- Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
- Remove SidebarItemsGroup and SidebarItemsGroupHeader
- Use ExpandableContent component instead
- Default Switch size now
medium
which is larger than before- Set to size
small
for old size
- Set to size
- Replace
react-syntax-highlighter
withprism-react-renderer
- Add simple wrappers for
prism-components
to import specific languages fromprismjs
- Fix CodeBlock erratic output issue
- Fix
spinner
padding
- Add
Spinner
component
- Remove
Element
props being passed to all HTML elements as attributes - Fix Badge
is-loading
colours
- Fix transition for
SidebarHeader
- Add
isSticky
prop forSidebarHeader
andSidebarFooter
- Add new component
SidebarLinksWrapper
to better manageSidebarHeader
andSidebarFooter
- Fix
polished
imports
-
Breadcrumbs
BreadcrumbWrapper
renamed toBreadcrumbs
- The
separator
is now configurable in the theme file
-
Badge
isLoading
class now works forcustom
kind buttons also- Fix padding inconsistencies
with-loader
andwith-delete
classes renamed tois-loading
andhas-delete
-
Form elements
input
theme object is nowinputField
Checkbox
,RadioButton
,Select
etc have been moved out from insideinput
-
InfoPanel
- Dismiss button now styled differently, and does not interfere with the content
-
Notifications
- The
type
prop is nowkind
to be more consistent with the rest of the components onClose
is renamed toonCloseCallback
NotificationWrapper
has aorder
prop to set the stacking order ofNotificationItem
children
- The
-
Meter
isThin
prop is deprecated in favour of a far more flexibleheight
propshape
prop is now available just like theBadge
-
The theme object is now called
FictoanTheme
- Fix types for
CodeBlock
,BaseInputElement
,Meter
,TextArea
, andSelect
.
- Add autoprefixer to add vendor styles to CSS
- Fix
alignText
styling forTable
😬
- Add
alignText
prop forTable
- Fix npm publish bug
- Fix CSS overrides for all components
- Support heading in
InfoPanel
- Replace lodash with lodash-es for tree shaking
- Bump rollup to 2.52.7
- Replace
prism-react-renderer
andprismjs
withreact-syntax-highlighter
which is more customizable and tree-shakable - Add
@rollup/plugin-babel
to add /#PURE/ prefix toReact.forwardRef
which is required for tree-shaking - Add CSS files for Normalize, Reset, Colours and Utility to move static styles out of JS. Injecting to head tag using
rollup-plugin-styles
- Programmatically generate Colours.styled.tsx classes (To be added to build flow soon)
- Fix crash in tabs component
- Simplify TablePagination component (breaking)
- Add TablePagination component
- Fix
InfoPanel
close button fixed position bug
- Cap
sidePadding
andsideMargin
forRow
andDivider
in ultra-wide res displays above 2400px
- Add @emotion/is-prop-valid as an optional dependency
- Add ability to set Sidebar logo width via the theme
- Add Tabs component
- Remove opinionated
ul
,ol
, andli
styles
- Add opinionated version of Normalize.css
- Remove Normalize.css
- Add theme variables for
RadioButton
,Checkbox
andToggleSwitch
- Upgrade to React 17.0.1
- Tweak colour and font family for other input elements
- Change
fontFamily
tofont
forBadge
component - Fix font fallback styling inconsistency for labels, tables, and links
- Rework Notification component
- Fix
bg
ofSidebarWrapper
- Add
size
property forSidebarItemIcon
to be picked from theme file
- Add
font-family
to tables, and inherit from body font
- Remove improper colour override for dark sidebar theme
- Move React & styled-components to peerDependencies
- Switch to useState & useEffect for merging theme
- Fix Drawer theme issue for setting
borderRadius
- Fix broken builds (0.31.2 - 0.31.5)
- Set ThemeType to recursive optional typeof RFTheme
- Export
StaticGlobalStyles
- Add support for passing
refs
- Upgrade
styled-components
from5.0.1
to5.1.1
for Jest reasons
- Add
tertiary
button
- Add
transparent
as adefaultColour
- Fix incorrect centering rule
- Make
borderRadius
themeable for cards and input fields
- Rename
baseColors
todefaultColours
, andmainColors
tocustomColours
- Memoize theme prop in ThemeProvider
- Add missing props for theming some elements
- Add merge to reduce size of custom overrides
- Fix
a
tag hover colour bug
- Fix type bug that wouldn’t let
paras
inheritfont-family
- Fix lodash
merge
speed issue
- Remove static CSS classes from
GlobalStyles
- Rename
Textarea
toTextArea
- Add media queries for
InfoPanel
below1200px
to handlewidth
prop
- Add
primary
,secondary
, andtertiary
props for theDivider
element
- Add
bgColour
,textColour
,borderColour
,strokeColour
andfillColour
props with British English
- Add
spring
,brick
andsienna
colour values
- Fix
FormItem
margin bottom bug insideFormItemGroup
- Add
nano
andmicro
sizing for Text
- Tweak links theme styling
links.default.text
is nowlinks.default.color
links.onHover.text
is nowlinks.onHover.color
- Fix Textarea styling bug
- Add
nano
andmicro
text sizes - Text theme tweaks
size
object deprecatedsize.default
is nowparas.size
size.multiplier
is nowheadings.multiplier
- Add props for Meter to display a label and value
- Remove all SCSS files
- Remove unused svg icon
- Move
theme
tostyles
folder
- Use relative path everywhere
- Generate typings
- Upgrade all packages
- Update styled components
- Remove unused component
EventHandler
- Fix rollup dependencies
- Add
onCloseButtonClick
prop inNotificationItem
-
Code cleanup
-
TODO: Make Fictoan more accessible
-
TODO:
⚠️ Remove style tag in CodeBlock -
TODO: Fix Dismiss Button in NotificationItem
-
TODO: Add mask design to PinInputField
-
TODO: Fix Sidebar scrolling issue
-
TODO: Drag and drop file upload component
-
TODO: Date picker
-
TODO: Button size medium padding value
- TODO: Add Tooltip component
TODO:
TODO: