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

InputBase: Add isBorderless prop #58750

Merged
merged 4 commits into from
Feb 7, 2024
Merged

InputBase: Add isBorderless prop #58750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1753477
InputBase: Add `isBorderless` prop
mirka Feb 6, 2024
f0bc804
Omit from public InputControl props
mirka Feb 6, 2024
7d78e4d
Update changelog
mirka Feb 6, 2024
4f38523
Update snapshots
mirka Feb 6, 2024
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 @@ -39,6 +39,7 @@
- `Composite`: Removing Reakit `Composite` implementation ([#58620](https://github.com/WordPress/gutenberg/pull/58620)).
- Removing Reakit as a dependency of the components package ([#58631](https://github.com/WordPress/gutenberg/pull/58631)).
- `CustomSelect`: add unit tests ([#58583](https://github.com/WordPress/gutenberg/pull/58583)).
- `InputBase`: Add `isBorderless` prop ([#58750](https://github.com/WordPress/gutenberg/pull/58750)).

## 25.16.0 (2024-01-24)

Expand Down
16 changes: 8 additions & 8 deletions packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,9 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
class="components-base-control__field emotion-2 emotion-3"
>
<div
class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
data-wp-c16t="true"
data-wp-component="Flex"
data-wp-component="InputBase"
>
<div
class="components-flex-item emotion-7 emotion-8 emotion-6"
Expand Down Expand Up @@ -459,9 +459,9 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
class="components-base-control__field emotion-2 emotion-3"
>
<div
class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
data-wp-c16t="true"
data-wp-component="Flex"
data-wp-component="InputBase"
>
<div
class="components-flex-item emotion-7 emotion-8 emotion-6"
Expand Down Expand Up @@ -740,9 +740,9 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
class="components-base-control__field emotion-2 emotion-3"
>
<div
class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
data-wp-c16t="true"
data-wp-component="Flex"
data-wp-component="InputBase"
>
<div
class="components-flex-item emotion-7 emotion-8 emotion-6"
Expand Down Expand Up @@ -1033,9 +1033,9 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
class="components-base-control__field emotion-2 emotion-3"
>
<div
class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
data-wp-c16t="true"
data-wp-component="Flex"
data-wp-component="InputBase"
>
<div
class="components-flex-item emotion-7 emotion-8 emotion-6"
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/input-control/backdrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@ import { memo } from '@wordpress/element';
*/
import { BackdropUI } from './styles/input-control-styles';

function Backdrop( { disabled = false, isFocused = false } ) {
function Backdrop( {
disabled = false,
isBorderless = false,
isFocused = false,
} ) {
return (
<BackdropUI
aria-hidden="true"
className="components-input-control__backdrop"
Copy link
Member Author

Choose a reason for hiding this comment

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

Technically, we can already just use this .components-input-control__backdrop selector to override border styles from any consumer. Still, I think it's better to control this centrally because it's intertwined with the border styles in the focused and disabled states, as you can see in the input-control-styles.tsx file.

disabled={ disabled }
isBorderless={ isBorderless }
isFocused={ isFocused }
/>
);
Expand Down
19 changes: 14 additions & 5 deletions packages/components/src/input-control/input-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
* WordPress dependencies
*/
import { useInstanceId } from '@wordpress/compose';
import { forwardRef, useMemo } from '@wordpress/element';
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -23,7 +23,11 @@ import {
} from './styles/input-control-styles';
import type { InputBaseProps, LabelPosition } from './types';
import type { WordPressComponentProps } from '../context';
import { ContextSystemProvider } from '../context';
import {
ContextSystemProvider,
contextConnect,
useContextSystem,
} from '../context';
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';

function useUniqueId( idProp?: string ) {
Expand Down Expand Up @@ -73,14 +77,15 @@ export function InputBase(
hideLabelFromVision = false,
labelPosition,
id: idProp,
isBorderless = false,
isFocused = false,
label,
prefix,
size = 'default',
suffix,
...restProps
} = useDeprecated36pxDefaultSizeProp(
props,
useContextSystem( props, 'InputBase' ),
'wp.components.InputBase',
'6.4'
);
Expand Down Expand Up @@ -138,10 +143,14 @@ export function InputBase(
</Suffix>
) }
</ContextSystemProvider>
<Backdrop disabled={ disabled } isFocused={ isFocused } />
<Backdrop
disabled={ disabled }
isBorderless={ isBorderless }
isFocused={ isFocused }
/>
</Container>
</Root>
);
}

export default forwardRef( InputBase );
export default contextConnect( InputBase, 'InputBase' );
9 changes: 6 additions & 3 deletions packages/components/src/input-control/styles/input-control-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export const Input = styled.input< InputProps >`
box-sizing: border-box;
border: none;
box-shadow: none !important;
color: ${ COLORS.gray[ 900 ] };
color: ${ COLORS.theme.foreground };
Copy link
Member Author

Choose a reason for hiding this comment

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

Unrelated to borderless, but I'd like to sneak in this small enhancement for better themability if that's ok 🥺

display: block;
font-family: inherit;
margin: 0;
Expand Down Expand Up @@ -263,28 +263,31 @@ export const LabelWrapper = styled( FlexItem )`

type BackdropProps = {
disabled?: boolean;
isBorderless?: boolean;
isFocused?: boolean;
};

const backdropFocusedStyles = ( {
disabled,
isBorderless,
isFocused,
}: BackdropProps ): SerializedStyles => {
let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
let borderColor = isBorderless ? 'transparent' : COLORS.ui.border;

let boxShadow;
let outline;
let outlineOffset;

if ( isFocused ) {
borderColor = COLORS.ui.borderFocus;
boxShadow = CONFIG.controlBoxShadowFocus;
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline = `2px solid transparent`;
outlineOffset = `-2px`;
}

if ( disabled ) {
borderColor = COLORS.ui.borderDisabled;
borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled;
}

return css( {
Expand Down
11 changes: 10 additions & 1 deletion packages/components/src/input-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,19 @@ export interface InputBaseProps extends BaseProps, FlexProps {
* If this property is added, a label will be generated using label property as the content.
*/
label?: ReactNode;
/**
* Whether to hide the border when not focused.
*
* @default false
*/
isBorderless?: boolean;
Comment on lines +179 to +184
Copy link
Member Author

Choose a reason for hiding this comment

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

This prop shouldn't be exposed in the APIs of any public component.

}

export interface InputControlProps
extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
extends Omit<
InputBaseProps,
'children' | 'isBorderless' | 'isFocused' | keyof FlexProps
>,
Pick< BaseControlProps, 'help' >,
/**
* The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
Expand Down
Loading