Skip to content

Commit

Permalink
DatePicker: VR fixes to standardize form fields and match them to Fig…
Browse files Browse the repository at this point in the history 
…ma spacing (#3850)
  • Loading branch information
@AlbertCarreras
AlbertCarreras authored Nov 5, 2024
1 parent 228f1f0 commit c0124f4
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 125 deletions.
228 changes: 128 additions & 100 deletions packages/gestalt-datepicker/src/DatePicker/VRDateInput.css
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,4 @@
.inputParent {
isolation: isolate;
position: relative;
}

.input {
box-sizing: border-box;
display: block;
font-family: var(--sema-font-family-body-md);
font-size: var(--sema-font-size-body-md);
font-weight: var(--sema-font-weight-body-md-default);
letter-spacing: var(--sema-font-letterspacing-body-md);
line-height: var(--sema-font-lineheight-body-md);
position: relative;
text-decoration: var(--sema-font-textdecoration-body-md-default);
width: 100%;
}

.visuallyHidden {
border: 0;

/* clip is deprecated https: //developer.mozilla.org/en-US/docs/Web/CSS/clip */
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);

/* clip is replaced with clip-path */
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: var(--sema-space-300);
position: absolute;
white-space: nowrap;
width: 1px;
}
/* style */

.enabled {
background: var(--sema-color-background-default);
Expand Down Expand Up @@ -76,144 +42,206 @@
border: 1px solid var(--sema-color-border-disabled);
}

/* input / label / end icon positioning */

.inputParent {
isolation: isolate;
position: relative;
}

.input {
box-sizing: border-box;
display: block;
font-family: var(--sema-font-family-body-md);
font-size: var(--sema-font-size-body-md);
font-weight: var(--sema-font-weight-body-md-default);
letter-spacing: var(--sema-font-letterspacing-body-md);
line-height: var(--sema-font-lineheight-body-md);
position: relative;
text-decoration: var(--sema-font-textdecoration-body-md-default);
width: 100%;
}

.visuallyHidden {
border: 0;

/* clip is deprecated https: //developer.mozilla.org/en-US/docs/Web/CSS/clip */
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);

/* clip is replaced with clip-path */
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: var(--sema-space-300);
position: absolute;
white-space: nowrap;
width: 1px;
}

.label {
padding: var(--sema-space-0);
position: absolute;
z-index: 1;
}

.endIconContainer {
align-items: center;
bottom: var(--sema-space-0);
display: flex;
height: 100%;
position: absolute;
top: var(--sema-space-0);
}

/* md */

/* md input */

.md_input {
border-radius: var(--sema-rounding-300);
min-height: 36px;
padding-bottom: var(--sema-space-200);
}

.md_label {
top: calc(var(--sema-space-200) + var(--sema-space-50));
}

.md_inputLabelPadding {
padding-bottom: calc(var(--sema-space-200) - var(--sema-space-25));
padding-top: calc(
var(--sema-space-200) + var(--sema-space-50) +
(var(--sema-font-lineheight-ui-xs))
var(--sema-space-100) + var(--sema-space-150) +
var(--sema-font-lineheight-ui-xs) - var(--sema-space-25)
);
}

.md_inputNoLabelPadding {
padding-top: var(--sema-space-200);
padding-bottom: calc(
var(--sema-space-100) + var(--sema-space-50) - var(--sema-space-25)
);
padding-top: calc(
var(--sema-space-100) + var(--sema-space-50) - var(--sema-space-25)
);
}

