Skip to content

Commit

Permalink
feat(plasma-new-hope): update Hint size for TextField-like components
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Jan 16, 2025
1 parent 54f7f51 commit e7ea994
Show file tree
Hide file tree
Showing 44 changed files with 1,643 additions and 115 deletions.
36 changes: 36 additions & 0 deletions packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export const tokens = {

textFieldLeftContentMargin: '--plasma-autocomplete-textfield-left-content-margin',
textFieldRightContentMargin: '--plasma-autocomplete-textfield-right-content-margin',
textFieldRightContentWithHintMargin: '--plasma-autocomplete-textfield-right-content-with-hint-margin',

textFieldContentRightWrapperGap: '--plasma-autocomplete-textfield-content-right-wrapper-gap',
textFieldContentRightWrapperMargin: '--plasma-autocomplete-textfield-content-right-wrapper-margin',

textFieldFontFamily: '--plasma-autocomplete-textfield-font-family',
textFieldFontStyle: '--plasma-autocomplete-textfield-font-style',
Expand Down Expand Up @@ -96,6 +100,38 @@ export const tokens = {

textFieldDisabledOpacity: '--plasma-autocomplete-textfield-disabled-opacity',

/** Токены для tooltip */
textFieldHintMargin: '--plasma-autocomplete-textfield__hint-margin',
textFieldHintTargetSize: '--plasma-autocomplete-textfield__hint-target-size',
textFieldHintIconColor: '--plasma-autocomplete-textfield__hint-icon-color',
textFieldHintInnerLabelPlacementOffset: '--plasma-autocomplete-textfield__hint-inner-label-placement-offset',
textFieldClearHintInnerLabelPlacementOffset:
'--plasma-autocomplete-textfield__clear-hint-inner-label-placement-offset',

textFieldTooltipBackgroundColor: '--plasma-autocomplete-textfield__tooltip-background-color',
textFieldTooltipBoxShadow: '--plasma-autocomplete-textfield__tooltip-box-shadow',
textFieldTooltipColor: '--plasma-autocomplete-textfield__tooltip-color',

textFieldTooltipPaddingTop: '--plasma-autocomplete-textfield__tooltip-padding-top',
textFieldTooltipPaddingRight: '--plasma-autocomplete-textfield__tooltip-padding-right',
textFieldTooltipPaddingBottom: '--plasma-autocomplete-textfield__tooltip-padding-bottom',
textFieldTooltipPaddingLeft: '--plasma-autocomplete-textfield__tooltip-padding-left',
textFieldTooltipMinHeight: '--plasma-autocomplete-textfield__tooltip-min-height',
textFieldTooltipBorderRadius: '--plasma-autocomplete-textfield__tooltip-border-radius',
textFieldTooltipTextFontFamily: '--plasma-autocomplete-textfield__tooltip-text-font-family',
textFieldTooltipTextFontSize: '--plasma-autocomplete-textfield__tooltip-text-font-size',
textFieldTooltipTextFontStyle: '--plasma-autocomplete-textfield__tooltip-text-font-style',
textFieldTooltipTextFontWeight: '--plasma-autocomplete-textfield__tooltip-text-font-weight',
textFieldTooltipTextFontLetterSpacing: '--plasma-autocomplete-textfield__tooltip-text-font-letter-spacing',
textFieldTooltipTextFontLineHeight: '--plasma-autocomplete-textfield__tooltip-text-font-line-height',
textFieldTooltipContentLeftMargin: '--plasma-autocomplete-textfield__tooltip-content-left-margin',
textFieldTooltipArrowMaskWidth: '--plasma-autocomplete-textfield__tooltip-arrow-mask-width',
textFieldTooltipArrowMaskHeight: '--plasma-autocomplete-textfield__tooltip-arrow-mask-height',
textFieldTooltipArrowMaskImage: '--plasma-autocomplete-textfield__tooltip-arrow-mask-image',
textFieldTooltipArrowHeight: '--plasma-autocomplete-textfield__tooltip-arrow-height',
textFieldTooltipArrowEdgeMargin: '--plasma-autocomplete-textfield__tooltip-arrow-edge-margin',
textFieldTooltipArrowBackground: '--plasma-autocomplete-textfield__tooltip-arrow-background',

textFieldFocusColor: '--plasma-autocomplete-textfield-focus-color',

textFieldIndicatorColor: '--plasma-autocomplete-textfield-indicator-color',
Expand Down
10 changes: 9 additions & 1 deletion packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,15 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
}, [defaultValue]);

