Skip to content

SelectControl: Add flag for larger default size #42456

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

Merged
mirka merged 3 commits into from
Jul 19, 2022
Merged

SelectControl: Add flag for larger default size #42456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d682ef
SelectControl: Add flag for larger default size
mirka Jul 15, 2022
d7bf9da
Add changelog
mirka Jul 15, 2022
041d9c6
Merge branch 'trunk' into select-control-36px
mirka Jul 19, 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 @@ -6,6 +6,7 @@

- `BorderControl`: Improve labelling, tooltips and DOM structure ([#42348](https://github.com/WordPress/gutenberg/pull/42348/)).
- `BaseControl`: Set zero padding on `StyledLabel` to ensure cross-browser styling ([#42348](https://github.com/WordPress/gutenberg/pull/42348/)).
- `SelectControl`: Add flag for larger default size ([#42456](https://github.com/WordPress/gutenberg/pull/42456/)).
- `UnitControl`: Update unit select's focus styles to match input's ([#42383](https://github.com/WordPress/gutenberg/pull/42383)).

### Internal
Expand Down
42 changes: 33 additions & 9 deletions packages/components/src/select-control/styles/select-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import styled from '@emotion/styled';
import { COLORS, rtl } from '../../utils';
import type { SelectControlProps } from '../types';

interface SelectProps extends Pick< SelectControlProps, 'disabled' > {
interface SelectProps
extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > {
// Using `selectSize` instead of `size` to avoid a type conflict with the
// `size` HTML attribute of the `select` element.
selectSize?: SelectControlProps[ 'size' ];
Expand Down Expand Up @@ -45,11 +46,14 @@ const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
`;
};

const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
const sizeStyles = ( {
__next36pxDefaultSize,
selectSize = 'default',
}: SelectProps ) => {
const sizes = {
default: {
height: 30,
minHeight: 30,
height: 36,
minHeight: 36,
paddingTop: 0,
paddingBottom: 0,
},
Expand All @@ -67,16 +71,28 @@ const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
},
};

const style = sizes[ selectSize ];
if ( ! __next36pxDefaultSize ) {
sizes.default = {
height: 30,
minHeight: 30,
paddingTop: 0,
paddingBottom: 0,
};
}

const style = sizes[ selectSize ] || sizes.default;
Copy link
Contributor

@ciampo ciampo Jul 15, 2022

Choose a reason for hiding this comment

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

In which situation is sizes[ selectSize ] returning undefined, so that we have to fallback to the default? (same applies to the similar code change in the sizePaddings mixin)

Copy link
Member Author

@mirka mirka Jul 19, 2022

Choose a reason for hiding this comment

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

Just a courtesy fallback in case a consumer passes an invalid size string.


return css( style );
};

const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
const sizePaddings = ( {
__next36pxDefaultSize,
selectSize = 'default',
}: SelectProps ) => {
const sizes = {
default: {
paddingLeft: 8,
paddingRight: 24,
paddingLeft: 16,
paddingRight: 32,
},
small: {
paddingLeft: 8,
Expand All @@ -87,7 +103,15 @@ const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
paddingRight: 32,
},
};
return rtl( sizes[ selectSize ] );

if ( ! __next36pxDefaultSize ) {
sizes.default = {
paddingLeft: 8,
paddingRight: 24,
};
}

return rtl( sizes[ selectSize ] || sizes.default );
};

// TODO: Resolve need to use &&& to increase specificity
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/select-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type { BaseControlProps } from '../base-control/types';
export interface SelectControlProps
extends Pick<
InputBaseProps,
| '__next36pxDefaultSize'
| 'disabled'
| 'hideLabelFromVision'
| 'label'
Expand Down