v2.18.0

v2.17.0...v2.18.0

Closed issues

• Clay CSS Atlas Form Validation feedback text should be semi-bold #2328
• Please include new icon: change-list-disabled #2282
• [ClayCSS] Justified tabs using buttons is broken #2237
• [ClayCSS] Table title horizontal alignment behavior differs from Chrome to Safari #2219
• Add focus utility class to Time Picker inputs #2299

Merged pull requests

• feat(clay-css): 2.x Create Slider component #2327
• fix(clay-css): 2.x Atlas Form Validation .form-feedback-item and .form-text should be semi-bold #2330
• feat(clay-css): 2.x Add usable mixins from bourbon under _vendor-prefixes.scss #2325
• feat(clay-css): 2.x add new change-list-disabled SVG icon #2322
• fix(clay-css): 2.x Nav .nav-justified should work with button #2308
• fix(clay-css): 2.x Table Header (th) should be aligned left by default in Safari #2303
• feat(clay-css): 2.x Clay Time add focus styles for hours, minutes, seconds, etc #2306

v3.0.0-milestone.3

v3.0.0-milestone.3 New version is out! 🚀

Changelog v3.0.0-milestone.2...v3.0.0-milestone.3

New milestone version is out, we have some important things to announce before you go ahead. Remembering that milestone, alpha and beta versions are subject to sudden changes, this is the time to test things before releasing a stable version.

A big thank you to many of you who are collaborating with feedbacks, opening issues and reporting use cases this is extremely important to evolve Clay.

Breaking changes 💥

We have had some important breaking changes in this new milestone that you should be aware of before upgrading to this new version.

1. Deprecated ClayDropDownWithBasicItems in favor of ClayDropDownWithItems

ClayDropDownWithBasicItems is a high-level component that has been removed in favor of ClayDropDownWithItems. Most of its API is just the same as this new component supports rendering of groups, checkbox, radios and other APIs.

Issue #2216, PR #2240

2. Deprecated import ClayForm.Checkbox, ClayForm.Radio, ClayForm.Input, ClayForm.RadioGroup and ClayForm.MultiSelect

We ended up changing the strategy as we were exposing these packages inside ClayForm, to prevent namespaces from growing, we decided to make ClayForm an aggregator. So now you can import the packages as follows:

import {
        ClayInputWithAutocomplete,
        ClayInputWithMultiSelect,
        ClayCheckbox,
        ClayInput,
        ClayRadio,
        ClayRadioGroup,
} from '@clayui/form';

PR #2222

3. Deprecated import ClayNavigation.Breadcrumb

We adopted the same strategy as in ClayForm, to prevent circular dependency between components and the arrival of ClayVerticalNav component in the package.

import {ClayBreadcrumbNav} from '@clayui/navigation';

PR #2251

4. Deprecated deltas.value in favor of deltas.label in ClayPaginationWithBar

This change follows the Items API of ClayDropDownWithItems. We're working on maintaining API consistency with the other packages so that it can be easier to use components and shorten the learning curve, more changes like this may appear in new versions before the final version.

PR #2224

5. ClayModal component now needs useModal hook to work

We removed some rules from ClayModal and move to useModal hook, so ClayModal does not have to use render props to pass the onClose method, now you have direct access to useModal but it has a price, useModal returns an observer signature that must be bound to ClayModal, this creates a communication tunnel between Modal and the hook.

This change makes it easy to use and also allows the arrival of ClayModalProvider.

Try:

import ClayModal, {useModal} from '@clayui/modal';

const [visibleModal, setVisibleModal] = useState<boolean>(false);
const {observer, onClose} = useModal({
	onClose: () => setVisibleModal(false),
});

return (
	...
	{visibleModal && (
		<ClayModal
			observer={observer}
			...
		>
		</ClayModal>
	)}
	...
);

PR #2276

New components

