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

Add inside label position to InputControl #55977

Closed
wants to merge 4 commits into from
Closed

Add inside label position to InputControl #55977

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
e1ddd76
Add `inside` label position to `InputControl`
Nov 8, 2023
17ba00a
Updating CHANGELOG.md
Nov 8, 2023
aba4896
Updating test snapshot
Nov 8, 2023
cbe90bb
Skipping label render if not present
Nov 10, 2023
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 @@ -16,6 +16,7 @@

- `ToggleGroupControl`: Add opt-in prop for 40px default size ([#55789](https://github.com/WordPress/gutenberg/pull/55789)).
- `TextControl`: Add opt-in prop for 40px default size ([#55471](https://github.com/WordPress/gutenberg/pull/55471)).
- `InputControl`: Add new `inside` label position ([#55977](https://github.com/WordPress/gutenberg/pull/55977)).

## 25.11.0 (2023-11-02)

Expand Down
72 changes: 36 additions & 36 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 @@ -82,10 +82,10 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
}

.emotion-13 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
box-sizing: border-box;
border-radius: inherit;
display: -webkit-box;
Expand Down Expand Up @@ -135,18 +135,18 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
}

.emotion-17 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.emotion-20 {
Expand Down Expand Up @@ -353,10 +353,10 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
}

.emotion-13 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
box-sizing: border-box;
border-radius: inherit;
display: -webkit-box;
Expand Down Expand Up @@ -406,18 +406,18 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
}

.emotion-17 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.emotion-20 {
Expand Down Expand Up @@ -634,10 +634,10 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
}

.emotion-13 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
box-sizing: border-box;
border-radius: inherit;
display: -webkit-box;
Expand Down Expand Up @@ -687,18 +687,18 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
}

.emotion-17 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.emotion-20 {
Expand Down Expand Up @@ -927,10 +927,10 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
}

.emotion-13 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
box-sizing: border-box;
border-radius: inherit;
display: -webkit-box;
Expand Down Expand Up @@ -980,18 +980,18 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
}

.emotion-17 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.emotion-20 {
Expand Down
23 changes: 14 additions & 9 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 @@ -13,7 +13,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
* Internal dependencies
*/
import Backdrop from './backdrop';
import Label from './label';
import { Label, InnerLabel } from './label';
import {
Container,
Root,
Expand Down Expand Up @@ -98,6 +98,13 @@ export function InputBase(
InputControlSuffixWrapper: { paddingRight },
};
}, [ paddingLeft, paddingRight ] );
const labelProps = {
className: 'components-input-control__label',
htmlFor: id,
hideLabelFromVision,
labelPosition,
};
const labelInside = labelPosition === 'inside';

return (
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
Expand All @@ -110,14 +117,9 @@ export function InputBase(
labelPosition={ labelPosition }
ref={ ref }
>
<Label
className="components-input-control__label"
hideLabelFromVision={ hideLabelFromVision }
labelPosition={ labelPosition }
htmlFor={ id }
>
{ label }
</Label>
{ label && ! labelInside && (
<Label { ...labelProps }>{ label }</Label>
) }
<Container
__unstableInputWidth={ __unstableInputWidth }
className="components-input-control__container"
Expand All @@ -126,6 +128,9 @@ export function InputBase(
labelPosition={ labelPosition }
>
<ContextSystemProvider value={ prefixSuffixContextValue }>
{ label && labelInside && (
<InnerLabel { ...labelProps }>{ label }</InnerLabel>
) }
{ prefix && (
<Prefix className="components-input-control__prefix">
{ prefix }
Expand Down
16 changes: 15 additions & 1 deletion packages/components/src/input-control/label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
/**
* Internal dependencies
*/
import InputControlPrefixWrapper from './input-prefix-wrapper';
import { VisuallyHidden } from '../visually-hidden';
import {
Label as BaseLabel,
LabelWrapper,
InnerLabelWrapper,
} from './styles/input-control-styles';
import type { WordPressComponentProps } from '../context';
import type { InputControlLabelProps } from './types';

export default function Label( {
export function Label( {
children,
hideLabelFromVision,
htmlFor,
Expand All @@ -33,3 +35,15 @@ export default function Label( {
</LabelWrapper>
);
}

export function InnerLabel( {
Copy link
Contributor

Choose a reason for hiding this comment

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

I noticed that, when the label position is set to inside but the label prop is still empty, the inner label component still renders an empty label element, which also causes the select element to shift slightly to the right.

I wonder if we should avoid rendering a label at all when its contents are empty?

children,
htmlFor,
...props
}: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
return (
<InnerLabelWrapper htmlFor={ htmlFor } { ...props }>
<InputControlPrefixWrapper>{ children }</InputControlPrefixWrapper>
</InnerLabelWrapper>
);
}
6 changes: 6 additions & 0 deletions packages/components/src/input-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,9 @@ WithEdgeLabel.args = {
__unstableInputWidth: '20em',
labelPosition: 'edge',
};

export const WithInsideLabel = Template.bind( {} );
WithInsideLabel.args = {
...Default.args,
labelPosition: 'inside',
};
18 changes: 14 additions & 4 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 @@ -68,7 +68,7 @@ const containerWidthStyles = ( {
};

export const Container = styled.div< ContainerProps >`
align-items: center;
align-items: stretch;
box-sizing: border-box;
border-radius: inherit;
display: flex;
Expand Down Expand Up @@ -259,6 +259,14 @@ export const LabelWrapper = styled( FlexItem )`
max-width: calc( 100% - 10px );
`;

export const InnerLabelWrapper = styled.label`
${ baseLabelTypography };

display: flex;
align-items: center;
white-space: nowrap;
`;

type BackdropProps = {
disabled?: boolean;
isFocused?: boolean;
Expand Down Expand Up @@ -315,12 +323,14 @@ export const BackdropUI = styled.div< BackdropProps >`

export const Prefix = styled.span`
box-sizing: border-box;
display: block;
display: flex;
align-items: center;
align-self: stretch;
`;

export const Suffix = styled.span`
align-items: center;
align-self: stretch;
box-sizing: border-box;
display: flex;
align-items: center;
align-self: stretch;
`;
2 changes: 1 addition & 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 @@ -17,7 +17,7 @@ import type { WordPressComponentProps } from '../context';
import type { FlexProps } from '../flex/types';
import type { BaseControlProps } from '../base-control/types';

export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge' | 'inside';

export type DragDirection = 'n' | 's' | 'e' | 'w';

Expand Down
Loading