return (
<Root view={view} size={size} labelPlacement={labelPlacement} disabled={disabled} readOnly={readOnly}>
<Root
view={view}
size={size}
labelPlacement={labelPlacement}
disabled={disabled}
readOnly={readOnly}
hintView={rest.hintView}
hintSize={rest.hintSize}
>
<StyledPopover
opened={isOpen}
offset={[0, 0]}
Expand Down
32 changes: 32 additions & 0 deletions packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,36 @@ export const StyledTextField = styled(TextField)`
${textFieldTokens.clearIndicatorLabelPlacementInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorLabelPlacementInnerRight});
${textFieldTokens.clearIndicatorHintInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorHintInnerRight});
${textFieldTokens.boxShadow}: var(${autocompleteTokens.textFieldBoxShadow});
${textFieldTokens.rightContentWithHintMargin}: var(${autocompleteTokens.textFieldRightContentWithHintMargin});
${textFieldTokens.contentRightWrapperGap}: var(${autocompleteTokens.textFieldContentRightWrapperGap});
${textFieldTokens.contentRightWrapperMargin}: var(${autocompleteTokens.textFieldContentRightWrapperMargin});
${textFieldTokens.hintMargin}: var(${autocompleteTokens.textFieldHintMargin});
${textFieldTokens.hintTargetSize}: var(${autocompleteTokens.textFieldHintTargetSize});
${textFieldTokens.hintIconColor}: var(${autocompleteTokens.textFieldHintIconColor});
${textFieldTokens.hintInnerLabelPlacementOffset}: var(${autocompleteTokens.textFieldHintInnerLabelPlacementOffset});
${textFieldTokens.clearHintInnerLabelPlacementOffset}: var(${autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset});
${textFieldTokens.tooltipBackgroundColor}: var(${autocompleteTokens.textFieldTooltipBackgroundColor});
${textFieldTokens.tooltipBoxShadow}: var(${autocompleteTokens.textFieldTooltipBoxShadow});
${textFieldTokens.tooltipColor}: var(${autocompleteTokens.textFieldTooltipColor});
${textFieldTokens.tooltipPaddingTop}: var(${autocompleteTokens.textFieldTooltipPaddingTop});
${textFieldTokens.tooltipPaddingRight}: var(${autocompleteTokens.textFieldTooltipPaddingRight});
${textFieldTokens.tooltipPaddingBottom}: var(${autocompleteTokens.textFieldTooltipPaddingBottom});
${textFieldTokens.tooltipPaddingLeft}: var(${autocompleteTokens.textFieldTooltipPaddingLeft});
${textFieldTokens.tooltipMinHeight}: var(${autocompleteTokens.textFieldTooltipMinHeight});
${textFieldTokens.tooltipBorderRadius}: var(${autocompleteTokens.textFieldTooltipBorderRadius});
${textFieldTokens.tooltipTextFontFamily}: var(${autocompleteTokens.textFieldTooltipTextFontFamily});
${textFieldTokens.tooltipTextFontSize}: var(${autocompleteTokens.textFieldTooltipTextFontSize});
${textFieldTokens.tooltipTextFontStyle}: var(${autocompleteTokens.textFieldTooltipTextFontStyle});
${textFieldTokens.tooltipTextFontWeight}: var(${autocompleteTokens.textFieldTooltipTextFontWeight});
${textFieldTokens.tooltipTextFontLetterSpacing}: var(${autocompleteTokens.textFieldTooltipTextFontLetterSpacing});
${textFieldTokens.tooltipTextFontLineHeight}: var(${autocompleteTokens.textFieldTooltipTextFontLineHeight});
${textFieldTokens.tooltipContentLeftMargin}: var(${autocompleteTokens.textFieldTooltipContentLeftMargin});
${textFieldTokens.tooltipArrowMaskWidth}: var(${autocompleteTokens.textFieldTooltipArrowMaskWidth});
${textFieldTokens.tooltipArrowMaskHeight}: var(${autocompleteTokens.textFieldTooltipArrowMaskHeight});
${textFieldTokens.tooltipArrowMaskImage}: var(${autocompleteTokens.textFieldTooltipArrowMaskImage});
${textFieldTokens.tooltipArrowHeight}: var(${autocompleteTokens.textFieldTooltipArrowHeight});
${textFieldTokens.tooltipArrowEdgeMargin}: var(${autocompleteTokens.textFieldTooltipArrowEdgeMargin});
${textFieldTokens.tooltipArrowBackground}: var(${autocompleteTokens.textFieldTooltipArrowBackground});
`;
35 changes: 35 additions & 0 deletions packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@ export const tokens = {

textFieldLeftContentMargin: '--plasma-combobox-new-textfield-left-content-margin',
textFieldRightContentMargin: '--plasma-combobox-new-textfield-right-content-margin',
textFieldRightContentWithHintMargin: '--plasma-combobox-textfield-right-content-with-hint-margin',

textFieldContentRightWrapperGap: '--plasma-combobox-textfield-content-right-wrapper-gap',
textFieldContentRightWrapperMargin: '--plasma-combobox-textfield-content-right-wrapper-margin',

textFieldFontFamily: '--plasma-combobox-new-textfield-font-family',
textFieldFontStyle: '--plasma-combobox-new-textfield-font-style',
Expand Down Expand Up @@ -160,6 +164,37 @@ export const tokens = {

textFieldDisabledOpacity: '--plasma-combobox-new-textfield-disabled-opacity',

/** Токены для tooltip */
textFieldHintMargin: '--plasma-combobox-textfield__hint-margin',
textFieldHintTargetSize: '--plasma-combobox-textfield__hint-target-size',
textFieldHintIconColor: '--plasma-combobox-textfield__hint-icon-color',
textFieldHintInnerLabelPlacementOffset: '--plasma-combobox-textfield__hint-inner-label-placement-offset',
textFieldClearHintInnerLabelPlacementOffset: '--plasma-combobox-textfield__clear-hint-inner-label-placement-offset',

textFieldTooltipBackgroundColor: '--plasma-combobox-textfield__tooltip-background-color',
textFieldTooltipBoxShadow: '--plasma-combobox-textfield__tooltip-box-shadow',
textFieldTooltipColor: '--plasma-combobox-textfield__tooltip-color',

textFieldTooltipPaddingTop: '--plasma-combobox-textfield__tooltip-padding-top',
textFieldTooltipPaddingRight: '--plasma-combobox-textfield__tooltip-padding-right',
textFieldTooltipPaddingBottom: '--plasma-combobox-textfield__tooltip-padding-bottom',
textFieldTooltipPaddingLeft: '--plasma-combobox-textfield__tooltip-padding-left',
textFieldTooltipMinHeight: '--plasma-combobox-textfield__tooltip-min-height',
textFieldTooltipBorderRadius: '--plasma-combobox-textfield__tooltip-border-radius',
textFieldTooltipTextFontFamily: '--plasma-combobox-textfield__tooltip-text-font-family',
textFieldTooltipTextFontSize: '--plasma-combobox-textfield__tooltip-text-font-size',
textFieldTooltipTextFontStyle: '--plasma-combobox-textfield__tooltip-text-font-style',
textFieldTooltipTextFontWeight: '--plasma-combobox-textfield__tooltip-text-font-weight',
textFieldTooltipTextFontLetterSpacing: '--plasma-combobox-textfield__tooltip-text-font-letter-spacing',
textFieldTooltipTextFontLineHeight: '--plasma-combobox-textfield__tooltip-text-font-line-height',
textFieldTooltipContentLeftMargin: '--plasma-combobox-textfield__tooltip-content-left-margin',
textFieldTooltipArrowMaskWidth: '--plasma-combobox-textfield__tooltip-arrow-mask-width',
textFieldTooltipArrowMaskHeight: '--plasma-combobox-textfield__tooltip-arrow-mask-height',
textFieldTooltipArrowMaskImage: '--plasma-combobox-textfield__tooltip-arrow-mask-image',
textFieldTooltipArrowHeight: '--plasma-combobox-textfield__tooltip-arrow-height',
textFieldTooltipArrowEdgeMargin: '--plasma-combobox-textfield__tooltip-arrow-edge-margin',
textFieldTooltipArrowBackground: '--plasma-combobox-textfield__tooltip-arrow-background',

textFieldChipHeight: '--plasma-combobox-new-textfield-chip-height',
textFieldChipBorderRadius: '--plasma-combobox-new-textfield-chip-border-radius',
textFieldChipGap: '--plasma-combobox-new-textfield-chip-gap',
Expand Down
2 changes: 2 additions & 0 deletions packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,8 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
disabled={disabled}
readOnly={readOnly}
name={name}
hintView={rest.hintView}
hintSize={rest.hintSize}
>
{name && (
<SelectNative
Expand Down
3 changes: 2 additions & 1 deletion packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { CSSProperties, ButtonHTMLAttributes, ChangeEventHandler } from 'react';
import React from 'react';

import { RequiredProps, LabelProps } from '../../TextField/TextField.types';
import { RequiredProps, HintProps, LabelProps } from '../../TextField/TextField.types';
import { DropdownProps } from '../../Dropdown/Dropdown.types';

import { FocusedPathState } from './reducers';
Expand Down Expand Up @@ -223,6 +223,7 @@ export type ComboboxProps<T extends ItemOption = ItemOption> = BasicProps<T> &
ViewStateProps &
IsMultiselect<T> &
RequiredProps &
HintProps &
Omit<ButtonHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'name' | 'defaultValue'>;

export type FloatingPopoverProps = {
Expand Down
32 changes: 32 additions & 0 deletions packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export const StyledTextField = styled(TextField)`
${textFieldTokens.leftContentMargin}: var(${comboboxTokens.textFieldLeftContentMargin});
${textFieldTokens.rightContentMargin}: var(${comboboxTokens.textFieldRightContentMargin});
${textFieldTokens.rightContentWithHintMargin}: var(${comboboxTokens.textFieldRightContentWithHintMargin});
${textFieldTokens.contentRightWrapperGap}: var(${comboboxTokens.textFieldContentRightWrapperGap});
${textFieldTokens.contentRightWrapperMargin}: var(${comboboxTokens.textFieldContentRightWrapperMargin});
${textFieldTokens.fontFamily}: var(${comboboxTokens.textFieldFontFamily});
${textFieldTokens.fontStyle}: var(${comboboxTokens.textFieldFontStyle});
Expand Down Expand Up @@ -106,6 +110,34 @@ export const StyledTextField = styled(TextField)`
${textFieldTokens.textAfterMargin}: var(${comboboxTokens.textFieldTextAfterMargin});
${textFieldTokens.disabledOpacity}: var(${comboboxTokens.textFieldDisabledOpacity});
${textFieldTokens.hintMargin}: var(${comboboxTokens.textFieldHintMargin});
${textFieldTokens.hintTargetSize}: var(${comboboxTokens.textFieldHintTargetSize});
${textFieldTokens.hintIconColor}: var(${comboboxTokens.textFieldHintIconColor});
${textFieldTokens.hintInnerLabelPlacementOffset}: var(${comboboxTokens.textFieldHintInnerLabelPlacementOffset});
${textFieldTokens.clearHintInnerLabelPlacementOffset}: var(${comboboxTokens.textFieldClearHintInnerLabelPlacementOffset});
${textFieldTokens.tooltipBackgroundColor}: var(${comboboxTokens.textFieldTooltipBackgroundColor});
${textFieldTokens.tooltipBoxShadow}: var(${comboboxTokens.textFieldTooltipBoxShadow});
${textFieldTokens.tooltipColor}: var(${comboboxTokens.textFieldTooltipColor});
${textFieldTokens.tooltipPaddingTop}: var(${comboboxTokens.textFieldTooltipPaddingTop});
${textFieldTokens.tooltipPaddingRight}: var(${comboboxTokens.textFieldTooltipPaddingRight});
${textFieldTokens.tooltipPaddingBottom}: var(${comboboxTokens.textFieldTooltipPaddingBottom});
${textFieldTokens.tooltipPaddingLeft}: var(${comboboxTokens.textFieldTooltipPaddingLeft});
${textFieldTokens.tooltipMinHeight}: var(${comboboxTokens.textFieldTooltipMinHeight});
${textFieldTokens.tooltipBorderRadius}: var(${comboboxTokens.textFieldTooltipBorderRadius});
${textFieldTokens.tooltipTextFontFamily}: var(${comboboxTokens.textFieldTooltipTextFontFamily});
${textFieldTokens.tooltipTextFontSize}: var(${comboboxTokens.textFieldTooltipTextFontSize});
${textFieldTokens.tooltipTextFontStyle}: var(${comboboxTokens.textFieldTooltipTextFontStyle});
${textFieldTokens.tooltipTextFontWeight}: var(${comboboxTokens.textFieldTooltipTextFontWeight});
${textFieldTokens.tooltipTextFontLetterSpacing}: var(${comboboxTokens.textFieldTooltipTextFontLetterSpacing});
${textFieldTokens.tooltipTextFontLineHeight}: var(${comboboxTokens.textFieldTooltipTextFontLineHeight});
${textFieldTokens.tooltipContentLeftMargin}: var(${comboboxTokens.textFieldTooltipContentLeftMargin});
${textFieldTokens.tooltipArrowMaskWidth}: var(${comboboxTokens.textFieldTooltipArrowMaskWidth});
${textFieldTokens.tooltipArrowMaskHeight}: var(${comboboxTokens.textFieldTooltipArrowMaskHeight});
${textFieldTokens.tooltipArrowMaskImage}: var(${comboboxTokens.textFieldTooltipArrowMaskImage});
${textFieldTokens.tooltipArrowHeight}: var(${comboboxTokens.textFieldTooltipArrowHeight});
${textFieldTokens.tooltipArrowEdgeMargin}: var(${comboboxTokens.textFieldTooltipArrowEdgeMargin});
${textFieldTokens.tooltipArrowBackground}: var(${comboboxTokens.textFieldTooltipArrowBackground});
${textFieldTokens.chipHeight}: var(${comboboxTokens.textFieldChipHeight});
${textFieldTokens.chipBorderRadius}: var(${comboboxTokens.textFieldChipBorderRadius});
Expand Down
35 changes: 35 additions & 0 deletions packages/plasma-new-hope/src/components/Select/Select.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@ export const tokens = {

textFieldLeftContentMargin: '--plasma-select-textfield-left-content-margin',
textFieldRightContentMargin: '--plasma-select-textfield-right-content-margin',
textFieldRightContentWithHintMargin: '--plasma-select-textfield-right-content-with-hint-margin',

textFieldContentRightWrapperGap: '--plasma-select-textfield-content-right-wrapper-gap',
textFieldContentRightWrapperMargin: '--plasma-select-textfield-content-right-wrapper-margin',

textFieldFontFamily: '--plasma-select-textfield-font-family',
textFieldFontStyle: '--plasma-select-textfield-font-style',
Expand Down Expand Up @@ -158,6 +162,37 @@ export const tokens = {

textFieldDisabledOpacity: '--plasma-select-textfield-disabled-opacity',

/** Токены для tooltip */
textFieldHintMargin: '--plasma-select-textfield__hint-margin',
textFieldHintTargetSize: '--plasma-select-textfield__hint-target-size',
textFieldHintIconColor: '--plasma-select-textfield__hint-icon-color',
textFieldHintInnerLabelPlacementOffset: '--plasma-select-textfield__hint-inner-label-placement-offset',
textFieldClearHintInnerLabelPlacementOffset: '--plasma-select-textfield__clear-hint-inner-label-placement-offset',

textFieldTooltipBackgroundColor: '--plasma-select-textfield__tooltip-background-color',
textFieldTooltipBoxShadow: '--plasma-select-textfield__tooltip-box-shadow',
textFieldTooltipColor: '--plasma-select-textfield__tooltip-color',

textFieldTooltipPaddingTop: '--plasma-select-textfield__tooltip-padding-top',
textFieldTooltipPaddingRight: '--plasma-select-textfield__tooltip-padding-right',
textFieldTooltipPaddingBottom: '--plasma-select-textfield__tooltip-padding-bottom',
textFieldTooltipPaddingLeft: '--plasma-select-textfield__tooltip-padding-left',
textFieldTooltipMinHeight: '--plasma-select-textfield__tooltip-min-height',
textFieldTooltipBorderRadius: '--plasma-select-textfield__tooltip-border-radius',
textFieldTooltipTextFontFamily: '--plasma-select-textfield__tooltip-text-font-family',
textFieldTooltipTextFontSize: '--plasma-select-textfield__tooltip-text-font-size',
textFieldTooltipTextFontStyle: '--plasma-select-textfield__tooltip-text-font-style',
textFieldTooltipTextFontWeight: '--plasma-select-textfield__tooltip-text-font-weight',
textFieldTooltipTextFontLetterSpacing: '--plasma-select-textfield__tooltip-text-font-letter-spacing',
textFieldTooltipTextFontLineHeight: '--plasma-select-textfield__tooltip-text-font-line-height',
textFieldTooltipContentLeftMargin: '--plasma-select-textfield__tooltip-content-left-margin',
textFieldTooltipArrowMaskWidth: '--plasma-select-textfield__tooltip-arrow-mask-width',
textFieldTooltipArrowMaskHeight: '--plasma-select-textfield__tooltip-arrow-mask-height',
textFieldTooltipArrowMaskImage: '--plasma-select-textfield__tooltip-arrow-mask-image',
textFieldTooltipArrowHeight: '--plasma-select-textfield__tooltip-arrow-height',
textFieldTooltipArrowEdgeMargin: '--plasma-select-textfield__tooltip-arrow-edge-margin',
textFieldTooltipArrowBackground: '--plasma-select-textfield__tooltip-arrow-background',

textFieldChipHeight: '--plasma-select-textfield-chip-height',
textFieldChipBorderRadius: '--plasma-select-textfield-chip-border-radius',
textFieldChipGap: '--plasma-select-textfield-chip-gap',
Expand Down
Loading

0 comments on commit e7ea994

Please sign in to comment.