Skip to content

Commit

Permalink
AlignmentMatrixControl: Promote to stable (#60913)
Browse files Browse the repository at this point in the history
* Remove "experimental" designation for `AlignmentMatrixControl`

* Add CHANGELOG entry

* Tweak exports

* Replace in app

* Add changelog

* Fix changelog

---------

Co-authored-by: fullofcaffeine <fullofcaffeine@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
  • Loading branch information
5 people authored Aug 30, 2024
1 parent 4c5feda commit 5a87fb0
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { DOWN } from '@wordpress/keycodes';
import {
ToolbarButton,
Dropdown,
__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
AlignmentMatrixControl,
} from '@wordpress/components';

const noop = () => {};
Expand Down
2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

- Deprecate `replace` from the options accepted by `useNavigator().goTo()` ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
- Soft deprecate `size` prop on `AlignmentMatrixControl.Icon` ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
- `__experimentalAlignmentMatrixControl` can now be imported as a stable `AlignmentMatrixControl` ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).

### Enhancements

Expand All @@ -24,6 +25,7 @@
- `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
- `InputControl`: Add variants to prefix/suffix wrappers ([#64824](https://github.com/WordPress/gutenberg/pull/64824)).
- `Navigator`: remove location history, simplify internal logic ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
- `AlignmentMatrixControl`: Promote to stable ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
- Tighten gap between the main control and the prefix/suffix slot for the following components ([#64908](https://github.com/WordPress/gutenberg/pull/64908)).
- `InputControl`
- `NumberControl`
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/alignment-matrix-control/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
# AlignmentMatrixControl

<div class="callout callout-alert">
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
</div>

AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.

## Usage

```jsx
import { useState } from 'react';
import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
import { AlignmentMatrixControl } from '@wordpress/components';

const Example = () => {
const [ alignment, setAlignment ] = useState( 'center center' );
Expand Down
61 changes: 38 additions & 23 deletions packages/components/src/alignment-matrix-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,7 @@ import { GRID, getItemId, getItemValue } from './utils';
import type { WordPressComponentProps } from '../context';
import type { AlignmentMatrixControlProps } from './types';

/**
*
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
*
* ```jsx
* import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const Example = () => {
* const [ alignment, setAlignment ] = useState( 'center center' );
*
* return (
* <AlignmentMatrixControl
* value={ alignment }
* onChange={ setAlignment }
* />
* );
* };
* ```
*/
export function AlignmentMatrixControl( {
function UnforwardedAlignmentMatrixControl( {
className,
id,
label = __( 'Alignment Matrix Control' ),
Expand All @@ -52,7 +32,7 @@ export function AlignmentMatrixControl( {
...props
}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
const baseId = useInstanceId(
AlignmentMatrixControl,
UnforwardedAlignmentMatrixControl,
'alignment-matrix-control',
id
);
Expand Down Expand Up @@ -100,6 +80,41 @@ export function AlignmentMatrixControl( {
);
}

AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
/**
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
*
* ```jsx
* import { AlignmentMatrixControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const Example = () => {
* const [ alignment, setAlignment ] = useState( 'center center' );
*
* return (
* <AlignmentMatrixControl
* value={ alignment }
* onChange={ setAlignment }
* />
* );
* };
* ```
*/
export const AlignmentMatrixControl = Object.assign(
UnforwardedAlignmentMatrixControl,
{
/**
* Render an alignment matrix as an icon.
*
* ```jsx
* import { AlignmentMatrixControl } from '@wordpress/components';
*
* <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
* ```
*/
Icon: Object.assign( AlignmentMatrixControlIcon, {
displayName: 'AlignmentMatrixControl.Icon',
} ),
}
);

export default AlignmentMatrixControl;
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { HStack } from '../../h-stack';
import type { AlignmentMatrixControlProps } from '../types';

const meta: Meta< typeof AlignmentMatrixControl > = {
title: 'Components (Experimental)/AlignmentMatrixControl',
title: 'Components/AlignmentMatrixControl',
component: AlignmentMatrixControl,
subcomponents: {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ export {
} from '@wordpress/primitives';

// Components.
export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
export {
/** @deprecated Import `AlignmentMatrixControl` instead. */
default as __experimentalAlignmentMatrixControl,
default as AlignmentMatrixControl,
} from './alignment-matrix-control';
export {
default as Animate,
getAnimateClassName as __unstableGetAnimateClassName,
Expand Down
5 changes: 3 additions & 2 deletions storybook/manager-head.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script>
( function redirectIfStoryMoved() {
const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
'navigation',
'alignmentmatrixcontrol',
'customselectcontrol-v2',
'theme',
'navigation',
'progressbar',
'theme',
];
const REDIRECTS = [
{
Expand Down

0 comments on commit 5a87fb0

Please sign in to comment.