html[dir="rtl"] .md_inputHorizontalPadding {
padding-left: calc(
var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
);
html[dir="rtl"] .md_inputStartPadding {
padding-right: var(--sema-space-300);
}

html:not([dir="rtl"]) .md_inputHorizontalPadding {
html:not([dir="rtl"]) .md_inputStartPadding {
padding-left: var(--sema-space-300);
padding-right: calc(
var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
}

html[dir="rtl"] .md_inputEndButtonEndPadding {
padding-left: calc(var(--sema-space-200) + var(--sema-space-600));
}

html:not([dir="rtl"]) .md_inputEndButtonEndPadding {
padding-right: calc(var(--sema-space-200) + var(--sema-space-600));
}

/* md label */

.md_labelTopPosition {
top: calc(
var(--sema-space-100) + var(--sema-space-150) - var(--sema-space-25)
);
}

html[dir="rtl"] .md_label {
html[dir="rtl"] .md_labelPosition {
left: calc(
var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
);
right: var(--sema-space-300);
right: calc(var(--sema-space-300) + var(--sema-space-25));
}

html:not([dir="rtl"]) .md_label {
left: var(--sema-space-300);
html:not([dir="rtl"]) .md_labelPosition {
left: calc(var(--sema-space-300) + var(--sema-space-25));
right: calc(
var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
);
}

.calendarButtonContainer {
align-items: center;
bottom: var(--sema-space-0);
display: flex;
height: 100%;
position: absolute;
top: var(--sema-space-0);
}
/* md icon end */

html:not([dir="rtl"]) .md_calendarButtonContainer {
right: calc(var(--sema-space-200) + var(--sema-space-100));
html:not([dir="rtl"]) .md_endIconContainer {
right: var(--sema-space-300);
}

html[dir="rtl"] .md_calendarButtonContainer {
left: calc(var(--sema-space-200) + var(--sema-space-100));
html[dir="rtl"] .md_endIconContainer {
left: var(--sema-space-300);
}

/* lg */

/* lg input */

.lg_input {
border-radius: var(--sema-rounding-400);
min-height: 48px;
padding-bottom: var(--sema-space-300);
}

.lg_label {
top: calc(var(--sema-space-300) + var(--sema-space-100));
}

.lg_inputLabelPadding {
padding-bottom: calc(
var(--sema-space-300) + var(--sema-space-50) - var(--sema-space-25)
);
padding-top: calc(
var(--sema-space-300) + var(--sema-space-100) +
(var(--sema-font-lineheight-ui-xs) + var(--sema-space-100))
var(--sema-font-lineheight-ui-xs) + var(--sema-space-100) -
var(--sema-space-25)
);
}

.lg_inputNoLabelPadding {
padding-top: var(--sema-space-300);
padding-bottom: calc(
var(--sema-space-300) + var(--sema-space-25) - var(--sema-space-25)
);
padding-top: calc(
var(--sema-space-300) + var(--sema-space-25) - var(--sema-space-25)
);
}

html[dir="rtl"] .lg_inputHorizontalPadding {
padding-left: calc(
var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
);
html[dir="rtl"] .lg_inputStartPadding {
padding-right: var(--sema-space-400);
}

html:not([dir="rtl"]) .lg_inputHorizontalPadding {
html:not([dir="rtl"]) .lg_inputStartPadding {
padding-left: var(--sema-space-400);
padding-right: calc(
var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
}

html[dir="rtl"] .lg_inputEndButtonEndPadding {
padding-left: calc(var(--sema-space-300) + var(--sema-space-600));
}

html:not([dir="rtl"]) .lg_inputEndButtonEndPadding {
padding-right: calc(var(--sema-space-300) + var(--sema-space-600));
}

/* lg label */

.lg_labelTopPosition {
top: calc(
var(--sema-space-300) + var(--sema-space-100) - var(--sema-space-25)
);
}

html[dir="rtl"] .lg_label {
html[dir="rtl"] .lg_labelPosition {
left: calc(
var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
);
right: var(--sema-space-400);
right: calc(var(--sema-space-400) + var(--sema-space-25));
}

html:not([dir="rtl"]) .lg_label {
left: var(--sema-space-400);
html:not([dir="rtl"]) .lg_labelPosition {
left: calc(var(--sema-space-400) + var(--sema-space-25));
right: calc(
var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
);
}

.lg_calendarButtonContainer {
align-items: center;
bottom: var(--sema-space-0);
display: flex;
height: 100%;
position: absolute;
top: var(--sema-space-0);
}
/* lg icon end */

html:not([dir="rtl"]) .lg_calendarButtonContainer {
right: calc(var(--sema-space-300) + var(--sema-space-100));
html:not([dir="rtl"]) .lg_endIconContainer {
right: var(--sema-space-300);
}

html[dir="rtl"] .lg_calendarButtonContainer {
left: calc(var(--sema-space-300) + var(--sema-space-100));
html[dir="rtl"] .lg_endIconContainer {
left: var(--sema-space-300);
}
36 changes: 21 additions & 15 deletions packages/gestalt-datepicker/src/DatePicker/VRDateInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ const InternalTextFieldWithForwardRef = forwardRef<HTMLInputElement, Props>(func
};
}, [label, checkEllipsisActive]);

const isMd = size === 'md';
const isLg = size === 'lg';
const isMD = size === 'md';
const isLG = size === 'lg';

return (
<div>
Expand All @@ -119,9 +119,11 @@ const InternalTextFieldWithForwardRef = forwardRef<HTMLInputElement, Props>(func
className={classnames(styles.label, {
[styles.visuallyHidden]: !isLabelVisible,
// md
[styles.md_label]: isMd,
[styles.md_labelTopPosition]: isMD,
[styles.md_labelPosition]: isMD,
// lg
[styles.lg_label]: isLg,
[styles.lg_labelTopPosition]: isLG,
[styles.lg_labelPosition]: isLG,
})}
htmlFor={id}
>
Expand Down Expand Up @@ -151,15 +153,19 @@ const InternalTextFieldWithForwardRef = forwardRef<HTMLInputElement, Props>(func
[styles.disabledText]: disabled,
[styles.disabledBorder]: disabled,
// md
[styles.md_input]: isMd,
[styles.md_inputHorizontalPadding]: isMd,
[styles.md_inputLabelPadding]: isMd && label && isLabelVisible,
[styles.md_inputNoLabelPadding]: isMd && (!label || (label && !isLabelVisible)),
[styles.md_input]: isMD,
[styles.md_inputPadding]: isMD,
[styles.md_inputStartPadding]: isMD,
[styles.md_inputEndButtonEndPadding]: isMD,
[styles.md_inputLabelPadding]: isMD && label && isLabelVisible,
[styles.md_inputNoLabelPadding]: isMD && (!label || (label && !isLabelVisible)),
// lg
[styles.lg_input]: isLg,
[styles.lg_inputHorizontalPadding]: isLg,
[styles.lg_inputLabelPadding]: isLg && label && isLabelVisible,
[styles.lg_inputNoLabelPadding]: isLg && (!label || (label && !isLabelVisible)),
[styles.lg_input]: isLG,
[styles.lg_inputPadding]: isLG,
[styles.lg_inputStartPadding]: isLG,
[styles.lg_inputEndButtonEndPadding]: isLG,
[styles.lg_inputLabelPadding]: isLG && label && isLabelVisible,
[styles.lg_inputNoLabelPadding]: isLG && (!label || (label && !isLabelVisible)),
})}
data-test-id={dataTestId}
disabled={disabled}
Expand Down Expand Up @@ -187,9 +193,9 @@ const InternalTextFieldWithForwardRef = forwardRef<HTMLInputElement, Props>(func
{!disabled && (
<div
aria-hidden
className={classnames(styles.calendarButtonContainer, {
[styles.md_calendarButtonContainer]: isMd,
[styles.lg_calendarButtonContainer]: isLg,
className={classnames(styles.endIconContainer, {
[styles.md_endIconContainer]: isMD,
[styles.lg_endIconContainer]: isLG,
})}
>
<TapArea
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt-datepicker/src/subcomponents/HelperText.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ html:not([dir="rtl"]) .md_startPadding {
}

.vr_md_topPadding {
padding-top: var(--sema-space-100);
padding-top: var(--sema-space-200);
}

html[dir="rtl"] .vr_md_startPadding {
Expand Down
Loading

0 comments on commit c0124f4

Please sign in to comment.