Skip to content

Commit

Permalink
fix(ui): spacing between units and input updated (#630)
Browse files Browse the repository at this point in the history 
* draft

* feat(tokens): adds Forms.NumberInput.Input.TextContainer.ItemSpacing.[scale]

* feat(tokens): adds prefixSuffix colors

* fix(ui-library): fixing number input test by including missing size prop

* fix(ui-library): removing 'sm' parameter from text input to fix failing unit test

* fix(ui-library): making number input size property optional

* fix(ui-library): removing layout prop from radio input group story

---------

Co-authored-by: larserbach <[email protected]>
Co-authored-by: David Kennedy <[email protected]>
  • Loading branch information
@RubirajAccenture @larserbach @davidken91
3 people authored Nov 27, 2023
1 parent ec894f2 commit 7f340ae
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 7 deletions.
2 changes: 2 additions & 0 deletions packages/figma-design-tokens/config/style-dictionary.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const semanticTypes = [
'Neutral',
'Warning',
'Error',
'PrefixSuffix',
];

const componentTypes = [
Expand All @@ -81,6 +82,7 @@ const componentTypes = [
'ButtonGroup',
'Tooltip',
'RadioGroup',
'NumberInput',
];

StyleDictionaryPackage.registerFormat({
Expand Down
114 changes: 114 additions & 0 deletions packages/figma-design-tokens/input/tokens/color/SEM.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1171,6 +1171,120 @@
"value": "{q.content.ondefault.error}",
"type": "color"
}
},
"PrefixSuffix": {
"OnPopulatedField": {
"Default": {
"Rest": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Hover": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Pressed": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Focus": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Disabled": {
"value": "{q.content.ondisabled.alpha}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"ReadOnly": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
}
},
"Error": {
"Rest": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Hover": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Pressed": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Focus": {
"value": "{q.content.ondefault.beta}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
}
}
},
"OnEmptyField": {
"Default": {
"Rest": {
"value": "{q.content.ondefault.gamma.rest}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Hover": {
"value": "{q.content.ondefault.gamma.rest}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Pressed": {
"value": "{q.content.ondefault.gamma.rest}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Focus": {
"value": "{q.content.ondefault.gamma.rest}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Disabled": {
"value": "{q.content.ondisabled.alpha}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"ReadOnly": {
"value": "{q.content.onreadonly.gamma}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
}
},
"Error": {
"Rest": {
"value": "{q.content.onerror.gamma}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Hover": {
"value": "{q.content.onerror.gamma}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Pressed": {
"value": "{q.content.onerror.gamma}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
},
"Focus": {
"value": "{q.content.onerror.gamma}",
"type": "color",
"description": "Apply on prefix- or suffix-texts of an input which is already populated with content. e.g: Numberfield"
}
}
}
}
},
"Global": {
Expand Down
22 changes: 22 additions & 0 deletions packages/figma-design-tokens/input/tokens/dimensions/CMP.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2242,6 +2242,28 @@
"type": "typography"
}
}
},
"NumberInput": {
"Input": {
"TextContainer": {
"ItemSpacing": {
"SM": {
"value": "{core.dimensionPX.4}",
"type": "spacing"
},
"MD": {
"value": "{core.dimensionPX.4}",
"type": "spacing",
"description": "Defines spacing between Prefix, UserInputText and Suffix"
},
"LG": {
"value": "{core.dimensionPX.4}",
"type": "spacing",
"description": "Defines spacing between Prefix, UserInputText and Suffix"
}
}
}
}
}
},
"UI": {
Expand Down
51 changes: 45 additions & 6 deletions packages/ui-library/src/components/forms/number-input/index.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";

import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
const { NumberInput } = componentTokens.Forms;

export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG } = semanticTokens.Forms;
const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG, PrefixSuffix } = semanticTokens.Forms;
const { StepperCombo } = componentTokens.Action;

return typeSafeNestedCss`
Expand All @@ -16,18 +19,23 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
color: inherit;
}
.unit{
color:${PrefixSuffix.OnPopulatedField.Default.Rest};
}
> * {
background-color: transparent;
}
&.mode1 {
display: grid;
grid-template-columns: 10% 40% 40% 10%;
&.sm {
> .custom-stepper-button {
width: ${StepperCombo.SM.Vertical.Width};
}
}
&.md {
Expand All @@ -47,11 +55,20 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
> input {
text-align: right;
&.sm{
padding-right:${NumberInput.Input.TextContainer.ItemSpacing.SM};
}
&.md{
padding-right:${NumberInput.Input.TextContainer.ItemSpacing.MD};
}
&.lg{
padding-right:${NumberInput.Input.TextContainer.ItemSpacing.LG};
}
}
}
> .unit,
input {
&.sm {
Expand All @@ -60,6 +77,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
font-family: ${SM.UserInput.fontFamily}, sans-serif;
line-height: ${SM.UserInput.lineHeight};
padding: ${SM.InputField.Padding};
}
&.md {
Expand All @@ -77,6 +95,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
line-height: ${LG.UserInput.lineHeight};
padding: ${LG.InputField.Padding};
}
}
&.disabled {
Expand Down Expand Up @@ -138,7 +157,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
&:focus-within {
outline: ${Input.Error.Focus.width} ${Input.Error.Focus.style} ${Input.Error.Focus.color};
color: ${Input.Error.Focus.color};
color: ${UserInput.Error.Focused};
background-color: ${SurfaceFill.Error.Focus};
&::placeholder {
Expand Down Expand Up @@ -194,6 +213,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding};
}
}
}
&.mode3 {
Expand Down Expand Up @@ -290,11 +310,13 @@ export const baseStyle = typeSafeNestedCss`
.unit {
order: 0;
padding-left:0;
}
.unit.prepend {
order: -1;
text-align: right;
padding-right:0;
}
> input.prepend {
Expand All @@ -304,12 +326,29 @@ export const baseStyle = typeSafeNestedCss`
> button:last-of-type {
margin-left:auto;
}
> input{
padding-right:0;
}
}
&.mode2,
&.mode3 {
.unit.prepend {
order: -1;
padding-right:0;
}
> input.prepend{
&.sm{
padding-left:${NumberInput.Input.TextContainer.ItemSpacing.SM};
}
&.md{
padding-left:${NumberInput.Input.TextContainer.ItemSpacing.MD};
}
&.lg{
padding-left:${NumberInput.Input.TextContainer.ItemSpacing.LG};
}
}
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/ui-library/src/components/forms/radio/radio-input-group/index.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default {
control: { type: 'select' },
},
options: { control: 'array' },
layout: { control: 'select', options: [undefined, 'horizontal', 'vertical'] },
hintIcon: {
if: { arg: 'showHint', eq: true },
options: [undefined, ...getIconName(IconKeys)],
Expand Down

0 comments on commit 7f340ae

Please sign in to comment.