ClayModalProvider (#2276)

Allows you to interactively call a Modal anywhere in your application, so that only a Modal is rendered in your application.

Root:

import {ClayModalProvider} from '@clayui/modal';

<ClayModalProvider>
    <App />
</ClayModalProvider>

Any component:

import {Context} from '@clayui/modal';

const [{onClose, ...state}, dispatch] = useContext(Context);

// Call
dispatch({
	payload: {
		body: <h1>{'Hello world!'}</h1>,
		footer: [
			,
			,
			<ClayButton key={3} onClick={onClose}>
				{'Primary'}
			</ClayButton>,
		],
		header: 'Title',
		size: 'lg',
	},
	type: 1,
});

unstable_ClayLinkContext (Experimental)(#2281)

Introducing ClayLinkContext is a specific use case where you might want to render in place of ClayLink a specific component something like a Link component of react-router.

We are marking it as unstable as we can change it anytime even after the final release of 3.0.0, leave your feedbacks so we can improve it.

import {unstable_ClayLinkContext} from '@clayui/link';
import {Link} from 'react-router-dom';

<unstable_ClayLinkContext.Provider value={Link}>
	<ClayLink href="#1">{'Click to Navigate'}</ClayLink>
</unstable_ClayLinkContext.Provider>

ClayForm.FeedbackGroup, ClayForm.FeedbackIndicator, ClayForm.FeedbackItem, ClayForm.Group, ClayForm.Text, ClayInput.Group, ClayInput.GroupInsetItem, ClayInput.GroupItem and ClayInput.GroupText (#2222)

We are introducing various utilities and components that allow you to compose to build forms in a more enjoyable way. Leave your feedback if this will be helpful to you, your feedback is very important so that we can continue to evolve packages derived from ClayForm.

See use cases in Storybook.

import ClayForm, {ClayInput} from '@clayui/form';

ClayManagementToolbar (#2155)

import ClayManagementToolbar from '@clayui/management-toolbar';

ClaySlider (#2157)

import ClaySlider from '@clayui/slider';

ClayTabs, ClayTabs.Item, ClayTabs.Content and ClayTabs.TabPane (#2157)

We've added ClayTabs low level, leave your feedback so we know where we can improve it, this will help us decide if we should create a high-level component.

import ClayTabs from '@clayui/tabs';

ClayVerticalNav, ClayNavigation, ClayNavigation.Item and ClayNavigation.Link (#2251)

A new base has been added for ClayNavigation, a Nav component, you might want to see the implementation in #2251.

import ClayNavigation, {ClayVerticalNav} from '@clayui/navigation';

ClayListWithItems (#2258)

import {ClayListWithItems} from '@clayui/list';

Enhancements 🛠

ClayDataProvider: link property passes variables formatted in function (#2261)

You could pass a function in the link property to replace the built-in function of fetch but did not enjoy the benefits of using the variables property that allows you to refetch when any value changes. This has been improved so that you can continue to use the link property as a function and use its implementation.

const {} = useResource({
    link: variables => fetch(`https://clay.data/?${variables}`),
    variables: {
        foo: bar
    }
});

ClayForm new base (#2257)

A new base has been added for the default import of ClayForm, now renders a form tag, this makes it more intuitive.

Fixes

We had some important fixes that were reported by you, some preventing the use of the component. Big thank you.

• Typescript autocompletion is no longer working (#2235)
• Error when try to import ClayMultiStep React component (#2228)
• ClayDataProvider doesn't work on IE11 (#2221)
• ClayButtonWithIcon as trigger of a ClayDropdown doesn't trigger the Dropdown (#2234)
• Dropdown created in a modal shows up behind the modal (#2246)
• ClayPaginationWithBar with dependency circular (#2300)
• Date picker component doesn't work well if rendered inside a dropdown (#2288)

Engineering health 👷‍♀️

• We made some use case improvements for useFocusManagement (#2233) and hooked all components that needed focus control (#2227).
• We built the nesting mechanism of portals by adding sub portals to prevent some components from being covered by others, such as a DropDown inside Modal or a DatePicker inside DropDown. Big thank you to @bryceosterhaus for working on this mechanism. (#2277, #2320)

v3.0.0-milestone.2

v3.0.0-milestone.2 New version is out! 🐣

Changelog v3.0.0-milestone.1...v3.0.0-milestone.2

New milestone version is out, we have some important things to announce before you go ahead. Remembering that milestone, alpha and beta versions are subject to sudden changes, this is the time to test things before releasing a stable version.

Breaking changes 💥

1. Deprecated @clayui/checkbox and @clayui/radio-group package

We are moving these components over the @clayui/form package, you will soon start seeing more form related components there (in case you want to see what we are planning for it #2211).

Issue: #2137

2. Deprecated relative path usage in DataProvider

We are removing internal use of metal-url and we are adopting the URL API and searchParams that are native to browsers.

Fix: 192a1c8

3. @clayui/time-picker component rewrite

This component had to be rewritten to accommodate the new markups and design definition, it follows the same behavior as the native time picker. You may want to see an example in the storybook.

Issue: #2106

New components

ClayPaginationWithBar (#2057)

import {ClayPaginationWithBar} from '@clayui/pagination';

Breadcrumb (#2140)

import ClayNavigation from '@clayui/navigation';

<ClayNavigation.Breadcrumb />

ClayCardWithHorizontal (#2197), ClayCardWithInfo (#2195, #2196), ClayCardWithNavigation (#2198) and ClayCardWithUser (#2139)

import {ClayCardWithHorizontal, ClayCardWithInfo, ClayCardWithNavigation, ClayCardWithUser} from '@clayui/card';

ClayDropDownWithBasicItems (#2153)

import {ClayDropDownWithBasicItems} from '@clayui/drop-down';

MultiSelect (#1946)

import ClayForm from '@clayui/form';

<ClayForm.MultiSelect />

ClayInputWithAutocomplete (#2141)

import {ClayInputWithAutocomplete} from '@clayui/form';

ClayButtonWithIcon (#2138)

import {ClayButtonWithIcon} from '@clayui/button';

ClayMultiStepNav and ClayMultiStepNavWithBasicItems (#2156)

import ClayMultiStepNav, {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav';

Fixes

• Clay modal closes when clicking on an element that removes itself 3.x (#2165)
• clay-chats: ref is not set for 'onafterinit' option (#2120)

Engineering health 👷‍♀️

• We created the useFocusManagement experimental hook (#2189) to handle focus on our high-level components (#1987), it will not be published for external use it is a temporary hook, we are confident that Focus Manager RFC will be merged and adopted at React Core facebook/react#15849.

v2.16.2

• fix(clay-css): Form Validation Feedback space between icon and text should be 4px (#2075)(#2078)
• fix(clay-css): Management Bar Navbar Text should break to new line (#2085)(#2094)
• fix(clay-css): Updates to mixin clay-form-control-variant and forms from (#2084)
• feat(clay-autocomplete): Adds navigation via ArrowUp and ArrowDown for accessibility (#2018)(#2129)
• fix(clay-css): New SVG Icon reset (#2146)(#2148)
• feat(clay-dropdown): add the API useSearchableWithForm to ClayDropdownBase (#2164)(#2166)
• fix(clay-css): SVG Icons added megaphone-full, pin-full, and bell-full (#2119)(#2150)

v2.16.1

• feat(clay-autocomplete): Create a new internal state called expanded to deal with autocomplete's dropdown (#2059)(#2060)