From faa878ae1c0a9a3ab3b5db43165b9de21150bfc4 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Wed, 10 Jan 2024 17:30:45 +0100 Subject: [PATCH 1/6] feature/492-storybook-counter (#702) * feat(storybook): added Counter Stories --------- Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com> Co-authored-by: David Kennedy --- .../counter/index.stories.ts | 121 ++++++++++++++++-- 1 file changed, 111 insertions(+), 10 deletions(-) diff --git a/packages/ui-library/src/components/internal-components/counter/index.stories.ts b/packages/ui-library/src/components/internal-components/counter/index.stories.ts index f779796f1..e03be00f6 100644 --- a/packages/ui-library/src/components/internal-components/counter/index.stories.ts +++ b/packages/ui-library/src/components/internal-components/counter/index.stories.ts @@ -1,23 +1,67 @@ /* eslint-disable no-console */ import { Themes } from '../../../foundation/_tokens-generated/index.themes'; import { CounterVariants, FormSizes } from '../../../globals/constants'; +import { html } from 'lit-html'; import { BlrCounterType } from './index'; import { BlrCounterRenderFunction } from './renderFunction'; +// Shared Style inside the Stories +const sharedStyles = html` + +`; + export default { title: 'Design System/Web Components/Internal Components/Counter', argTypes: { + theme: { + options: Themes, + control: { type: 'select' }, + table: { + category: 'Appearance', + }, + }, variant: { + description: 'Choose variant of the component.', options: CounterVariants, - control: { type: 'select' }, + control: { type: 'radio' }, + table: { + category: 'Appearance', + }, }, size: { + name: 'sizeVariant', + description: 'Choose size of the component.', options: FormSizes, - control: { type: 'select' }, + control: { type: 'radio' }, + table: { + category: 'Appearance', + }, }, - theme: { - options: Themes, - control: { type: 'select' }, + current: { + name: 'value', + description: 'Enter the value the component should hold.', + table: { + category: 'Content / Settings', + }, + }, + max: { + name: 'maxValue', + description: 'Enter the max value the component should be able to hold.', + table: { + category: 'Content / Settings', + }, + }, + arialabel: { + name: 'ariaLabel', + description: + 'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.', + table: { + disable: true, + }, }, }, parameters: { @@ -26,19 +70,76 @@ export default { url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126743&mode=dev', }, viewMode: 'docs', + layout: 'centered', + docs: { + description: { + component: ` +Counter provides a visual representation of a numeric quantity and typically includes buttons or controls that allow users to increment or decrement the value. +- [**Appearance**](#appearance) + - [**Variant**](#variant) + - [**Size Variant**](#size-variant) +`, + }, + }, }, }; export const BlrCounter = (params: BlrCounterType) => BlrCounterRenderFunction(params); - BlrCounter.storyName = 'Counter'; - -const args: BlrCounterType = { +const defaultParams: BlrCounterType = { theme: 'Light', variant: 'default', + size: 'md', current: 3, max: 100, - size: 'md', }; +BlrCounter.args = defaultParams; -BlrCounter.args = args; +/** + * ## Appearance + * + * ### Variant + * The Counter component comes in 3 variants: default, warn and error. + */ +export const Variant = () => { + return html` + ${sharedStyles} +
+
+ ${BlrCounterRenderFunction({ + ...defaultParams, + })} +
+
+ ${BlrCounterRenderFunction({ + ...defaultParams, + variant: 'warn', + })} +
+
+ ${BlrCounterRenderFunction({ + ...defaultParams, + variant: 'error', + })} +
+
+ `; +}; +Variant.story = { name: ' ' }; +/** + * The Counter component comes in 3 sizes: SM, MD and LG. + */ +export const SizeVariant = () => { + return html` + ${sharedStyles} + ${FormSizes.map( + (size) => + html`
+ ${BlrCounterRenderFunction({ + ...defaultParams, + size: size, + })} +
` + )} + `; +}; From c51a1eaa23e45583845d91cb2852a26b8ffa2704 Mon Sep 17 00:00:00 2001 From: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:01:01 +0100 Subject: [PATCH 2/6] 545 form label rename tokens (#761) * fix(tokens): moves and renames label tokens are renamed to component name and moved into component sets * feat: adds FormLabel to style-dictionary.config * fix: apply renamed tokens to forms.css * feat(tokens) moving label colors to CMP forms.label.[state] stays in SEM but will not be applied onto component anymore * fix: replaces Forms.Label with Forms.FormLabel Also fixes LabelNextToControl colors in multiple files. * fix(tokens): move nextToConrol from SEM to CMP also renames to InlineLabel * fix: fix occurances of labelNextToControl This typotoken moved to CMP and was renamed to ..LabelInline.Typography. * moved checkbox css changes to component css file and deleted global * removed comma * readded correct tokens to checkbox * fixed radio css file --------- Co-authored-by: larserbach --- .../config/style-dictionary.config.cjs | 3 +- .../input/tokens/$themes.json | 24 --- .../input/tokens/color/CMP.json | 98 ++++++++++++ .../input/tokens/color/SEM.json | 60 ------- .../input/tokens/dimensions/CMP.json | 94 ++++++++++- .../input/tokens/dimensions/SEM.json | 66 -------- .../components/forms/checkbox/index.css.ts | 38 ++--- .../forms/toggle-switch/index.css.ts | 14 +- .../foundation/component-tokens/radio.css.ts | 76 +++++---- .../foundation/semantic-tokens/form.css.ts | 147 ++++++++++-------- 10 files changed, 338 insertions(+), 282 deletions(-) diff --git a/packages/figma-design-tokens/config/style-dictionary.config.cjs b/packages/figma-design-tokens/config/style-dictionary.config.cjs index 266978ebc..409787ba0 100644 --- a/packages/figma-design-tokens/config/style-dictionary.config.cjs +++ b/packages/figma-design-tokens/config/style-dictionary.config.cjs @@ -52,9 +52,7 @@ const semanticTypes = [ 'Input', 'InputSlot', 'InputField', - 'LabelAppendix', 'InputIcon', - 'LabelNextToControl', 'Focus', 'FocusBorder', 'Feedback', @@ -88,6 +86,7 @@ const componentTypes = [ 'RadioGroup', 'NumberInput', 'CaptionGroup', + 'FormLabel', ]; StyleDictionaryPackage.registerFormat({ diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index ff5434307..5a1a21d72 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -407,25 +407,16 @@ "UI.Paragraph.MD.Strong": "S:cdff36a527c51acde9b52e403b94643a518158ed,", "UI.Paragraph.LG.Regular": "S:57a4a02f314bb61628570a283653b72c652927f5,", "UI.Paragraph.LG.Strong": "S:91fd88531e27f6eefb2fd56287fc8a5a6bb93212,", - "Forms.SM.Label": "S:d1491d917c3fb00f2675edcf5f13f4ec57d84e4f,", - "Forms.SM.LabelAppendix": "S:5a135b52685cd8abf90367a9309fe35e3e0bb4a1,", "Forms.SM.Caption": "S:ad64671fb624f6be67b8b604eccacb865c1852f9,", "Forms.SM.UserInput": "S:af57cfdcc52793d0569223d8bf4bf8ac880e2015,", - "Forms.SM.LabelNextToControl": "S:9b981b84cd9a9bbf5336ea925f8f5643f89dae23,", "Forms.SM.Placeholder": "S:200500dd22b47a44bdbb9a063a5648645636100e,", "Forms.SM.Legend": "S:2a315291cc6b57966f2e6d771abab6b3f448bc46,", - "Forms.MD.Label": "S:d9f72d9686b0b5757ef6e1264fdf12d45058b3a2,", - "Forms.MD.LabelAppendix": "S:915778981c2f87b6745d010a702021ce5458f930,", "Forms.MD.Caption": "S:6a8b8b4db396259fe2a4d0c3db8e6ad250c3b235,", "Forms.MD.UserInput": "S:26a8789c26fbebc9c1c7307831dff2786a33f237,", - "Forms.MD.LabelNextToControl": "S:56e55ec39910955bce0158291c3e1cd00527f09f,", "Forms.MD.Placeholder": "S:3fa51f577928fe02fea3550c26690945a84b47d6,", "Forms.MD.Legend": "S:3a8f82a7837b05bb6f6393ad8bc8780df3b23340,", - "Forms.LG.Label": "S:0e79577d538ea1a8e2c7ad7a580d13597bf10980,", - "Forms.LG.LabelAppendix": "S:484b96fd639f11c71a3996cbb6f7e892aee6c28a,", "Forms.LG.Caption": "S:43158490c89c47463f23e620475dc1e69c04064f,", "Forms.LG.UserInput": "S:06bb3cc1a05e9bb2e0ddadb8c5469c70d8f6e197,", - "Forms.LG.LabelNextToControl": "S:64d3060405dff6b6ede6083c2a0f4b8767af2f4f,", "Forms.LG.Placeholder": "S:5bc4fa6aefa49257801349ff27a84dabbc1a93dc,", "Forms.LG.Legend": "S:c3a32433b95e0a6b72ae57496242f0fa005e160e,", "Forms.Slider.Legend.Typography": "S:7a0427887e207bf43eb875a884cc8e20b94637ff,", @@ -902,15 +893,12 @@ "Forms.SM.CaptionComponent.IconDimension": "f5cf91673f3a3e330390327210550e1a1705a426", "Forms.SM.CaptionComponent.IconWrapper.PaddingTop": "01d766852ea0e2b80da8eccc38e4e7ed770996e5", "Forms.SM.CaptionComponent.ItemSpacing": "12a6e7b57a26136306a2829cbad00623b8e27fae", - "Forms.SM.LabelComponent.ItemSpacing": "b95c4cb7273103216bb9f475b40482c69a906724", "Forms.MD.CaptionComponent.IconDimension": "4ff426a51a45e94183d5699530e25e162f1db9cb", "Forms.MD.CaptionComponent.IconWrapper.PaddingTop": "0a2bb68de09f8f79400ac71ad4fd5c45533aa556", "Forms.MD.CaptionComponent.ItemSpacing": "c316c369b75e52d1b41dca706b2c80723d97d475", - "Forms.MD.LabelComponent.ItemSpacing": "9f332681b5d6aeb5257e8b7c81927ebf838bf962", "Forms.LG.CaptionComponent.IconDimension": "0400899b2c7af67af03ea09e8012635e6f9b6c67", "Forms.LG.CaptionComponent.IconWrapper.PaddingTop": "775b16d13a004b18d9850eb2fc2bab205f69972d", "Forms.LG.CaptionComponent.ItemSpacing": "ef5c2ca2ccdbbe520a71c9afdfb2b39856393000", - "Forms.LG.LabelComponent.ItemSpacing": "f61dee5fef7e7f2a1e8801625057884241025971", "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d", "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700", "Actions.Container.BorderRadius.SM": "55b3976767f81cfcafe60433a2cfbd84990d9fca", @@ -1851,25 +1839,16 @@ "UI.Paragraph.MD.Strong": "S:6475946425bcec71339e41231fffeca957c3319b,", "UI.Paragraph.LG.Regular": "S:e9912860a15fbf017afa65603ae154f131984ca0,", "UI.Paragraph.LG.Strong": "S:9d5f065b8b3b0b0711eff216d8b4caebd17597e2,", - "Forms.SM.Label": "S:9ce37cc7fb3262673a70af4700bcea3c49369918,", - "Forms.SM.LabelAppendix": "S:144af41e74f1b62df1aae60ada7d14629dae5436,", "Forms.SM.Caption": "S:3abddbd314a38e5662c5889e7d43735ef39c4869,", "Forms.SM.UserInput": "S:df299f8567b892ddeb56aaf7802550d3841f1978,", - "Forms.SM.LabelNextToControl": "S:b978d4ea340b616342c8fdce4fb427453f4fc685,", "Forms.SM.Placeholder": "S:15b5d4d78af5a8a93d50655940c612f1ff66f11e,", "Forms.SM.Legend": "S:ba5613e8295dffa3c547f453c29ecee24073ebd3,", - "Forms.MD.Label": "S:e3f30dc9dd0350c21bb2a993a5d12851dd708d6d,", - "Forms.MD.LabelAppendix": "S:85fb5b874f3b2408db9606af618dbcc84b149c9e,", "Forms.MD.Caption": "S:aa08845e5b29546e14f0e83b6ddc7e64881adbfa,", "Forms.MD.UserInput": "S:9fa8b24db72382275c2f5f74a78c2af4617c508e,", - "Forms.MD.LabelNextToControl": "S:a4d2baabb12a97a5ad6ed4879d2573227d3770a0,", "Forms.MD.Placeholder": "S:86ea3f492ff102066dc8f9449440913cb50a3fba,", "Forms.MD.Legend": "S:fd0a59e518d4e3e420a3853033de5ed972d18e2f,", - "Forms.LG.Label": "S:f2aa1c95e54f7facb5b1799825ea7b941ab3d002,", - "Forms.LG.LabelAppendix": "S:ca5e35e2301a4a7b9eb8fdf2f1ca05413a3cc89d,", "Forms.LG.Caption": "S:114c883cdc1f8dba85eaf3c260b8b9b1f7ef8b80,", "Forms.LG.UserInput": "S:736422e401d2d9b4c3a0070ed3c673467822f16c,", - "Forms.LG.LabelNextToControl": "S:d53e8a76b99327aa364397e676c8b1dea67d6eb1,", "Forms.LG.Placeholder": "S:6e252933aba99af8ddb04a9fb3dbecd572021a0a,", "Forms.LG.Legend": "S:f3b0e14420e0b929cf7510646435d0ba22b88c1d,", "Forms.Slider.Legend.Typography": "S:f1cbfbfcdd35cd83a8188bd9a2ea6da15d981fe3,", @@ -2429,15 +2408,12 @@ "Forms.SM.CaptionComponent.IconDimension": "f5cf91673f3a3e330390327210550e1a1705a426", "Forms.SM.CaptionComponent.IconWrapper.PaddingTop": "01d766852ea0e2b80da8eccc38e4e7ed770996e5", "Forms.SM.CaptionComponent.ItemSpacing": "12a6e7b57a26136306a2829cbad00623b8e27fae", - "Forms.SM.LabelComponent.ItemSpacing": "b95c4cb7273103216bb9f475b40482c69a906724", "Forms.MD.CaptionComponent.IconDimension": "4ff426a51a45e94183d5699530e25e162f1db9cb", "Forms.MD.CaptionComponent.IconWrapper.PaddingTop": "0a2bb68de09f8f79400ac71ad4fd5c45533aa556", "Forms.MD.CaptionComponent.ItemSpacing": "c316c369b75e52d1b41dca706b2c80723d97d475", - "Forms.MD.LabelComponent.ItemSpacing": "9f332681b5d6aeb5257e8b7c81927ebf838bf962", "Forms.LG.CaptionComponent.IconDimension": "0400899b2c7af67af03ea09e8012635e6f9b6c67", "Forms.LG.CaptionComponent.IconWrapper.PaddingTop": "775b16d13a004b18d9850eb2fc2bab205f69972d", "Forms.LG.CaptionComponent.ItemSpacing": "ef5c2ca2ccdbbe520a71c9afdfb2b39856393000", - "Forms.LG.LabelComponent.ItemSpacing": "f61dee5fef7e7f2a1e8801625057884241025971", "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d", "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700", "Actions.Container.BorderRadius.SM": "55b3976767f81cfcafe60433a2cfbd84990d9fca", diff --git a/packages/figma-design-tokens/input/tokens/color/CMP.json b/packages/figma-design-tokens/input/tokens/color/CMP.json index 0d1e507a9..cc1c4781b 100644 --- a/packages/figma-design-tokens/input/tokens/color/CMP.json +++ b/packages/figma-design-tokens/input/tokens/color/CMP.json @@ -1045,6 +1045,104 @@ } } } + }, + "FormLabel": { + "Label": { + "TextColor": { + "Rest": { + "value": "{Forms.Label.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Forms.Label.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Forms.Label.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Forms.Label.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Forms.Label.Disabled}", + "type": "color" + }, + "ReadOnly": { + "value": "{Forms.Label.ReadOnly}", + "type": "color" + }, + "Error": { + "value": "{Forms.Label.Error}", + "type": "color" + } + } + }, + "LabelAppendix": { + "TextColor": { + "Rest": { + "value": "{Forms.Label.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Forms.Label.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Forms.Label.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Forms.Label.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Forms.Label.Disabled}", + "type": "color" + }, + "ReadOnly": { + "value": "{Forms.Label.ReadOnly}", + "type": "color" + }, + "Error": { + "value": "{Forms.Label.Error}", + "type": "color" + } + } + }, + "InlineLabel": { + "TextColor": { + "Rest": { + "value": "{Forms.Label.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Forms.Label.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Forms.Label.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Forms.Label.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Forms.Label.Disabled}", + "type": "color" + }, + "ReadOnly": { + "value": "{Forms.Label.ReadOnly}", + "type": "color" + }, + "Error": { + "value": "{Forms.Label.Error}", + "type": "color" + } + } + } } }, "UI": { diff --git a/packages/figma-design-tokens/input/tokens/color/SEM.json b/packages/figma-design-tokens/input/tokens/color/SEM.json index cbfa1a518..213df7eb6 100644 --- a/packages/figma-design-tokens/input/tokens/color/SEM.json +++ b/packages/figma-design-tokens/input/tokens/color/SEM.json @@ -874,36 +874,6 @@ "type": "color" } }, - "LabelAppendix": { - "Rest": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Hover": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Pressed": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Focus": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Disabled": { - "value": "{q.content.ondisabled.alpha}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.content.ondefault.error}", - "type": "color" - } - }, "Caption": { "Error": { "value": "{q.content.ondefault.error}", @@ -1124,36 +1094,6 @@ "type": "color" } }, - "LabelNextToControl": { - "Rest": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Hover": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Pressed": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Focus": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Disabled": { - "value": "{q.content.ondisabled.alpha}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.content.ondefault.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.content.ondefault.error}", - "type": "color" - } - }, "Legend": { "Default": { "value": "{q.content.ondefault.alpha}", diff --git a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json index c7019d2b3..a3d947455 100644 --- a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json +++ b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json @@ -1062,17 +1062,17 @@ "SM": { "value": "{core.dimensionPX.0}", "type": "spacing", - "description": "Controls the vertical spacing between LabelNextToControl and the Caption." + "description": "Controls the vertical spacing between InlineLabel and the Caption." }, "MD": { "value": "{core.dimensionPX.0}", "type": "spacing", - "description": "Controls the vertical spacing between LabelNextToControl and the Caption." + "description": "Controls the vertical spacing between InlineLabel and the Caption." }, "LG": { "value": "{core.dimensionPX.0}", "type": "spacing", - "description": "Controls the vertical spacing between LabelNextToControl and the Caption." + "description": "Controls the vertical spacing between InlineLabel and the Caption." } }, "PaddingTop": { @@ -2250,7 +2250,7 @@ "SM": { "value": "{core.dimensionPX.0}", "type": "spacing", - "description": "Controls the vertical spacing between LabelNextToControl and the Caption.\nApplied on: TextContainer" + "description": "Controls the vertical spacing between InlineLabel and the Caption.\nApplied on: TextContainer" }, "MD": { "value": "{core.dimensionPX.0}", @@ -2272,7 +2272,7 @@ "MD": { "value": "{core.dimensionREM.0}", "type": "spacing", - "description": "Can be used to verticaly align the Content of the TextContainer against the Control" + "description": "Controls the vertical spacing between InlineLabel and the Caption.\nApplied on: TextContainer" }, "LG": { "value": "{core.dimensionREM.0}", @@ -2303,7 +2303,7 @@ "SM": { "value": "{Forms.Radio.ContentRow.PaddingTopBottom.SM} 0", "type": "spacing", - "description": "Coded comps only!" + "description": "Controls the vertical spacing between InlineLabel and the Caption.\nApplied on: TextContainer" }, "MD": { "value": "{Forms.Radio.ContentRow.PaddingTopBottom.MD} 0", @@ -3167,6 +3167,86 @@ } } } + }, + "FormLabel": { + "Label": { + "Typography": { + "SM": { + "value": "{core.typography.sourceSansPro.semibold.87FixHeight}", + "type": "typography" + }, + "MD": { + "value": "{core.typography.sourceSansPro.semibold.100FixHeight}", + "type": "typography" + }, + "LG": { + "value": "{core.typography.sourceSansPro.semibold.125FixHeight}", + "type": "typography" + } + } + }, + "LabelAppendix": { + "Typography": { + "SM": { + "value": "{core.typography.sourceSansPro.regular.75FixHeight}", + "type": "typography" + }, + "MD": { + "value": "{core.typography.sourceSansPro.regular.87FixHeight}", + "type": "typography" + }, + "LG": { + "value": "{core.typography.sourceSansPro.regular.100FixHeight}", + "type": "typography" + } + } + }, + "Container": { + "ItemSpacing": { + "SM": { + "value": "{core.dimensionPX.4}", + "type": "spacing" + }, + "MD": { + "value": "{core.dimensionPX.4}", + "type": "spacing" + }, + "LG": { + "value": "{core.dimensionPX.4}", + "type": "spacing" + } + }, + "Padding": { + "SM": { + "value": "0 0", + "type": "spacing" + }, + "MD": { + "value": "0 0", + "type": "spacing" + }, + "LG": { + "value": "0 0", + "type": "spacing" + } + } + }, + "InlineLabel": { + "Typography": { + "SM": { + "value": "{core.typography.sourceSansPro.regular.87FixHeight}", + "type": "typography" + }, + "MD": { + "value": "{core.typography.sourceSansPro.regular.100FixHeight}", + "type": "typography" + }, + "LG": { + "value": "{core.typography.sourceSansPro.regular.125FixHeight}", + "type": "typography" + } + } + } } }, "UI": { @@ -3441,4 +3521,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/figma-design-tokens/input/tokens/dimensions/SEM.json b/packages/figma-design-tokens/input/tokens/dimensions/SEM.json index 6300d82a2..6217c0b13 100644 --- a/packages/figma-design-tokens/input/tokens/dimensions/SEM.json +++ b/packages/figma-design-tokens/input/tokens/dimensions/SEM.json @@ -469,34 +469,12 @@ "type": "spacing" } }, - "Label": { - "value": "{core.typography.sourceSansPro.semibold.87FixHeight}", - "type": "typography" - }, - "LabelAppendix": { - "value": "{core.typography.sourceSansPro.regular.75FixHeight}", - "type": "typography" - }, - "LabelComponent": { - "ItemSpacing": { - "value": "{core.dimensionPX.4}", - "type": "spacing" - }, - "Padding": { - "value": "0 0", - "type": "spacing" - } - }, "LabelSlot": { "Padding": { "value": "{core.dimensionREM.0} {core.dimensionPX.0} {core.dimensionPX.8} {core.dimensionPX.0}", "type": "spacing" } }, - "LabelNextToControl": { - "value": "{core.typography.sourceSansPro.regular.87FixHeight}", - "type": "typography" - }, "Legend": { "value": "{core.typography.sourceSansPro.semibold.75FixHeight}", "type": "typography", @@ -564,34 +542,12 @@ "type": "spacing" } }, - "Label": { - "value": "{core.typography.sourceSansPro.semibold.100FixHeight}", - "type": "typography" - }, - "LabelAppendix": { - "value": "{core.typography.sourceSansPro.regular.87FixHeight}", - "type": "typography" - }, - "LabelComponent": { - "ItemSpacing": { - "value": "{core.dimensionPX.4}", - "type": "spacing" - }, - "Padding": { - "value": "0 0", - "type": "spacing" - } - }, "LabelSlot": { "Padding": { "value": "{core.dimensionREM.0} {core.dimensionPX.0} {core.dimensionPX.8} {core.dimensionPX.0}", "type": "spacing" } }, - "LabelNextToControl": { - "value": "{core.typography.sourceSansPro.regular.100FixHeight}", - "type": "typography" - }, "Legend": { "value": "{core.typography.sourceSansPro.semibold.87FixHeight}", "type": "typography", @@ -659,34 +615,12 @@ "type": "spacing" } }, - "Label": { - "value": "{core.typography.sourceSansPro.semibold.125FixHeight}", - "type": "typography" - }, - "LabelAppendix": { - "value": "{core.typography.sourceSansPro.regular.100FixHeight}", - "type": "typography" - }, - "LabelNextToControl": { - "value": "{core.typography.sourceSansPro.regular.125FixHeight}", - "type": "typography" - }, "LabelSlot": { "Padding": { "value": "{core.dimensionREM.0} {core.dimensionPX.0} {core.dimensionPX.8} {core.dimensionPX.0}", "type": "spacing" } }, - "LabelComponent": { - "ItemSpacing": { - "value": "{core.dimensionPX.4}", - "type": "spacing" - }, - "Padding": { - "value": "0 0", - "type": "spacing" - } - }, "Legend": { "value": "{core.typography.sourceSansPro.semibold.100FixHeight}", "type": "typography", diff --git a/packages/ui-library/src/components/forms/checkbox/index.css.ts b/packages/ui-library/src/components/forms/checkbox/index.css.ts index c61b9cf33..c8e9cab7b 100644 --- a/packages/ui-library/src/components/forms/checkbox/index.css.ts +++ b/packages/ui-library/src/components/forms/checkbox/index.css.ts @@ -3,8 +3,8 @@ import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals"; import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated"; export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = renderThemedCssStrings((componentTokens, semanticTokens) => { - const { Checkbox } = componentTokens.Forms; - const { SM, MD, LG, LabelNextToControl } = semanticTokens.Forms; + const { Checkbox, FormLabel } = componentTokens.Forms; + //const { SM, MD, LG } = semanticTokens.Forms; const { FocusBorder } = semanticTokens.Global; return typeSafeNestedCss/* css */ ` @@ -41,7 +41,7 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re } } .blr-form-label-inline { - font-family: ${SM.LabelNextToControl.fontFamily}, 'sans-serif'; + font-family: ${FormLabel.InlineLabel.Typography.SM.fontFamily}, 'sans-serif'; } } @@ -76,9 +76,9 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re padding-top: ${Checkbox.ContentCol.PaddingTop.SM}; gap: ${Checkbox.ContentCol.ItemSpacing.SM}; .blr-form-label-inline { - font-weight: ${SM.LabelNextToControl.fontWeight}; - line-height: ${SM.LabelNextToControl.lineHeight}; - font-size: ${SM.LabelNextToControl.fontSize}; + font-weight: ${FormLabel.InlineLabel.Typography.SM.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.SM.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.SM.fontSize}; } } } @@ -101,9 +101,9 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re padding-top: ${Checkbox.ContentCol.PaddingTop.MD}; gap: ${Checkbox.ContentCol.ItemSpacing.MD}; .blr-form-label-inline { - font-weight: ${MD.LabelNextToControl.fontWeight}; - line-height: ${MD.LabelNextToControl.lineHeight}; - font-size: ${MD.LabelNextToControl.fontSize}; + font-weight: ${FormLabel.InlineLabel.Typography.MD.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.MD.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.MD.fontSize}; } } } @@ -126,9 +126,9 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re padding-top: ${Checkbox.ContentCol.PaddingTop.LG}; gap: ${Checkbox.ContentCol.ItemSpacing.LG}; .blr-form-label-inline { - font-weight: ${LG.LabelNextToControl.fontWeight}; - line-height: ${LG.LabelNextToControl.lineHeight}; - font-size: ${LG.LabelNextToControl.fontSize}; + font-weight: ${FormLabel.InlineLabel.Typography.LG.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.LG.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.LG.fontSize}; } } } @@ -136,23 +136,23 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re .label-wrapper { &:not(.disabled) { &:not(.error) { - color: ${LabelNextToControl.Rest}; + color: ${FormLabel.InlineLabel.TextColor.Rest}; &:hover { &:not(.readonly) { - color: ${LabelNextToControl.Hover}; + color: ${FormLabel.InlineLabel.TextColor.Hover}; } } &.focus { - color: ${LabelNextToControl.Focus}; + color: ${FormLabel.InlineLabel.TextColor.Focus}; } &.active { &:not(.readonly) { - color: ${LabelNextToControl.Pressed}; + color: ${FormLabel.InlineLabel.TextColor.Pressed}; } } &.readonly { - color: ${LabelNextToControl.ReadOnly}; + color: ${FormLabel.InlineLabel.TextColor.ReadOnly}; .blr-form-label-inline { cursor: not-allowed !important; pointer-events: none; @@ -161,12 +161,12 @@ export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = re } } &.error { - color: ${LabelNextToControl.Error}; + color: ${FormLabel.InlineLabel.TextColor.Error}; } &.disabled { .blr-form-label-inline { cursor: not-allowed; - color: ${LabelNextToControl.Disabled}; + color: ${FormLabel.InlineLabel.TextColor.Disabled}; } } } diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.css.ts b/packages/ui-library/src/components/forms/toggle-switch/index.css.ts index d84570d33..c56cecfad 100644 --- a/packages/ui-library/src/components/forms/toggle-switch/index.css.ts +++ b/packages/ui-library/src/components/forms/toggle-switch/index.css.ts @@ -14,8 +14,8 @@ export const styleCustom = typeSafeNestedCss/* css */ ` export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDark } = renderThemedCssStrings( (componentTokens, semanticTokens) => { - const { ToggleSwitch } = componentTokens.Forms; - const { LabelNextToControl } = semanticTokens.Forms; + const { ToggleSwitch, FormLabel } = componentTokens.Forms; + const { FocusBorder } = semanticTokens.Global; return typeSafeNestedCss/* css */ ` @@ -48,7 +48,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar flex-direction: column; & > .blr-form-label-inline { - color: ${LabelNextToControl.Rest}; + color: ${FormLabel.InlineLabel.TextColor.Rest}; } } @@ -89,7 +89,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar } & > .blr-form-label-inline { - color: ${LabelNextToControl.Rest}; + color: ${FormLabel.InlineLabel.TextColor.Rest}; } & > .toggle-switch-unselect { @@ -240,14 +240,14 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar } & > .blr-form-label-inline { - color: ${LabelNextToControl.Rest}; + color: ${FormLabel.InlineLabel.TextColor.Rest}; } } &.disabled { & > .toggle-content-col { & > .blr-form-label-inline { - color: ${LabelNextToControl.Disabled}; + color: ${FormLabel.InlineLabel.TextColor.Disabled}; } } } @@ -255,7 +255,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar &.readonly { > .toggle-content-col { > .blr-form-label-inline { - color: ${LabelNextToControl.ReadOnly}; + color: ${FormLabel.InlineLabel.TextColor.ReadOnly}; } } } diff --git a/packages/ui-library/src/foundation/component-tokens/radio.css.ts b/packages/ui-library/src/foundation/component-tokens/radio.css.ts index cfdabe07e..3f87c8279 100644 --- a/packages/ui-library/src/foundation/component-tokens/radio.css.ts +++ b/packages/ui-library/src/foundation/component-tokens/radio.css.ts @@ -3,8 +3,8 @@ import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; import { renderThemedCssStrings } from "../_tokens-generated/index.pseudo.generated"; export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderThemedCssStrings((componentTokens, semanticTokens) => { - const { SM, MD, LG, LabelNextToControl, Legend } = semanticTokens.Forms; - const { Radio, RadioGroup } = componentTokens.Forms; + const { SM, MD, LG, Legend } = semanticTokens.Forms; + const { Radio, RadioGroup, FormLabel } = componentTokens.Forms; /* ToDos: @@ -134,7 +134,7 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh .blr-form-label-inline { _FIX?_: "LabelNextToControl states"; - color: ${LabelNextToControl.Rest}; + color: ${FormLabel.InlineLabel.TextColor.Rest}; transition: all 0.25s ease 0s; display: flex; align-items: center; @@ -188,10 +188,10 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh } .blr-form-label-inline { - font-family: ${SM.LabelNextToControl.fontFamily}, sans-serif; - font-weight: ${SM.LabelNextToControl.fontWeight}; - line-height: ${SM.LabelNextToControl.lineHeight}; - font-size: ${SM.LabelNextToControl.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.SM.fontFamily}, sans-serif; + font-weight: ${FormLabel.InlineLabel.Typography.SM.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.SM.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.SM.fontSize}; } } } @@ -214,10 +214,10 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh } .blr-form-label-inline { - font-family: ${MD.LabelNextToControl.fontFamily}, sans-serif; - font-weight: ${MD.LabelNextToControl.fontWeight}; - line-height: ${MD.LabelNextToControl.lineHeight}; - font-size: ${MD.LabelNextToControl.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.MD.fontFamily}, sans-serif; + font-weight: ${FormLabel.InlineLabel.Typography.MD.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.MD.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.MD.fontSize}; } } } @@ -240,10 +240,10 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh } .blr-form-label-inline { - font-family: ${LG.LabelNextToControl.fontFamily}, sans-serif; - font-weight: ${LG.LabelNextToControl.fontWeight}; - line-height: ${LG.LabelNextToControl.lineHeight}; - font-size: ${LG.LabelNextToControl.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.LG.fontFamily}, sans-serif; + font-weight: ${FormLabel.InlineLabel.Typography.LG.fontWeight}; + line-height: ${FormLabel.InlineLabel.Typography.LG.lineHeight}; + font-size: ${FormLabel.InlineLabel.Typography.LG.fontSize}; } } } @@ -273,9 +273,10 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh height: ${Radio.Control.Icon.IconSize.SM.Inactive.Hover}; } - & + .label-wrapper { - .blr-form-label-inline { - color: ${LabelNextToControl.Hover}; + & + .label-wrapper { + .blr-form-label-inline { + color: ${FormLabel.InlineLabel.TextColor.Hover}; + } } } } @@ -293,13 +294,13 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh height: ${Radio.Control.Icon.IconSize.SM.Inactive.Pressed}; } - & + .label-wrapper { - .blr-form-label-inline { - color: ${LabelNextToControl.Pressed}; + & + .label-wrapper { + .blr-form-label-inline { + color: ${FormLabel.InlineLabel.TextColor.Pressed}; + } } } } - } &:focus { background-color: ${Radio.Control.Container.BackgroundColor.Inactive.Focus}; @@ -314,12 +315,12 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh height: ${Radio.Control.Icon.IconSize.SM.Inactive.Focus}; } - & + .label-wrapper { - .blr-form-label-inline { - color: ${LabelNextToControl.Focus}; + & + .label-wrapper { + .blr-form-label-inline { + color: ${FormLabel.InlineLabel.TextColor.Focus}; + } } } - } &.checked, &:checked { @@ -393,10 +394,11 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh height: ${Radio.Control.Icon.IconSize.SM.Inactive.Disabled}; } - & + .label-wrapper { - .blr-form-label-inline { - cursor: not-allowed; - color: ${LabelNextToControl.Disabled}; + & + .label-wrapper { + .blr-form-label-inline { + cursor: not-allowed; + color: ${FormLabel.InlineLabel.TextColor.Disabled}; + } } } } @@ -414,7 +416,15 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh & + .label-wrapper { .blr-form-label-inline { - color: ${LabelNextToControl.Error}; + color: ${FormLabel.InlineLabel.TextColor.Error}; + } + } + + &.checked, + &:checked { + &::before { + width: ${Radio.Control.Icon.IconSize.SM.Active.Error}; + height: ${Radio.Control.Icon.IconSize.SM.Active.Error}; } } @@ -447,7 +457,7 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh & + .label-wrapper { .blr-form-label-inline { - color: ${LabelNextToControl.Disabled}; + color: ${FormLabel.InlineLabel.TextColor.Disabled}; } } } @@ -468,7 +478,7 @@ export const { tokenizedLight: radioLight, tokenizedDark: radioDark } = renderTh & + .label-wrapper { .blr-form-label-inline { - color: ${LabelNextToControl.ReadOnly}; + color: ${FormLabel.InlineLabel.TextColor.ReadOnly}; } } } diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.ts b/packages/ui-library/src/foundation/semantic-tokens/form.css.ts index fc1e9929b..95d4e6e29 100644 --- a/packages/ui-library/src/foundation/semantic-tokens/form.css.ts +++ b/packages/ui-library/src/foundation/semantic-tokens/form.css.ts @@ -3,9 +3,8 @@ import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; import { renderThemedCssStrings } from "../_tokens-generated/index.pseudo.generated"; export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThemedCssStrings((componentTokens, semanticTokens) => { - const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, Caption, Label, LabelAppendix, InputIcon } = - semanticTokens.Forms; - const { Select } = componentTokens.Forms; + const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, Caption, InputIcon } = semanticTokens.Forms; + const { Select, FormLabel } = componentTokens.Forms; return typeSafeNestedCss` .blr-form-element { @@ -307,125 +306,145 @@ export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThem .blr-form-label { display: flex; align-items: center; - color: ${Label.Rest}; + color: ${FormLabel.Label.TextColor.Rest}; word-break: break-all; - + &:focus { - color: ${Label.Focus}; + color: ${FormLabel.Label.TextColor.Focus}; + .blr-form-label-appendix { + color: ${FormLabel.LabelAppendix.TextColor.Focus}; + } } &:hover { - color: ${Label.Hover}; + color: ${FormLabel.Label.TextColor.Hover}; + .blr-form-label-appendix { + color: ${FormLabel.LabelAppendix.TextColor.Hover}; + } } &:disabled { - color: ${Label.Disabled}; + color: ${FormLabel.Label.TextColor.Disabled}; + .blr-form-label-appendix { + color: ${FormLabel.LabelAppendix.TextColor.Disabled}; + } } &[readonly] { - color: ${Label.ReadOnly}; + color: ${FormLabel.Label.TextColor.ReadOnly}; + .blr-form-label-appendix { + color: ${FormLabel.LabelAppendix.TextColor.ReadOnly}; + } } &.error { - color: ${Label.Error}; - + color: ${FormLabel.Label.TextColor.Error}; .blr-form-label-appendix { - color: ${LabelAppendix.Error}; + color: ${FormLabel.LabelAppendix.TextColor.Error}; } } &.sm { padding: ${SM.LabelSlot.Padding}; - font-weight: ${SM.Label.fontWeight}; - font-size: ${SM.Label.fontSize}; - font-family: ${SM.Label.fontFamily}, sans-serif; - line-height: ${SM.Label.lineHeight}; - gap: ${SM.LabelComponent.ItemSpacing}; - color: ${Label.Rest}; - - &.error { - color: ${Label.Error}; + font-weight: ${FormLabel.Label.Typography.SM.fontWeight}; + font-size: ${FormLabel.Label.Typography.SM.fontSize}; + font-family: ${FormLabel.Label.Typography.SM.fontFamily}, sans-serif; + line-height: ${FormLabel.Label.Typography.SM.lineHeight}; + gap: ${FormLabel.Container.ItemSpacing.SM}; + __FIX__color: ${FormLabel.Label.TextColor.Rest}; + + &.__FIX__error { + color: ${FormLabel.Label.TextColor.Error}; } } &.md { padding: ${MD.LabelSlot.Padding}; - font-weight: ${MD.Label.fontWeight}; - font-size: ${MD.Label.fontSize}; - font-family: ${MD.Label.fontFamily}, sans-serif; - line-height: ${MD.Label.lineHeight}; - gap: ${MD.LabelComponent.ItemSpacing}; + font-weight: ${FormLabel.Label.Typography.MD.fontWeight}; + font-size: ${FormLabel.Label.Typography.MD.fontSize}; + font-family: ${FormLabel.Label.Typography.MD.fontFamily}, sans-serif; + line-height: ${FormLabel.Label.Typography.MD.lineHeight}; + gap: ${FormLabel.Container.ItemSpacing.MD}; } &.lg { padding: ${LG.LabelSlot.Padding}; - font-weight: ${LG.Label.fontWeight}; - font-size: ${LG.Label.fontSize}; - font-family: ${LG.Label.fontFamily}, sans-serif; - line-height: ${LG.Label.lineHeight}; - color: ${Label.Rest}; - gap: ${LG.LabelComponent.ItemSpacing}; - - &.error { - color: ${Label.Error}; + font-weight: ${FormLabel.Label.Typography.LG.fontWeight}; + font-size: ${FormLabel.Label.Typography.LG.fontSize}; + font-family: ${FormLabel.Label.Typography.LG.fontFamily}, sans-serif; + line-height: ${FormLabel.Label.Typography.LG.lineHeight}; + gap: ${FormLabel.Container.ItemSpacing.LG}; + + &.__FIX__error { + color: ${FormLabel.Label.TextColor.Error}; } } } + + + + .blr-form-label-inline { flex: 1; &.sm { - font-weight: ${SM.LabelNextToControl.fontWeight}; - font-size: ${SM.LabelNextToControl.fontSize}; - font-family: ${SM.LabelNextToControl.fontFamily}, sans-serif; - line-height: ${SM.LabelNextToControl.lineHeight}; + font-weight: ${FormLabel.InlineLabel.Typography.SM.fontWeight}; + font-size: ${FormLabel.InlineLabel.Typography.SM.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.SM.fontFamily}, sans-serif; + line-height: ${FormLabel.InlineLabel.Typography.SM.lineHeight}; } &.md { - font-weight: ${MD.LabelNextToControl.fontWeight}; - font-size: ${MD.LabelNextToControl.fontSize}; - font-family: ${MD.LabelNextToControl.fontFamily}, sans-serif; - line-height: ${MD.LabelNextToControl.lineHeight}; + font-weight: ${FormLabel.InlineLabel.Typography.MD.fontWeight}; + font-size: ${FormLabel.InlineLabel.Typography.MD.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.MD.fontFamily}, sans-serif; + line-height: ${FormLabel.InlineLabel.Typography.MD.lineHeight}; } &.lg { - font-weight: ${LG.LabelNextToControl.fontWeight}; - font-size: ${LG.LabelNextToControl.fontSize}; - font-family: ${LG.LabelNextToControl.fontFamily}, sans-serif; - line-height: ${LG.LabelNextToControl.lineHeight}; + font-weight: ${FormLabel.InlineLabel.Typography.LG.fontWeight}; + font-size: ${FormLabel.InlineLabel.Typography.LG.fontSize}; + font-family: ${FormLabel.InlineLabel.Typography.LG.fontFamily}, sans-serif; + line-height: ${FormLabel.InlineLabel.Typography.LG.lineHeight}; } } + + + .blr-form-label-appendix { - padding-left: ${MD.LabelSlot.Padding}; - font-weight: ${MD.LabelAppendix.fontWeight}; - font-size: ${MD.LabelAppendix.fontSize}; - font-family: ${MD.LabelAppendix.fontFamily}, sans-serif; - line-height: ${MD.LabelAppendix.lineHeight}; - color: ${LabelAppendix.Rest}; + color: ${FormLabel.LabelAppendix.TextColor.Rest}; &.sm { padding-left: ${SM.LabelSlot.Padding}; - font-weight: ${SM.LabelAppendix.fontWeight}; - font-size: ${SM.LabelAppendix.fontSize}; - font-family: ${MD.LabelAppendix.fontFamily}, sans-serif; - line-height: ${MD.LabelAppendix.lineHeight}; + font-weight: ${FormLabel.LabelAppendix.Typography.SM.fontWeight}; + font-size: ${FormLabel.LabelAppendix.Typography.SM.fontSize}; + font-family: ${FormLabel.LabelAppendix.Typography.SM.fontFamily}, sans-serif; + line-height: ${FormLabel.LabelAppendix.Typography.SM.lineHeight}; + } + + &.md { + padding-left: ${MD.LabelSlot.Padding}; + font-weight: ${FormLabel.LabelAppendix.Typography.MD.fontWeight}; + font-size: ${FormLabel.LabelAppendix.Typography.MD.fontSize}; + font-family: ${FormLabel.LabelAppendix.Typography.MD.fontFamily}, sans-serif; + line-height: ${FormLabel.LabelAppendix.Typography.MD.lineHeight}; } &.lg { padding-left: ${LG.LabelSlot.Padding}; - font-weight: ${LG.LabelAppendix.fontWeight}; - font-size: ${LG.LabelAppendix.fontSize}; - font-family: ${LG.LabelAppendix.fontFamily}, sans-serif; - line-height: ${LG.LabelAppendix.lineHeight}; + font-weight: ${FormLabel.LabelAppendix.Typography.LG.fontWeight}; + font-size: ${FormLabel.LabelAppendix.Typography.LG.fontSize}; + font-family: ${FormLabel.LabelAppendix.Typography.LG.fontFamily}, sans-serif; + line-height: ${FormLabel.LabelAppendix.Typography.LG.lineHeight}; } - .error { - color: ${Label.Error}; + .__fix__error { + color: ${FormLabel.LabelAppendix.TextColor.Error}; } - .hint { + .__fix__hint { color: ${Caption.Hint}; } } From 4aaf3edc92889362548e9661a97c4a76a6cf0ceb Mon Sep 17 00:00:00 2001 From: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:22:32 +0100 Subject: [PATCH 3/6] 540 textarea rename tokens (#762) * fix(tokens): renames textarea minHeight * fix: apply new tokennames at Textarea css --------- Co-authored-by: larserbach --- .../input/tokens/$themes.json | 3 -- .../input/tokens/dimensions/CMP.json | 28 +++++++++---------- .../components/forms/textarea/index.css.ts | 6 ++-- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index 5a1a21d72..56addd510 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -2309,9 +2309,6 @@ "Forms.Select.SM.IconPaddingRight": "fdd1cb252bddca5415ea56be09e288d2448eedb6", "Forms.Select.MD.IconPaddingRight": "f2d3790406c214a99981980933e5e9593d631c07", "Forms.Select.LG.IconPaddingRight": "1c7131022784d1fb1c29393506d54332fa43f234", - "Forms.TextArea.SM.MinHeight": "e126940af6bf2cf49ac2742258230557b0c6a0d7", - "Forms.TextArea.MD.MinHeight": "f2aec5d81be0e4b43e85baf7a56579347f5de832", - "Forms.TextArea.LG.MinHeight": "3036a4f154b9df3caf5322be3a06b5046866f673", "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Rest": "8443304ea445b2f06f5158bae550d4184b74bf19", "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Hover": "89217bf38aae2a18587cb7cae486bf28653b4fc9", "Forms.ToggleSwitch.Control.Container.BorderWidth.SM.Active.Pressed": "1395d8ce01320ce7c864c9cb28ae9241a91bf8ed", diff --git a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json index a3d947455..5e37c0b6f 100644 --- a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json +++ b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json @@ -2450,22 +2450,20 @@ } }, "TextArea": { - "SM": { - "MinHeight": { - "value": "{core.dimensionREM.64}", - "type": "sizing" - } - }, - "MD": { + "InputField": { "MinHeight": { - "value": "{core.dimensionREM.80}", - "type": "sizing" - } - }, - "LG": { - "MinHeight": { - "value": "{core.dimensionREM.112}", - "type": "sizing" + "SM": { + "value": "{core.dimensionREM.64}", + "type": "sizing" + }, + "MD": { + "value": "{core.dimensionREM.80}", + "type": "sizing" + }, + "LG": { + "value": "{core.dimensionREM.112}", + "type": "sizing" + } } } }, diff --git a/packages/ui-library/src/components/forms/textarea/index.css.ts b/packages/ui-library/src/components/forms/textarea/index.css.ts index d65392a97..3d77642a9 100644 --- a/packages/ui-library/src/components/forms/textarea/index.css.ts +++ b/packages/ui-library/src/components/forms/textarea/index.css.ts @@ -73,15 +73,15 @@ export const { tokenizedLight: textAreaLight, tokenizedDark: textAreaDark } = re } &.sm { - min-height: ${TextArea.SM.MinHeight}; + min-height: ${TextArea.InputField.MinHeight.SM}; } &.md { - min-height: ${TextArea.MD.MinHeight}; + min-height: ${TextArea.InputField.MinHeight.MD}; } &.lg { - min-height: ${TextArea.LG.MinHeight}; + min-height: ${TextArea.InputField.MinHeight.LG}; } .flex-container { From 025e3092233730982f8e142aa80c1d24502c8393 Mon Sep 17 00:00:00 2001 From: larserbach Date: Thu, 11 Jan 2024 16:29:49 +0100 Subject: [PATCH 4/6] Removed configuration (#768) --- .../input/tokens/$themes.json | 64 +------------------ .../input/tokens/color/SEM.json | 2 +- .../input/tokens/dimensions/CMP.json | 2 +- 3 files changed, 3 insertions(+), 65 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index 56addd510..5b3d9e4b4 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -1348,8 +1348,6 @@ "q.surface.default": "daa19b0648718e4b0cf640f86106907fbc2f7b9a", "q.surface.error.alpha": "853a0dad067356fbcd541f322754e636962cbed0", "q.surface.error.beta": "21f8662253be121bdc8d482958b1d5ac6722a73e", - "q.surface.error.alpha": "853a0dad067356fbcd541f322754e636962cbed0", - "q.surface.error.beta": "21f8662253be121bdc8d482958b1d5ac6722a73e", "q.surface.inverted": "be62c24b18818b74bb5419601990061243356d37", "q.surface.readonly": "c16031a08499ee91f585067be14ebb92f9f2a1f4", "q.surface.warning": "4d7024ac2ed9747365004fbbaf19cf07e03d5d56", @@ -1410,7 +1408,6 @@ "q.content.onerror.beta": "87631f7c5ab411c7c86760e1f269ed64d4661c75", "q.content.onerror.gamma": "28412e83dde9908dd0d0468a641c59633c5aed81", "q.content.onerror.delta": "f7e8cf96ddbadb15b6bff567ffb3d317a6dca156", - "q.content.onerror.delta": "f7e8cf96ddbadb15b6bff567ffb3d317a6dca156", "q.content.onwarning.alpha": "6516df79ad13cb8d3b209eb77c77f649b715b757", "q.content.onwarning.beta": "d1edb55190eee837334b36e08602215679d067ef", "q.content.onwarning.gamma": "b6c544e416706a2650d683f68f84f8bccf77359c", @@ -2907,8 +2904,6 @@ "q.surface.default": "daa19b0648718e4b0cf640f86106907fbc2f7b9a", "q.surface.error.alpha": "853a0dad067356fbcd541f322754e636962cbed0", "q.surface.error.beta": "21f8662253be121bdc8d482958b1d5ac6722a73e", - "q.surface.error.alpha": "853a0dad067356fbcd541f322754e636962cbed0", - "q.surface.error.beta": "21f8662253be121bdc8d482958b1d5ac6722a73e", "q.surface.inverted": "be62c24b18818b74bb5419601990061243356d37", "q.surface.readonly": "c16031a08499ee91f585067be14ebb92f9f2a1f4", "q.surface.warning": "4d7024ac2ed9747365004fbbaf19cf07e03d5d56", @@ -2969,7 +2964,6 @@ "q.content.onerror.beta": "87631f7c5ab411c7c86760e1f269ed64d4661c75", "q.content.onerror.gamma": "28412e83dde9908dd0d0468a641c59633c5aed81", "q.content.onerror.delta": "f7e8cf96ddbadb15b6bff567ffb3d317a6dca156", - "q.content.onerror.delta": "f7e8cf96ddbadb15b6bff567ffb3d317a6dca156", "q.content.onwarning.alpha": "6516df79ad13cb8d3b209eb77c77f649b715b757", "q.content.onwarning.beta": "d1edb55190eee837334b36e08602215679d067ef", "q.content.onwarning.gamma": "b6c544e416706a2650d683f68f84f8bccf77359c", @@ -3000,61 +2994,5 @@ "Forms.RadioGroup.CaptionSlot.PaddingTop.LG": "c8f1ada63ac592e9d6d96942d34d419648bc3984" }, "group": "Theme" - }, - { - "id": "08249cc3818adf31affe7426f575df1543561628", - "name": "AllCaptions", - "$figmaStyleReferences": {}, - "selectedTokenSets": {}, - "group": "Caption", - "$figmaCollectionId": "VariableCollectionId:9016:11935", - "$figmaModeId": "9016:0", - "$figmaVariableReferences": { - "CaptionContainer": "b0d1634342d97fd63a137fc52f5f637b581a0df1", - "🔷 HintMsg": "0ce761be58bf5624e583377385ea94610e17be94", - "🔷 ErrorMsg": "3a96a0ab1babd3bb59147d6bbca724ca1fde0e82" - } - }, - { - "id": "75296d1875947aa3681aa72763fa1078814c938c", - "name": "HintOnly", - "$figmaStyleReferences": {}, - "selectedTokenSets": {}, - "group": "Caption", - "$figmaCollectionId": "VariableCollectionId:9016:11935", - "$figmaModeId": "9016:1", - "$figmaVariableReferences": { - "CaptionContainer": "b0d1634342d97fd63a137fc52f5f637b581a0df1", - "🔷 HintMsg": "0ce761be58bf5624e583377385ea94610e17be94", - "🔷 ErrorMsg": "3a96a0ab1babd3bb59147d6bbca724ca1fde0e82" - } - }, - { - "id": "952d14ff8cc881b46dc29b075f1927fc9d6326b9", - "name": "ErrorOnly", - "$figmaStyleReferences": {}, - "selectedTokenSets": {}, - "group": "Caption", - "$figmaCollectionId": "VariableCollectionId:9016:11935", - "$figmaModeId": "9016:2", - "$figmaVariableReferences": { - "CaptionContainer": "b0d1634342d97fd63a137fc52f5f637b581a0df1", - "🔷 HintMsg": "0ce761be58bf5624e583377385ea94610e17be94", - "🔷 ErrorMsg": "3a96a0ab1babd3bb59147d6bbca724ca1fde0e82" - } - }, - { - "id": "bb09f6c5d139043d0d6590c978e9096343ca4ba5", - "name": "noCaptions", - "$figmaStyleReferences": {}, - "selectedTokenSets": {}, - "group": "Caption", - "$figmaCollectionId": "VariableCollectionId:9016:11935", - "$figmaModeId": "9016:3", - "$figmaVariableReferences": { - "CaptionContainer": "b0d1634342d97fd63a137fc52f5f637b581a0df1", - "🔷 HintMsg": "0ce761be58bf5624e583377385ea94610e17be94", - "🔷 ErrorMsg": "3a96a0ab1babd3bb59147d6bbca724ca1fde0e82" - } } -] +] \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/color/SEM.json b/packages/figma-design-tokens/input/tokens/color/SEM.json index 213df7eb6..c41f2fa2f 100644 --- a/packages/figma-design-tokens/input/tokens/color/SEM.json +++ b/packages/figma-design-tokens/input/tokens/color/SEM.json @@ -1379,4 +1379,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json index 5e37c0b6f..e538485d7 100644 --- a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json +++ b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json @@ -3519,4 +3519,4 @@ } } } -} +} \ No newline at end of file From c4269541a7a464a6d782a7e8911ba79930fbc240 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Thu, 11 Jan 2024 17:11:59 +0100 Subject: [PATCH 5/6] feature/496-storybook-form-label (#686) * feat(storybook): added form Label Story * fix(storybook): added line break * fix(storybook): changed some little text and stories after review * fix(storybook): fixed some text changes after review --------- Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- .../forms/number-input/index.stories.ts | 6 +- .../form-label/index.stories.ts | 159 +++++++++++++++++- 2 files changed, 153 insertions(+), 12 deletions(-) diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/forms/number-input/index.stories.ts index f8661afee..fe5710f53 100644 --- a/packages/ui-library/src/components/forms/number-input/index.stories.ts +++ b/packages/ui-library/src/components/forms/number-input/index.stories.ts @@ -4,7 +4,7 @@ import { BlrNumberInputRenderFunction } from './renderFunction'; import { FormSizes, Units } from '../../../globals/constants'; import { Themes } from '../../../foundation/_tokens-generated/index.themes'; import { PureIconKeys } from '@boiler/icons/icons-optimized'; -import { html } from 'lit'; +import { html } from 'lit-html'; import { action } from '@storybook/addon-actions'; const sharedStyles = html` @@ -361,7 +361,7 @@ export default { description: { component: ` Number Input allows users to enter enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point. - - [**Apperance**](#apperance) + - [**Appearance**](#appearance) - [**Size Variant**](#size-variant) - [**Stepper Variant**](#stepper-variant) - [**Content / Settings**](#content--settings) @@ -386,7 +386,7 @@ export default { export const NumberInput = (params: BlrNumberInputType) => BlrNumberInputRenderFunction(params); /** - * ## Apperance + * ## Appearance * ### Size Variant * The Number Input component comes in 3 sizes: SM, MD and LG. */ diff --git a/packages/ui-library/src/components/internal-components/form-label/index.stories.ts b/packages/ui-library/src/components/internal-components/form-label/index.stories.ts index 4217f267b..b6e2562b1 100644 --- a/packages/ui-library/src/components/internal-components/form-label/index.stories.ts +++ b/packages/ui-library/src/components/internal-components/form-label/index.stories.ts @@ -3,21 +3,72 @@ import { Themes } from '../../../foundation/_tokens-generated/index.themes'; import { FormSizes, LabelVariants } from '../../../globals/constants'; import { BlrFormLabelType } from './index'; import { BlrFormLabelRenderFunction } from './renderFunction'; +import { html } from 'lit-html'; + +const sharedStyles = html` + +`; export default { - title: 'Design System/Web Components/Internal Components/FormLabel', + title: 'Design System/Web Components/Internal Components/Form Label', argTypes: { labelSize: { + name: 'sizeVariant', + description: 'Choose size of the component.', options: FormSizes, - control: { type: 'select' }, + control: { type: 'radio' }, + table: { + category: 'Appearance', + }, }, theme: { options: Themes, control: { type: 'select' }, + table: { + category: 'Appearance', + }, + }, + labelText: { + name: 'label', + description: 'Enter string used as label text.', + control: { + type: 'text', + }, + table: { + category: 'Content / Settings', + }, + }, + labelAppendix: { + name: 'labelAppendix', + description: + 'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.', + control: { + type: 'text', + }, + table: { + category: 'Content / Settings', + }, }, + variant: { + name: 'has Error', + description: 'Choose if component has an error.', options: LabelVariants, control: { type: 'select' }, + table: { + category: 'Validation', + }, + }, + forValue: { + description: 'This references the id of the component to which the label is added.', + control: { type: 'text' }, + table: { + category: 'Accessibility', + }, }, }, parameters: { @@ -26,20 +77,110 @@ export default { url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125225&mode=dev', }, viewMode: 'docs', + layout: 'centered', + docs: { + description: { + component: ` Form Label provides a descriptive text or caption for an input field. The `, + }, + }, }, }; export const BlrFormLabel = (params: BlrFormLabelType) => BlrFormLabelRenderFunction(params); +BlrFormLabel.storyName = 'Form Label'; -BlrFormLabel.storyName = 'FormLabel'; - -const args: BlrFormLabelType = { +const defaultParams: BlrFormLabelType = { theme: 'Light', - labelText: 'Test', - labelAppendix: 'added', labelSize: 'md', - forValue: 'Richard', + labelText: 'Label-text', + labelAppendix: '(Appendix)', variant: 'label', + forValue: 'Form Label', +}; +BlrFormLabel.args = defaultParams; + +/** + * ## Appearance + * ### Size Variant + * The Form Label component comes in 3 sizes: SM, MD and LG. + */ +export const SizeVariant = () => { + return html`${sharedStyles} +
+ ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'sm', + labelText: 'Form label SM', + labelAppendix: '(Appendix SM)', + })} +
+
+ ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'md', + labelText: 'Form label MD', + labelAppendix: '(Appendix MD)', + })} +
+
+ ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'lg', + labelText: 'Form label LG', + labelAppendix: '(Appendix LG)', + })} +
`; }; +SizeVariant.story = { name: ' ' }; -BlrFormLabel.args = args; +/** + * ## Content / Settings + * ### Label Appendix + * The Form Label component can display an appendix text next to the label text. The label appendix should be used to inform the users in case this field is required. + */ +export const LabelAppendix = () => { + return html` + ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'lg', + labelText: 'Form label', + labelAppendix: '(required)', + })} + ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'lg', + labelText: 'Form label', + labelAppendix: '(optional)', + })} + ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelSize: 'lg', + labelText: 'Form label', + labelAppendix: ' ', + })} + `; +}; +LabelAppendix.story = { name: ' ' }; + +/** + * ## Validation + * + * ### Has Error + * The Form Label component can be set to have an error. + */ +export const HasError = () => { + return html` ${BlrFormLabelRenderFunction({ + ...defaultParams, + labelText: 'Error', + labelAppendix: '(with Appendix)', + variant: 'error', + })}`; +}; +HasError.story = { name: ' ' }; From 3f62ffb83d5bf8e25cbc097a075012b4f542f0a2 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Thu, 11 Jan 2024 17:20:39 +0100 Subject: [PATCH 6/6] fix/409-storybook-checkbox (#700) * fix(storybook): added some changes after review * fix(storybook): added changes after review --------- Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- .../forms/checkbox/index.stories.ts | 158 ++++++------------ 1 file changed, 51 insertions(+), 107 deletions(-) diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/forms/checkbox/index.stories.ts index 44d4bd837..fdc185d33 100644 --- a/packages/ui-library/src/components/forms/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/forms/checkbox/index.stories.ts @@ -9,10 +9,6 @@ import { Themes } from '../../../foundation/_tokens-generated/index.themes'; // Shared Style inside the Stories const sharedStyles = html`