feat(ui-library): 938 update component names (#968)

* feat(ui-library): #938 updated Button Text * feat(ui-library): #938 updated Button Icon * feat(ui-library): #938 updated Input Number * feat(ui-library): #938 updated Input Field Text * feat(ui-library): #939 changed Input Number -> Input Field Number * docs(general): #938 updated README.md with new component names * feat(ui-library): #938 resolved PR comments * feat(ui-library): #938 resolved PR comments * feat(ui-library): #938 small fix after rebase
deven-org · Mar 26, 2024 · afa29a6 · afa29a6
1 parent 27926de
commit afa29a6
Show file tree

Hide file tree

Showing 57 changed files with 563 additions and 564 deletions.
diff --git a/README.md b/README.md
@@ -262,15 +262,15 @@ To check that changes have applied do the following:
 #### Removing Icons
 Removing is slightly more difficult than adding, because there are multiple components which are using some of the icons by default. You can see the full list of these components below:
 
+- Button Icon
+- Button Text
 - Checkbox
 - Form Caption
 - Icon
-- Icon Button
-- Number Input
+- Input Field Number
+- Input Field Text
 - Select
 - TabBar
-- Text Button
-- Text Input
 - Toggle Switch
 
 > Note: If you use any of those components, make sure that you either haven't removed the icons they use from the project, or replaced missing icons with yours.

diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
@@ -70,7 +70,7 @@ Before creating a new issue, please [check if your issue already exists](https:/
 <li>Use the existing issue templates.</li>
 <li>It should be <i>specific</i>. It's important that it addresses one specific topic.</li>
 <li>If it is a bug it should be <i>reproducible</i>. It should contain all the instructions needed to reproduce the same outcome.</li>
-<li>If the issue is about a component, please add the component name to the beginning of issue title, followed by a dash and a more in detail description of the issue. For example: <code>Text Button - add new variant</code></li>
+<li>If the issue is about a component, please add the component name to the beginning of issue title, followed by a dash and a more in detail description of the issue. For example: <code>Button Text - add new variant</code></li>
 </ul>
 </details>
 After creating an issue, don’t forget to assign it to yourself. The core team will then check your issue to ensures that your idea fits the scope of the project and leave an approval comment. Waiting for approval makes it less likely to get a rejected pull request.  We will do our best to reply to new issues within a week.

diff --git a/docs/PROJECTBACKGROUND.md b/docs/PROJECTBACKGROUND.md
@@ -11,7 +11,7 @@ This chapter provides the users with information about historical decisions, whe
 ## Background
 The idea for a boilerplate design system formed in 2022 during a client project which included the creation of a new design system. The main goal was to find a way to reduce reduncancies when creating components. Lars Erbach and Marcel Doering teamed up and prepared an elevator pitch for the leadership. After this the leadership agreed to to invest some time for team to come up with a real business case and a final presentation until end of November 2022. For this Thorben Hartmann also joined the team. The resulting presentation can be found [here](https://www.figma.com/file/A3qtxWTli1tQpgIK9wAjBO/%F0%9F%8E%A8-B01LER-Pitch-Convolute-%5BTEMPLATES%5D-(Copy)?type=design&node-id=192%3A3244&mode=design&t=FiW9ptIXH0xYtE1x-1) (you need to be part of the Accenture org in Figma). The feedback was very overwhelmingly positive and the leadership directly made plans to allocate some budget for 2023 to build B01LER.
 
-Early 2023 the budget to build B01LER was approved. Lars Töppner and Oliver Klee joined the team as developers and the team started with the setup. In early March, a first Milestone was reached with the finalization of the first component: the [Text Button](https://github.com/deven-org/boiler/issues/50). The team was on track to finish the initial set of components in the defined time, but unfortunatley Lars Töppner and a month later Oliver were needed on other projects and had to leave the team. Finding substitutes turned out to be harder than expected, before Christian Hoffman and David Kennedy took over the role of dev leads and brought back some stability to the team. To make up time that was lost during the staffing changes, the team size was extended and other developers and designers also joined the team, at one time reaching even 12 members. 
+Early 2023 the budget to build B01LER was approved. Lars Töppner and Oliver Klee joined the team as developers and the team started with the setup. In early March, a first Milestone was reached with the finalization of the first component: the [Button Text](https://github.com/deven-org/boiler/issues/50). The team was on track to finish the initial set of components in the defined time, but unfortunatley Lars Töppner and a month later Oliver were needed on other projects and had to leave the team. Finding substitutes turned out to be harder than expected, before Christian Hoffman and David Kennedy took over the role of dev leads and brought back some stability to the team. To make up time that was lost during the staffing changes, the team size was extended and other developers and designers also joined the team, at one time reaching even 12 members. 
 
 In autumn 2023 another huge milestone was reached with the finalization of the initial set of [15 components](https://github.com/deven-org/boiler/milestone/1). It took a few more months though to finalise the first release, as some of the first components as well as some general topics needed some refactoring first. The first release went live on 16.12.2023 together with the B01LER website [boilerds.com](https://boilerds.com). Together with the first release, the repository and the Figma file were also published under open source licences (see also the milestones [Alpha Release](https://github.com/deven-org/boiler/milestone/15), [Release Figma File](https://github.com/deven-org/boiler/milestone/11) and [Make Repository Public](https://github.com/deven-org/boiler/milestone/12)). 
 

diff --git a/packages/figma-design-tokens/config/style-dictionary.config.cjs b/packages/figma-design-tokens/config/style-dictionary.config.cjs
@@ -13,26 +13,27 @@ const semanticTypes = ['buttons', 'selectables', 'forms', 'global', 'ui'];
 
 const componentTypes = [
   'ButtonGroup',
+  'ButtonText',
+  'ButtonIcon',
   'CaptionComponent',
   'CaptionGroup',
   'Checkbox',
   'Counter',
   'Divider',
   'FormLabel',
   'Icon',
-  'IconButton',
   'IconDropdown',
   'InputIcon',
+  'InputFieldNumber',
+  'InputFieldText',
   'Loader',
   'RadioGroup',
-  'NumberInput',
   'Select',
   'Slider',
   'StepperButton',
   'StepperCombo',
   'Radio',
   'TabBar',
-  'TextButton',
   'TextArea',
   'ToggleSwitch',
   'Tooltip',

diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
@@ -2344,4 +2344,4 @@
     },
     "group": "Sizes"
   }
-]
+]
diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json b/packages/figma-design-tokens/input/tokens/cmp/sizeVariants.json
@@ -44,7 +44,7 @@
         }
       }
     },
