-
8739e4f: Enhancements
asprop added to Box, with existingisprop as alias to ensure non-breaking.VisuallyHiddencomponent has been simplified.- More sprinkles defined such as typography, responsive breakpoints and interaction conditions and properties.
odStyleis now the function name for using sprinkles.
-
8739e4f: New components
- Option List (beta) to display a grouped set of optional items that are checkbox form controls.
- Option Grid (beta) to group selectable tiles that support per-item icons, it is a custom ARIA listbox instance and is not a native form control.
- e337c6e: Unwanted post install package patching is removed
- 59f2bb5: Added id and testId props to Text component. Added testId props to Heading component.
- d580acb: ESlint refactor after dependency upgrades to latest
octaneconfig
- 4c8dc149: Reduce padding in prefix input incon when the input measures 150px or less
- b6dad903: Fixes Switch component prop type
- 78ded1ce: Enhances the looks and behaviours of Switch component
- 77867368: Upgrades css type and vanilla extract
- 2ab648e9: Updates neutral theme
- c4d3c69a: small size added to badge
- 90567a0d: Cap all OD inputs with default max values
- 9d2cc57b: SimpleImage component gets error fallback option
- 5e6c7e43: Icon: Not throwing when passed null icons
- fb3e74d2: Adds grid display to box pros
- 27bed9f6: FillHeightBox gets optional maxHeight prop
- d2fe2618: Exports hooks from the package root
- b9b2e921: Fixed EditableTest change propagation
- fe6193bd: Fixes EditableText not sizing correctly for type number
- 8b0eedaa: EditableText gets internal state management while is in edit mode
- 987d3e4c: Improves input placeholder width calculation in floating mode
- 9c36d27f: Fixed DropDown prop types
- 993e5740: Adds disabled prop to DropDown options
- 9567e4ab: DropDown options get default display flex
- 8c7dfb5a: changes dropdown options to be passed in as children
- c66817db: Added new DropDown button component
- 9542838b: NumberInput gets to be cleared when upstream enforeces values
- 7740c43f: EditableText passes tab index to wrapper container
- 02eccde4: Modal: Gets a disableBackdropClick prop
- 69959cce: EditableText exposes an onModeChange callback
- d7148e52: EditableText passes incoming focus and blue events to wrapper box
- 30167cb7: Fixes EditableText live size change
- 9bfab26f: feat: Fixes EditableText size
- 5e7528ca: EditableText: Gets better input widht predection
- 9c7a28f4: Rexports EditableText component
- 90212565: Adds EditableText component
- b82f034c: Inputs: Can set a background colour
- e9273f8b: Sticky Box: Gets a noPopShadow option
- ec829f85: Tooltip: Accepts open state as a prop
- de82bb12: ksjdfchsdjhfgshdj
- de82bb12: Tooltip: No longer shows empty tooltips
- f1b7f299: Increases large breakpoint threshold
- 44aa5baa: Image: Fixed images component passing unsupported imageWidth prop to SimpleImage
- fec53656: Select Input: Get heights aligned with other inputs AutoSuggest Input: Get heights aligned with other inputs
- 62974729: Browserlist upgrade
- 3e83d21b: DatePicker: Size prop made optional
- 7deb2f96: DatePicker: Gets valueLabel prop
- 331bc041: Adds IntentStripe component
- cc303b97: Base theme: Updated background neutral colour
- 98283fb6: useWindowHeightFill: Fixes mutation observer
- 8da1b1d: useWindowHeightFill: Listens to dom changes
- 8b5f44c: NEW: useWindowHeightFill hook NEW: FillHeightBox component NEW: StickyBox component NEW: ScrollPane component
- 7366dee: TabPanes: Gets padding options
- c8f6330: New theme token utils to read theme token values
- 0759213: Anchor: Gets all a tag attributes TexLink: Gets all a tag attributes Switch: Gets all button tag attributes
- 012f424: TextLink: Improved iconed version layout
- 0ab5287: DividerLine: Accepts all box background colours
- 5ac16e9: Button and Inputs: Fixes translateZ causing Safari overlay issues
- 32e0f3b: HorizontalAutoScroller gets swipe controls
- cd28d20: Added HorizontalAutoScroller
- 85c36c2: Storybook: Fixed fynamic theme colours
- 90ac84e: Adds SliderProgress component
- 7c152a0: useResponsiveValue: Gets serverside fallback value
- dc1fdd7: Improved dynamic theming
- ba357a8: ThemeOveeriders: React to upstream updates
- ba357a8: Section: Passes ref over to dom
- 9474d14: Theme override no longer has primary colours as mandatory
- af5294c: OverdriveProvider no longer sets document body background and text colours
- b229c76: Addds optional modal mount point to OverdrivePorvider
- d7a7217: Upgrades vanilla extract
- 297c191: Storybook upgrade
- f724850: Removes Playroom
- a60454d: Chromatic upgrade
- e945fca: Simplifies colour styles
- 4759925: Fixes ts type generation
- 85927e4: Themes: New neutral theme added Box: Get intent background-color and color styles
- 1eb1e3c: Box: Gets a responsive order prop
- 36c9ce7: Dynamic theme provider
- 40ace81: Box: Gets intent border colours
- f759554: DividerLine fixes size type
- 57d49d4: Added DividerLine component
- 7cd947b: Box: Get's 'none' width option
- 85a20a3: Stack: Gets alignItems option for it's children
- 9a6f63f: AutoSuggest: Drops borderMerge and attach in fullscreen mode
- 6672673: Inputs: Get borderMerge option
- 4777231: Inputs: Get attach option
- 3e22cb6: Stepper: Fixes incorrect decmials when stepping up or down
- 3fa19c5: Adds new colour helpers
- 42d834f: OverdriveProvider applies theme calss changes
- dac970c: Theming contracts added
- 8ee8087: ColourInput: Fixed and improved stories
- 1c2062c: ColourInput component added
- 19418b5: Autosuggest: No longer looses window scroll position when opened in fullscreen mode
- 0ceb2f9: Disabled elements got tabindex of -1
- fbf72cb: Switch: No longer maintains an internal state
- d68e1dd: Button: Prevents double clicking as a default behaviour
- bd4ed83: Autosuggest: Fixes mobile input loosing focue on search
- 2e7f672: AutoSuggest: Automatically closes mobile modal with value changes
- a8084f6: Switch: Gets more visible focused state
- 74694e1: Stepper: Looses internally managed state
- 7b931f7: Adds TextBubble Component
- 91fb315: Components: Get default exports
- ed0d129: Toast: No longer blocks page elements at the same page height
- 2a307c5: DatePicker: Gets loading state
- 5230bcb: DatePicker component added
- b1ef7eb: Tab coponent: Allows complex children
- 466098d: MinimalModal: Gets content vertical alignment options
- a3941d6: Autosuggest: Fixes clear button layout shift for small size
- 7a49fcb: Small inputs: Get font size 2
- 848878d: Small inputs: Get defined line heights
- 4236309: Input components: Get a small size variant
- 4236309: TextArea: Fixed scrolled text overlapping with shifted placeholder
- 200e67e: Inline: Gets width prop
- 5300772: Fixed type definitions
- 86f955b: Dependency upgrades
- 33c6c71: Inputs: Get theme standard line height
- 28252fb: NumberInput: Fixes paasive events being prevented
- 5930dd5: NumberBubble: Suppoertsa larger numbers
- 3b81bdc: Button: Fixes warning and information text colours
- ff5cd80: Button: Gets new colour variants
- 5d20ae8: NumberBuble: Fixed wrong sizing for the value of 10
- b6959f7: NumberBubble component intoduced
- 5e2efa2: Checkbox: Removes extra right padding when it has no label Radio: Removes extra right padding when it has no label
- 5fc3db9: Radio: Can have empty children Checkbox: Can have empty children
- 11d9730: Button: Gets new intent border colours for border colour
- 5293616: NumberInput: Changed event lister to passive TabList: Changed event lister to passive useMedia: Changed event lister to passive
- 14ee239: Tooltip: Gets test size option
- 7dbf75b: Tooltip: Gets auto closing timeout option
- 834f5bd: Button: Keep its layout unchanged in loading mode
- 5448c8a: base theme: Link colour updated to blue 500 TextLink: get link colour
- e1f5773: Heading: Gets wordBreak prop
- e1dc659: Text: Gets word-break option Meta: Gets word-break option
- e67fd78: Image: Updated prop types
- f5843b0: Image component: Gets exported from root
- 13acf79: AutoSuggest: Calls onEnter with current value
- 6ae288e: AutoSuggest: Type fixes
- Overdrive: Fixed input ref type
- 9884f4c: Autosuggest: Closes results when enter key is pressed
- e825a3d: useResponsiveValue Accepts any generic type
- 4bae7d0: AutoSuggest accepts an 'onEnter' event callback
- af65bd3: New responsive Image component
- 1ac5083: Adds babel preset env
- 7f65be1: TextArea: Fixed min height
- f7bfcdb: Tabs Get a more distinct colour for unselected tab labels
- e2cebc8: Applies type fixes
- dd12f20: Migrates Overdrive to vanilla extract
- eb36462: Overdrive: Migrates styling away from treat to vanilla extract
- aaac596: Migrate to vanilla extract
- 4324095: OverdriveProvider: Imports reset styles
- 4324095: OverdriveProvider: Imports global fonts
- 2623174: fixes list of files with side effects
- 03ca973: Autosuggest: Replaces deprecated fill-available with stretch
- 56edcaf: Overdrive: Gets file extentions for imports
- 2fbe7bf: OverdriveProvider: Accepts runtime breakpoint token
- 4324095: Compiles released package to JS
- 4858d44: Compiles Overdrive package into JS
- 36736c3: useMedia
- ec17939: Adds babel react preset
- 965c7ed: Portal: Makes theme wrapping optional
- 19d14a1: Multiple theming fixes
- aa5d74b: Portal: Removes memo
- 4324095: Reverts compiling to js
- 713b1a3: Oderdrive: Fixed type generation for released package
- 4b3b1ec: Adds inhouse babel config
- ca4e971: Portal: Fixes unwrapped version
- 158d3bb: Accept custom runtime breakpoint tokens
- Fixes type generation for released package
- useMedia
- Portal: Removes memo
- Portal: Fixes unwrapped version
- Portal: Makes theme wrapping optional
- OverdriveProvider: Accepts runtime breakpoint token
- Accept custom runtime breakpoint tokens
- Autosuggest: Replaces deprecated fill-available with stretch
- fixes list of files with sideeffects
- ec17939: Adds babel react preset
- Overdrive: Gets file extentions for imports
- Adds inhouse babel config
- OverdriveProvider: Imports global fonts
- OverdriveProvider: Imports reset styles
- Compiles released package to JS
- Reverts compiling to js
- Compiles Overdrive package into JS
- Multiple theming fixes
- eb36462: Overdrive: Migrates styling away from treat to vanilla extract
- aaac596: Migrate to vanilla extract
- Migrate to vanilla extract
- Overdrive: Migrates styling away from treat to vanilla extract
- f982d1c: Upgraded to react v18 alpha
- 0fa7afd: Overdsrive: Gets compiled into javascripts and typescript types
- 7033333: Hooks: New useAttachedBoxes helper hook
- f15d951: Hooks: New useResponsiveValue value hook
- b7e6aae: Adds relese script
- 25dda76: Attached Boxes: Accept default box props
- 85e9ceb: StandardModal: Hides it's frame overflow
- d08c689: Badge: Gets new large size
- 96a8299: NumberInput: Gets new preventMouseWheel prop to prevent value change while scrolling
- fd3cea4: AttachedBoxes: Do not get default paddings
- 7f2122b: Adds more utils root export
- b7e6aae: Overdrive: Gets files list added to package.json
- b7e6aae: Fixes main file
- 006435e: StandardModal: Gets narrow and skinny sizes
- d89cd04: LoadingBox Accepts default Box props
- b7e6aae: Overdrive index main index files fixed
- ded7b5d: Inputs: Get their hover states going to a darker shade
- 8b1f6df: useResponsiveValue: Gets exported from libs root
- fd3cea4: AttachedBoxes: Accept external classnames
- ff9a789: Sets index.ts as main entry file
- ba85147: Overdrive: Multiple export changes
- 5c1b018: Publish command: Nolonger compiles to JS
- Overdrive: Multiple export changes
- Badge: Gets new large size
- Publish command: Nolonger compiles to JS
- Adds more utils root export
- Sets index.ts as main entry file
- Fixes main file
- Overdrive index main index files fixed
- Overdrive: Gets files list added to package.json
- Adds relese script
- Overdsrive: Gets compiled into javascripts and typescript types
- NumberInput: Gets new preventMouseWheel prop to prevent value change while scrolling
- StandardModal: Hides it's frame overflow
- StandardModal: Gets narrow and skinny sizes
- LoadingBox Accepts default Box props
- AttachedBoxes: Do not get default paddings
- AttachedBoxes: Accept external classnames
- Attached Boxes: Accept default box props
- 8b1f6df: useResponsiveValue: Gets exported from libs root
- 7033333: Hooks: New useAttachedBoxes helper hook
- f15d951: Hooks: New useResponsiveValue value hook
- ded7b5d: Inputs: Get their hover states going to a darker shade
- Upgraded to react v18 alpha
- f6e8135: AutoSuggest: Gets increased results fylout maxHeight value
- 23780cc: Autosuggest: Gets a fix for white background under round edges
- d2ba68a: AutoSuggest: Gets white background for results ul element
- b625d7c: AutoSuggest: Gets a clear input button when with value
- b625d7c: AutoSuggest: Gets enforced inline options view
- 7072055: Toaster: gets primary, secondary and shine variants
- 9411d17: MinimalModal: New MinimalModal component with StandardModal features but without any baked in UI
- 97f8b2d: Button: Uses theme secondary colour for secondary variation border
- a3908d9: AutoSuggest: Gets fix for fullscreen veiw resizing html tag width to 0
- e7fe560: Inputs: Get stories with no notch
- dd39f3a: Overdrive Themes: Gets a new flat theme added
- 4c96195: Theming: All explicitly set component colours now use theme based colours
-
a631d85: SelectInput: Gets option to be passed a custom field icon
AutoSuggest: Gets option to be passed a custom field icon
- f4eb420: Input fields: Get a loading state
-
75d6708: Checkbox: Accepts ref
RadioGroup: Accepts ref
Radio: Accepts ref
- e004bff: Text: Gets capitalise text transform prop
-
b328760: Box: Gets padding reset for field and fieldset elements
AutoSuggest: Gets fix for exception when clicking outside an open AutoSuggest
- 075e32e: useBoxStyles: Borders paddings and margins are no longer rest on block elements
- 075e32e: Heading: Gets explicit reset styles
- 6068142: AutoSuggest: Fixed undefined error caused by blurring out of AutoSuggest
-
ee67f76: TextLink: Gets inline reset styles
ProgressSpinner: Gets svg and block resets for the animates SVG
-
340da9a: Text: Gets explicit reset styles for span and p
field: Gets explicit reset styles
fieldset: Gets explicit reset styles
- a3274cb: useBoxStyles: Applies base reset styles to div elements
- a3274cb: TextAreaInput: Gets base input reset styles
- 0e10140: useBoxStyles: Base reset styles now spread individually into element type reset styles
-
667876a: Checkboxes: Disabled mode gets reduced opacity
Radio: Disabled mode gets reduced opacity
- 252f512: Upgrades treat to latest
- ca5cb40: Heading: Heading component should pass all text style props down
- d9b96c6: StandardModal: Fixes mobile view to be pinned to the bottom and table view is all rounded corners
- 99bc4f9: Stepper: Fixes extra re-render on each change
- 977a99f: Section: Introduces a new small option for width values
- 463422c: Badge: Fixes default text style colour incorrect style ordering ordering
- 42057f4: Badge: Fixes inverted text style colours and incorrect ordering caused by treat
- a54636d: AutoSuggest: Fix's it so if Suggestions is ever undefined or empty, that the nextFn doesnt fail
- dec98ef: StandardModal: The main region to be wrapped in a flex to allow stretching children
- c81a433: SelectInput: Fixes wrong prop type needed
- 1d4b39e: SelectInput: Increases target click area to cover the full width of component.
-
052a024: Corrected types to be more type safe and accurate.
Notably
<Box>. Seeing as wecreateElement, we fixed types to only allowIntrinsicElements | JSXElementConstructor. As such, any"button"orTextLinkprop values will work. However,<TextLink />will not.
-
648ec6a: Inputs: Introduces
reserveHintSpaceprop—to reserve the space that would otherwise be occupied by the hint text.Super useful in stacked forms with validation, so that page layout shifts don't occur.
- dd3da7e: Modal: Introduces a focus-trap as well as correct some Concurrent Mode flickering.
- dd3da7e: Box: Adds
opacityprop
- 4ce4fc6: NumberInput: Adds support for the html
stepattribute.
-
8914008: Box: Adds
inlineFlexas a display prop -
5bbe87a: Tabs: Adds new renderInactivePanes prop to render tabs that are inactive.
By default, TabPanes themselves only render when they are active. Sometimes in certain cases you'd want to preserve the local state within those tabs as a user switches between tabs. Setting
renderInactivePaneson TabPanes will be rendered but visually hidden.Example:
<Tabs active={0}>> > > > > > > } t > ></Tabs>
-
7131a5f: Tabs: Fixes a visual quirk when indications are mixed with non-indicators
- c585765: Heading: Adds an
idprop which is applied directly to the underlying element
- 5c913cc: Box: Allow non-intrinsics as Box
isprop as well. With this change you can send things in likesvg's, or other components themselves. - e11909f: Text: Adds a
text-transformprop to allow uppercasing text
- 47335f6: Meta: FIxed issue where the icon and label would wrap
- 230367f: SimplePagination: Should be centered in it's parent. Seeing as it's parent spans 100% width, this centering is now explicit.
- bf51bbe: Fix: Added missing re-exports from our "to-monorepo" migration
- c13df61: StandardModal: Fixes the issue where a mouseup on the backdrop triggered the requestClose callback. Despite the click originating on the modal itself. So now the callback will not fire.
-
63d81e5: Major refactor of how
treatfiles get used in our project. Instead of a redefinition of shared styles such as margin/padding. We now instead prefer the usage ofuseBoxStylesor theBoxcomponent.There should be no real regression in terms of usage api.
-
63d81e5: Box: pointerEvents value can now be passed to
BoxanduseBoxStylesas 'none' or undefined. -
63d81e5: BulletText: Now accepts an
isprop, such that it's element can be changed. This is really because 9/10 times you'd be rendering this in aStack, which already handles theul/licouple.FEATURES
<Stack is="ul">> ></Stack>
which already wraps each child in an
li.
- fbee5c0: AutoSuggest: Now has a full width wrapping box
-
6d9e5b5: Reset: Table reset is no longer global. So use
<Box is="table" />-<table> +<Box is="table">
-
6d9e5b5: Inline: Supports alignX to position items on the x axis aka;
justifyContent. -
6d9e5b5: Reset: Globally set overflowX to hidden
-
c90d645: Stepper: When pressing Home/End it should no longer jump to the end of the page.
-
6d9e5b5: Table: Introduces Tables
Implemented as a css-grid, so column widths are to be defined in gridTemplateColumns. All components in this scope accept a ref property.
Please note! In order to remain structurally WAI-ARIA compliant; the
TableRowGroupmust be placed around the traditionaltbodyandthead.FEATURES
<Table columnTemplate="repeat(2, auto)">></Table>
-<Table columnTemplate="repeat(2, auto)"> +<Table stickyHead columnTemplate="repeat(2, auto)"> > > >
<Table columnTemplate="repeat(2, auto)"> > > - <TableHeadCell>Col 1</TableHeadCell> + <TableHeadCell sort="asc" onSortChange={}>Col 1</TableHeadCell>
A column can only have sort functionality when the
sortprop is set to eitherasc | desc | none. AnonSortChangecallback when applied to the cell that allows observing this. This callback will send the new sort to have applied to it. This is a stateless component, so make sure you wire the value back intosort.<Table columnTemplate="repeat(2, auto)"> > - <TableRow> + <TableRow onClick={}> >
Please note; that if you're also tracking clicks of cell buttons, to check the currentTarget of whether to apply the callback.
-
5353a1a: Box: Added textAlign as a prop
Worth noting that we want to deprecate the use of
alignin ouruseTextStyles. As it's now shifted to our box. Thealignprop will still remain on theTextcomponent.FEATURES
<Box textAlign="center" />
-
715b035: Box: Added userSelect prop to disable selecting its content
-
987a68b: VisuallyHidden: Added brand-new component to visually hide content
FEATURES
<VisuallyHidden>hello screen reader</VisuallyHidden> <Text> o > </Text>
-
e2f4a5b: Text: Allow setting a display override
FEATURES
<Text is="span" display="inlineBlock"> k </Text>
-
175cb09: Icon: Child svg's are cloned and positioned to the size of the parent
-
5428b9e: LoadingBox: Exposes height and display box props
FEATURES
<LoadingBox height="full" display="inlineBlock" />
-
e3e5aa9: Box: Display prop inline-block renamed to inlineBlock to be more consistent
-
a6530d5: Box: Supports sending in a height prop
-
df453b2: Badge: Applies a whiteSpace nowrap to badges, and now truncates
-
292692f: Section: Typing update such that width prop is actually optional
-
52c424f: Inline: Now wrap properly, and support a prop to enable/disable it.
-
e0a4291: Box: Introduces flex style props to
BoxanduseBoxStylesFEATURES
You can now send in
alignItems,flexDirection,flexGrow,flexShrink,flexWrap,justifyContentto Box and useBoxStyles for whatever you like.We have specifically chosen
alignItems,flexDirection,justifyContentas Responsive candidates as we've found the others won't have a responsive use case.<Box display="flex" width="full" justifyContent="center"> > </Box>
-
62c7111: Stack: A Renamed prop from spacing to space
eg:
<Stack is="ul" - spacing="3"> + space="3"> > > > </Stack>
-
822863d: Inline: Supports inline dividers between elements.
Supports, text, numbers or elements.
FEATURES
<Inline dividers>> > > ></Inline>
-
a0fce92: Text: Exposes a new white-space nowrap prop
This is an experimental prop, we know of one use-case where this can be used, but will likely also appear on the Box.
So do let us know if you're using this, and it hasnt worked in your use-case.
FEATURES
You can now pass a
noWrapprop to any<Text />which applies awhite-space: nowrapto itself.<Text noWrap>I wont wrap</Text>
- 358fb4b: Tabs: Incorrectly importing treat files inside treat
-
0b6c621: Tabs: Adds
scrollable, which scrolls the tabs horizontally on smaller devices.FEATURES
<Tabs>> > > > > ></Tabs>
-
729dfdd: Input: Notchless inputs will no longer break when part of a flex container
-
0b59110: Flatten fragments when provided as children
Will now support fragments and otherwise boolean children that previously would not have worked:
<Stack>> ( > > > > > } ></Stack>
which would have the past not had lines 1-3 spaced evenly.
this was also true for:
Actions,Inline,TabList,TabPanesandStack. Which have been rectified.
-
55ee559: Positioner: Removes usingPositioner
FEATURES
Removes the usingPositioner HoC in favour of a plain-old component that'll gives us the ability to send all our Box props onto it. It also aids in corrected aria-* props.
-
b9a2c45: InputBase: Allow for notchless inputs
FEATURES
Sometimes the notch behavior won't work because of its context - much like an input that sits within a table, where the column already denotes what should be entered into the input.
Please be aware that this should be avoided, as in most cases we should notch, so a user knows what's in the input especially when its defaulted.
-
7736914: Box: Adds an overflow prop and allows className to be clsx compatible
FEATURES
ClassNamecan now be sent in directly to Box instead of through clsx.eg.
- <Box className={clsx(styles.one, styles.two)}> + <Box className={[styles.one, styles.two]}> o </Box> - <Box className={clsx({[styles.one]: maybeDoMe}, styles.two)}> + <Box className={[{[styles.one]: maybeDoMe}, styles.two]}> o </Box>
-
17d2354: Stack: Expose the Box width on Stack
-
475601c: Tabs: Now always fills the width of its parent
- d1c6b09: responsiveProps: Fix argument where void is not the same as undefined
-
4df7e83: AutoSuggest: Introduce a autoWidth prop that either will size the flyout to either the width of the children, or the input.
FEATURES
<AutoSuggest>can now be given aautoWidthprop that will auto the width in relation to setting the width, or for it to be automatic.- `autoWidth={true}` means, size the flyout to the width of flyout children "automatically" - `autoWidth={false}` means to set to the width of the select input.eg:
// size to the width of the flyout children <AutoSuggest " } h /> // size to the width of the input (current behaviour) <AutoSuggest " } />
-
378e5da: AutoSuggest: Input search types to remove the webkit clear button
FEATURES
When we reset input type searches, we incorrectly "hid" the webkit search buttons, this aims to correct that.
-
eb3cf9d: AutoSuggest: Support the usage of passing a ref down to the implemented input
FEATURES
<AutoSuggest>can now be given a ref which will be passed down to the underlying input.eg:
const myRef = useRef<HTMLInputElement | null>(null); <AutoSuggest ref={myRef} value={null} placeholder={'My AutoSuggest'} />;
-
bab9cd2: InputBase: Always full width the input wrapper
-
801c254: Positioner: Uses Popper.js to run the flyouts.
FEATURES
<Positioner />uses Popper.js, as it offers a wide array of performance improvements and caters for some edge-cases, like when the'yre nested etc.Few stats: we use popper-lite which is rated at 3.73Kb minified and compressed. Now getOptimalPosition was about 1.3Kb minified and compressed. However, it had a few holes, and when I looked at what it'll take to implement the features to solve the holes - we'd probably still beat the file size, but not by much...
So with that once internal bandwidth increase this'll likely be revisited - and perhaps utilize
detectOverflowas a roll-your-own solution. -
0964a1d: useNegativeMargin: Correctly fill columns to their parents width
BUG FIXES Columns were not completely filling its parent due to negative margins
-
15f486c: Modals: Now uses a shared
<Portal />component.FEATURES
<Portal />component allowing for shared Portaling of components to inside a container.Responsibility: Rendering a child into a container, which by default is
window.body.eg:
// Input <div> g > > > </div> // Result <body> > > </body>
<Modal />is in charge of handling a backdrop - which also directly uses the new<Portal>component.Responsibility: Renders a child into a Portal, with a backdrop and correct aria attributes applied.
You can give this component
hideBackdrop?: booleanprop to disable the backdrop. Also; if you wish to remove the fadeIn/fadeOut animation, atransition?: booleancan also be provided.- Removes `<ModalPortal />` in favor of `<Modal />` - Deprecated `withModal`, which could simply just use the Modal componentWorth noting that a
role="presentation"is applied to theModal, so consumers should be applying arole="none presentation"to their direct parent, if you wish content to be read out.eg:
<Modal isOpen={true} onRequestClose={function () {}}> > </Modal>
-
6c3ae76: Tabs: Support stretching tablist items to the width of the container
FEATURES
<TabList />In small contexts, like sidebars, or mobile viewports with minimal tablist items. It makes sense to stretch items to meet the width of the container.
eg:
<Tabs> > > > > </Tabs> -
302405b: Alert: Inline is now full width
Features
<Alert />When passing the
inlineprop, in the past it was maxWidth 640px - which in inline contexts, you'd want to span the entire width of its container. -
3bcf649: Adds the Inline and Section layout components
Features
Breakpoints have been amended to follow (mobile first):
- `tablet` is iPad Mini width less 25%, so any device greater than 768px - `desktop` we are considering as iPad Pro width less 25%, so any device larger than 1024px - `largeDesktop` is taken as a 1920x1080 less 25%, so any device larger than 1440pxall at landscape.
<Inline />When you're wanting to
inlinesomething. Like a badge list; you can use use the<Inline />component to solve this.eg:
<Inline>> > ></Inline>
<Section />A component that wraps its children, setting a
max-widthand centering on the screen. This will generally sit high up in the component tree. It offers 2 widthsmediumandlarge. The medium width is intended for smaller more concise layouts - like our Afterpay landing, or Uber landing. Were as thelargewill probably be more for our Leads or Bookings list screens.When coupled with
Columnswe effectively have a full fletched layout system, that can 🤷 replace ourContainedLayoutandContentOnlyLayoutinternal components.To solve the
ThreeColumnLayoutandTwoColumnLayoutwe can build internal abstractions that extend this perhaps.eg:
<Section width="medium" paddingX={['3', , 'none']}> > </Section>
-
f9dac97: Inline: Supporting alignY responsive prop StarRating: Consumes
<Inline />FEATURES
<Inline />Now supports an alignY responsive prop to vertically center its items to either
top | center | bottom, eg:<Inline alignY="center"><StarRating />Uses the
<Inline />component instead of columns, so should use less DOM
-
c66b727: Anchors are now cursor pointer by default
Seeing as we use
<TextLink />or<Box is="a" href="" />in a few places, it only makes sense to usea { cursor: pointer }. -
57b8cf3: Actions now filters out undefined or null children
<Actions />Removed the className prop, this will slowly start happening across the stack.
-<Actions className="test"> +<Actions> . </Actions>
-
8881bdd: Styles are now
treatdriven.A few changes
- `OverdriveProvider` must now be provider - `ToastProvider` must also be provided when using a `useToast` - `@autoguru/overdrive/reset` must be given first.... and a whole series of other things. Please consult to the PR (#273) to get a better idea of what's changed.
- 230a3cd: Forces explicit text colours to Button hover and active states