Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ComboboxControl / FormTokenField: Add flag for larger default size #40746

Merged
merged 8 commits into from
Jul 1, 2022
Merged

ComboboxControl / FormTokenField: Add flag for larger default size #40746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1d8fc15
FormTokenField: Add flag for larger default size
mirka Jun 17, 2022
3cd6112
ComboboxControl: Add flag for larger default size
mirka Apr 29, 2022
09bd5ed
Add changelog entry
mirka Jun 17, 2022
3d0bca5
ComboboxControl: Fixup heights
mirka Jun 21, 2022
7e411f1
Use Flex components
mirka Jun 21, 2022
d301e76
Merge branch 'trunk' into form-token-field-combobox-36px
mirka Jun 21, 2022
7cbef12
Fix keys
mirka Jun 21, 2022
cd51b86
Merge branch 'trunk' into form-token-field-combobox-36px
mirka Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
### Enhancements

- Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
- `ComboboxControl` & `FormTokenField`: Add `__next36pxDefaultSize` flag for larger default size ([#40746](https://github.com/WordPress/gutenberg/pull/40746)).
- `BorderControl`: Improve TypeScript support. ([#41843](https://github.com/WordPress/gutenberg/pull/41843)).

### Internal
Expand Down
10 changes: 7 additions & 3 deletions packages/components/src/combobox-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ import { closeSmall } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { InputWrapperFlex } from './styles';
import TokenInput from '../form-token-field/token-input';
import SuggestionsList from '../form-token-field/suggestions-list';
import BaseControl from '../base-control';
import Button from '../button';
import { Flex, FlexBlock, FlexItem } from '../flex';
import { FlexBlock, FlexItem } from '../flex';
import withFocusOutside from '../higher-order/with-focus-outside';

const noop = () => {};
Expand All @@ -44,6 +45,7 @@ const DetectOutside = withFocusOutside(
);

function ComboboxControl( {
__next36pxDefaultSize,
value,
label,
options,
Expand Down Expand Up @@ -225,7 +227,9 @@ function ComboboxControl( {
tabIndex="-1"
onKeyDown={ onKeyDown }
>
<Flex>
<InputWrapperFlex
__next36pxDefaultSize={ __next36pxDefaultSize }
>
<FlexBlock>
<TokenInput
className="components-combobox-control__input"
Expand Down Expand Up @@ -257,7 +261,7 @@ function ComboboxControl( {
/>
</FlexItem>
) }
</Flex>
</InputWrapperFlex>
{ isExpanded && (
<SuggestionsList
instanceId={ instanceId }
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/combobox-control/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,23 +266,24 @@ const mapCountryOption = ( country ) => ( {

const countryOptions = countries.map( mapCountryOption );

function CountryCodeComboboxControl( { allowReset } ) {
function CountryCodeComboboxControl( args ) {
const [ value, setValue ] = useState( null );

return (
<>
<ComboboxControl
{ ...args }
value={ value }
onChange={ setValue }
label="Select a country"
options={ countryOptions }
allowReset={ allowReset }
/>
<p>Value: { value }</p>
</>
);
}
export const _default = CountryCodeComboboxControl.bind( {} );
_default.args = {
__next36pxDefaultSize: false,
allowReset: false,
};
2 changes: 1 addition & 1 deletion packages/components/src/combobox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ input.components-combobox-control__input[type="text"] {
align-items: flex-start;
width: 100%;
margin: 0 0 $grid-unit-10 0;
padding: $grid-unit-05;
padding: 0;
ciampo marked this conversation as resolved.
Show resolved Hide resolved

&:focus-within {
@include input-style__focus();
Expand Down
27 changes: 27 additions & 0 deletions packages/components/src/combobox-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
ciampo marked this conversation as resolved.
Show resolved Hide resolved
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/react';

/**
* Internal dependencies
*/
import { Flex } from '../flex';
import { space } from '../ui/utils/space';

const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
! __next36pxDefaultSize &&
css`
height: 28px; // 30px - 2px vertical borders on parent container
padding-left: ${ space( 1 ) };
padding-right: ${ space( 1 ) };
`;

export const InputWrapperFlex = styled( Flex )`
height: 34px; // 36px - 2px vertical borders on parent container
padding-left: ${ space( 2 ) };
padding-right: ${ space( 2 ) };

${ deprecatedDefaultSize }
`;
65 changes: 42 additions & 23 deletions packages/components/src/form-token-field/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
*/
import Token from './token';
import TokenInput from './token-input';
import { TokensAndInputWrapperFlex } from './styles';
import SuggestionsList from './suggestions-list';
import type { FormTokenFieldProps, TokenItem } from './types';
import { FlexItem } from '../flex';

/**
* A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
Expand Down Expand Up @@ -71,6 +73,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
__experimentalExpandOnFocus = false,
__experimentalValidateInput = () => true,
__experimentalShowHowTo = true,
__next36pxDefaultSize = false,
} = props;

const instanceId = useInstanceId( FormTokenField );
Expand Down Expand Up @@ -566,28 +569,35 @@ export function FormTokenField( props: FormTokenFieldProps ) {
const termsCount = tokens.length;

return (
<Token
key={ 'token-' + _value }
value={ _value }
status={ status }
title={ typeof token !== 'string' ? token.title : undefined }
displayTransform={ displayTransform }
onClickRemove={ onTokenClickRemove }
isBorderless={
( typeof token !== 'string' && token.isBorderless ) ||
isBorderless
}
onMouseEnter={
typeof token !== 'string' ? token.onMouseEnter : undefined
}
onMouseLeave={
typeof token !== 'string' ? token.onMouseLeave : undefined
}
disabled={ 'error' !== status && disabled }
messages={ messages }
termsCount={ termsCount }
termPosition={ termPosition }
/>
<FlexItem key={ 'token-' + _value }>
<Token
value={ _value }
status={ status }
title={
typeof token !== 'string' ? token.title : undefined
}
displayTransform={ displayTransform }
onClickRemove={ onTokenClickRemove }
isBorderless={
( typeof token !== 'string' && token.isBorderless ) ||
isBorderless
}
onMouseEnter={
typeof token !== 'string'
? token.onMouseEnter
: undefined
}
onMouseLeave={
typeof token !== 'string'
? token.onMouseLeave
: undefined
}
disabled={ 'error' !== status && disabled }
messages={ messages }
termsCount={ termsCount }
termPosition={ termPosition }
/>
</FlexItem>
);
}

Expand Down Expand Up @@ -660,7 +670,16 @@ export function FormTokenField( props: FormTokenFieldProps ) {
onMouseDown={ onContainerTouched }
onTouchStart={ onContainerTouched }
>
{ renderTokensAndInput() }
<TokensAndInputWrapperFlex
justify="flex-start"
align="center"
gap={ 1 }
wrap={ true }
__next36pxDefaultSize={ __next36pxDefaultSize }
hasTokens={ !! value.length }
>
{ renderTokensAndInput() }
</TokensAndInputWrapperFlex>
{ isExpanded && (
<SuggestionsList
instanceId={ instanceId }
Expand Down
9 changes: 2 additions & 7 deletions packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
.components-form-token-field__input-container {
@include input-control();
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
margin: 0 0 $grid-unit-10 0;
padding: $grid-unit-05*0.5 $grid-unit-05;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're refactoring this padding so it's handled by a subcontainer that doesn't contain the suggestions list (<TokensAndInputWrapper>). This allows us to remove the awkward negative margins on .components-form-token-field__suggestions-list that were needed to break out of that padding.

padding: 0;
cursor: text;


&.is-disabled {
background: $gray-300;
border-color: $gray-300;
Expand Down Expand Up @@ -67,7 +63,6 @@
.components-form-token-field__token {
font-size: $default-font-size;
display: flex;
margin: 2px 4px 2px 0;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of handling the spacing between tokens with margins here, we now use a flex gap on the container (<TokensAndInputWrapper>). This way the token margins don't mess with the container's paddings.

color: $gray-900;
max-width: 100%;

Expand Down Expand Up @@ -180,7 +175,7 @@
@include reduce-motion("transition");
list-style: none;
border-top: $border-width solid $gray-700;
margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);
margin: 0;
padding: 0;
}

Expand Down
32 changes: 32 additions & 0 deletions packages/components/src/form-token-field/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/react';

/**
* Internal dependencies
*/
import { Flex } from '../flex';
import { space } from '../ui/utils/space';

type TokensAndInputWrapperProps = {
__next36pxDefaultSize: boolean;
hasTokens: boolean;
};

const deprecatedPaddings = ( {
__next36pxDefaultSize,
hasTokens,
}: TokensAndInputWrapperProps ) =>
! __next36pxDefaultSize &&
css`
padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
`;
Comment on lines +18 to +26
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In trunk, the input height increases a bit when you commit a token. I'm keeping this behavior for now in the deprecated case, but in the 36px case there won't be anymore height jumps.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like a sensible approach


export const TokensAndInputWrapperFlex = styled( Flex )`
padding: 5px ${ space( 1 ) };

${ deprecatedPaddings }
`;
7 changes: 7 additions & 0 deletions packages/components/src/form-token-field/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,13 @@ export interface FormTokenFieldProps
* @default true
*/
__experimentalShowHowTo?: boolean;
/**
* Start opting into the larger default height that will become the
* default size in a future version.
*
* @default false
*/
__next36pxDefaultSize?: boolean;
}

export interface SuggestionsListProps< T = string | { value: string } > {
Expand Down