-    "IconButton": {
+    "ButtonIcon": {
       "Icon": {
         "SizeVariant": {
           "XS": {
@@ -190,7 +190,7 @@
         }
       }
     },
-    "TextButton": {
+    "ButtonText": {
       "Icon": {
         "SizeVariant": {
           "XS": {
@@ -276,4 +276,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizes.json b/packages/figma-design-tokens/input/tokens/cmp/sizes.json
@@ -907,7 +907,7 @@
         }
       }
     },
-    "IconButton": {
+    "ButtonIcon": {
       "Container": {
         "Padding": {
           "XS": {
@@ -1317,7 +1317,7 @@
         }
       }
     },
-    "NumberInput": {
+    "InputFieldNumber": {
       "InputField": {
         "TextWrapper": {
           "ItemSpacing": {
@@ -2376,7 +2376,7 @@
         }
       }
     },
-    "TextButton": {
+    "ButtonText": {
       "Container": {
         "Padding_V": {
           "XS": {
@@ -2434,27 +2434,27 @@
         },
         "Padding": {
           "XS": {
-            "value": "{cmp.TextButton.Container.Padding_V.XS} {cmp.TextButton.Container.Padding_H.XS}",
+            "value": "{cmp.ButtonText.Container.Padding_V.XS} {cmp.ButtonText.Container.Padding_H.XS}",
             "type": "spacing",
             "description": "Do not apply in Figma, use aliases instead."
           },
           "SM": {
-            "value": "{cmp.TextButton.Container.Padding_V.SM} {cmp.TextButton.Container.Padding_H.SM}",
+            "value": "{cmp.ButtonText.Container.Padding_V.SM} {cmp.ButtonText.Container.Padding_H.SM}",
             "type": "spacing",
             "description": "Do not apply in Figma, use aliases instead."
           },
           "MD": {
-            "value": "{cmp.TextButton.Container.Padding_V.MD} {cmp.TextButton.Container.Padding_H.MD}",
+            "value": "{cmp.ButtonText.Container.Padding_V.MD} {cmp.ButtonText.Container.Padding_H.MD}",
             "type": "spacing",
             "description": "Do not apply in Figma, use aliases instead."
           },
           "LG": {
-            "value": "{cmp.TextButton.Container.Padding_V.LG} {cmp.TextButton.Container.Padding_H.LG}",
+            "value": "{cmp.ButtonText.Container.Padding_V.LG} {cmp.ButtonText.Container.Padding_H.LG}",
             "type": "spacing",
             "description": "Do not apply in Figma, use aliases instead."
           },
           "XL": {
-            "value": "{cmp.TextButton.Container.Padding_V.XL} {cmp.TextButton.Container.Padding_H.XL}",
+            "value": "{cmp.ButtonText.Container.Padding_V.XL} {cmp.ButtonText.Container.Padding_H.XL}",
             "type": "spacing",
             "description": "Do not apply in Figma, use aliases instead."
           }
@@ -2465,19 +2465,19 @@
             "type": "spacing"
           },
           "SM": {
-            "value": "{cmp.TextButton.Container.ItemSpacing.XS}",
+            "value": "{cmp.ButtonText.Container.ItemSpacing.XS}",
             "type": "spacing"
           },
           "MD": {
-            "value": "{cmp.TextButton.Container.ItemSpacing.XS}",
+            "value": "{cmp.ButtonText.Container.ItemSpacing.XS}",
             "type": "spacing"
           },
           "LG": {
-            "value": "{cmp.TextButton.Container.ItemSpacing.XS}",
+            "value": "{cmp.ButtonText.Container.ItemSpacing.XS}",
             "type": "spacing"
           },
           "XL": {
-            "value": "{cmp.TextButton.Container.ItemSpacing.XS}",
+            "value": "{cmp.ButtonText.Container.ItemSpacing.XS}",
             "type": "spacing"
           }
         },
@@ -3209,4 +3209,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -14,17 +14,17 @@
     <div class="contentWrapper">
       <div class="componentWrapper">
         <div class="component">
-          <p>Text Button</p>
-          <blr-text-button
+          <p>Button Text</p>
+          <blr-button-text
             theme="Light"
             variant="cta"
             sizeVariant="md"
             label="Button"
             hasIcon="true"
             iconPosition="leading"
             icon="blr360"
-            textButtonId="button-id"
-          ></blr-text-button>
+            buttonTextId="button-id"
+          ></blr-button-text>
           <button id="toggleLoadingState">Toggle Loading State</button>
           <button id="toggleDisabledState">Toggle Disabled State</button>
         </div>
@@ -48,13 +48,13 @@
         </div>
 
         <div class="component">
-          <p>Text Input</p>
-          <blr-text-input placeholder="Enter text..." value="" hintText="Hint"></blr-text-input>
+          <p>Input Field Text</p>
+          <blr-input-field-text placeholder="Enter text..." value="" hintText="Hint"></blr-input-field-text>
         </div>
 
         <div class="component">
-          <p>Number Input</p>
-          <blr-number-input
+          <p>Input Field Number</p>
+          <blr-input-field-number
             value="1000"
             size="md"
             steppervariant="vertical"
@@ -67,12 +67,12 @@
             haslabel="true"
             label="Label-text"
             labelappendix="(Appendix)"
-            numberinputid="test-id"
+            inputfieldnumberid="test-id"
             theme="Light"
-            name="NumberInput"
+            name="InputFieldNumber"
             decimals="10"
             leadingzeros="3"
-          ></blr-number-input>
+          ></blr-input-field-number>
         </div>
 
         <div class="component">
@@ -101,7 +101,7 @@
             offset="20"
             message="Message-text"
           >
-            <blr-text-button theme="Light" variant="secondary" sizeVariant="md" label="Hover me"></blr-text-button>
+            <blr-button-text theme="Light" variant="secondary" size="md" label="Hover me"></blr-button-text>
           </blr-tooltip>
         </div>
 

diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
@@ -5,10 +5,10 @@ const toggleLoadingButton = document.querySelector('#toggleLoadingState');
 const toggleDisabledState = document.querySelector('#toggleDisabledState');
 const logsContainer = document.querySelector('#logs');
 
-const blrButton = document.getElementsByTagName('blr-text-button')[0];
+const blrButton = document.getElementsByTagName('blr-button-text')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
-const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
+const blrInputFieldText = document.getElementsByTagName('blr-input-field-text')[0];
 const blrTextArea = document.getElementsByTagName('blr-textarea')[0];
 
 const addLog = (log) => {
@@ -22,10 +22,10 @@ toggleLoadingButton.addEventListener('click', () => {
 
   if (currentState) {
     blrButton.removeAttribute('loading');
-    addLog('Set text button loading state to false');
+    addLog('Set button text loading state to false');
   } else {
     blrButton.setAttribute('loading', 'true');
-    addLog('Set text button loading state to true');
+    addLog('Set button text loading state to true');
   }
 });
 
@@ -34,23 +34,23 @@ toggleDisabledState.addEventListener('click', () => {
 
   if (currentState) {
     blrButton.removeAttribute('disabled');
-    addLog('Set text button disabled state to false');
+    addLog('Set button text disabled state to false');
   } else {
     blrButton.setAttribute('disabled', 'true');
-    addLog('Set text button loading state to true');
+    addLog('Set button text loading state to true');
   }
 });
 
 blrButton.addEventListener('blrClick', () => {
-  addLog('blr-text-button clicked');
+  addLog('blr-button-text clicked');
 });
 
 blrButton.addEventListener('blrFocus', () => {
-  addLog('blr-text-button focused');
+  addLog('blr-button-text focused');
 });
 
 blrButton.addEventListener('blrBlur', () => {
-  addLog('blr-text-button blurred');
+  addLog('blr-button-text blurred');
 });
 
 blrCheckbox.addEventListener('blrCheckedChange', (e) => {
@@ -69,16 +69,16 @@ blrSelect.addEventListener('blrSelectedValueChange', () => {
   addLog('blr-select changed');
 });
 
-blrTextInput.addEventListener('blrFocus', () => {
-  addLog('blr-text-input focused');
+blrInputFieldText.addEventListener('blrFocus', () => {
+  addLog('blr-input-field-text focused');
 });
 
-blrTextInput.addEventListener('blrBlur', () => {
-  addLog('blr-text-input blurred');
+blrInputFieldText.addEventListener('blrBlur', () => {
+  addLog('blr-input-field-text blurred');
 });
 
-blrTextInput.addEventListener('blrTextValueChange', () => {
-  addLog('blr-text-input changed');
+blrInputFieldText.addEventListener('blrTextValueChange', () => {
+  addLog('blr-input-field-text changed');
 });
 
 blrTextArea.addEventListener('blrFocus', () => {

diff --git a/packages/ui-library/src/components/button-group/index.stories.ts b/packages/ui-library/src/components/button-group/index.stories.ts
@@ -2,8 +2,8 @@
 import { html } from 'lit';
 import '../../index';
 import { ButtonGroupSizes, ButtonGroupAlignmentVariants } from '../../globals/constants';
-import { BlrIconButtonRenderFunction } from '../icon-button/renderFunction';
-import { BlrTextButtonRenderFunction } from '../text-button/renderFunction';
+import { BlrButtonIconRenderFunction } from '../button-icon/renderFunction';
+import { BlrButtonTextRenderFunction } from '../button-text/renderFunction';
 import { BlrButtonGroupType } from '.';
 import { BlrButtonGroupRenderFunction } from './renderFunction';
 
@@ -57,7 +57,7 @@ export default {
     docs: {
       description: {
         component: `<markdown>
-        Button Group allows users to select one option from the group. They are visually cohesive, meaning they share a similar appearance in terms of size, style, and often color. This consistency helps users quickly identify that these buttons are related. The Button Group component utilizes the slot element, rendering multiple Text Button or Icon Button components, or the combination of both. For more information have a look at the [Text Button](?path=/docs/design-system-web-components-actions-buttons-text-button--docs) and the [Icon Button](?path=/docs/design-system-web-components-actions-buttons-icon-button--docs) components.
+        Button Group allows users to select one option from the group. They are visually cohesive, meaning they share a similar appearance in terms of size, style, and often color. This consistency helps users quickly identify that these buttons are related. The Button Group component utilizes the slot element, rendering multiple Button Text or Button Icon components, or the combination of both. For more information have a look at the [Button Text](?path=/docs/components-button-text--docs) and the [Button Icon](?path=/docs/components-button-icon--docs) components.
         - [**Appearance**](#appearance)
           - [**Alignment**](#alignment)
       </markdown>
@@ -74,27 +74,27 @@ export default {
 
 export const ButtonGroup = (
   params: BlrButtonGroupType,
-  primaryLabel: string = 'Text Button',
-  secondaryLabel: string = 'Text Button'
+  primaryLabel: string = 'Button Text',
+  secondaryLabel: string = 'Button Text'
 ) => {
   const contentButtons = html`
-    ${BlrTextButtonRenderFunction({
-      label: typeof primaryLabel === 'string' ? primaryLabel : 'Text Button',
+    ${BlrButtonTextRenderFunction({
+      label: typeof primaryLabel === 'string' ? primaryLabel : 'Button Text',
       theme: 'Light',
       loading: false,
       variant: 'primary',
       disabled: false,
       buttonDisplay: 'inline-block',
     })}
-    ${BlrTextButtonRenderFunction({
+    ${BlrButtonTextRenderFunction({
       label: secondaryLabel,
       theme: 'Light',
       loading: false,
       variant: 'secondary',
       disabled: false,
       buttonDisplay: 'inline-block',
     })}
-    ${BlrIconButtonRenderFunction({
+    ${BlrButtonIconRenderFunction({
       theme: 'Light',
       loading: false,
       variant: 'silent',
-Original file line number
+Diff line change
@@ Expand Up / @@ -2344,4 +2344,4 @@ @@
         },
         "group": "Sizes"
       }
-    ]
+    ]