@springernature/global-forms - npm Package Compare versions

Comparing version 5.0.0-rc.10 to 5.0.0

demo/context.json

@@ -20,2 +20,47 @@ {
 				"template": "globalFormFieldset",
+				"legend": "Test, should not inherit",
+				"fields": [
+					{
+						"template": "globalFormFieldset",
+						"fields": [
+							{
+								"template": "globalFormRadios",
+								"legend": "Animal",
+								"id": "radios-animals",
+								"name": "radios-animals",
+								"inputs": [
+									{
+										"label": "Horse",
+										"value": "Horse",
+										"id": "radio-horse"
+									},
+									{
+										"label": "Monkey",
+										"value": "Monkey",
+										"id": "radio-monkey",
+										"fields": [
+											{
+												"template": "globalFormText",
+												"label": "What type of monkey?",
+												"id": "monkey-type",
+												"name": "monkey-type",
+												"hint": "Chimps are not monkeys",
+												"error": "Choose a monkey already!"
+											}
+										]
+									},
+									{
+										"label": "Platypus",
+										"value": "Platypus",
+										"id": "radio-platypus",
+										"checked": true
+									}
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				"template": "globalFormFieldset",
 				"legend": "<h2>Text inputs</h2>",
@@ -47,2 +92,9 @@ "fields": [
 					{
+						"template": "globalFormText",
+						"label": "An unimportant field",
+						"optional": true,
+						"id": "unimportant",
+						"name": "unimportant"
+					},
+					{
 						"template": "globalFormHTML",
@@ -81,2 +133,8 @@ "content": "<p>Here is some content appearing between fields. You can put any HTML here that you wish.</p>"
 							{
+								"label": "Please select an option",
+								"value": "",
+								"selected": true,
+								"disabled": true
+							},
+							{
 								"label": "Horse",
@@ -91,4 +149,3 @@ "value": "Horse"
 								"label": "Platypus",
-								"value": "Platypus",
-								"selected": true
+								"value": "Platypus"
 							}
@@ -122,2 +179,52 @@ ]
 			{
+				"legend": "<h2>Inline fields</h2>",
+				"fields": [
+					{
+						"template": "globalFormInlineFields",
+						"fields": [
+							{
+								"template": "globalFormText",
+								"name": "search",
+								"id": "search",
+								"label": "Search",
+								"hideLabel": true
+							},
+							{
+								"template": "globalFormButton",
+								"type": "submit",
+								"label": "Search",
+								"modifiers": ["primary"]
+							}
+						]
+					},
+					{
+						"template": "globalFormInlineFields",
+						"nowrap": true,
+						"fields": [
+							{
+								"template": "globalFormText",
+								"name": "day",
+								"id": "day",
+								"label": "Day",
+								"hint": "In the format: DD"
+							},
+							{
+								"template": "globalFormText",
+								"name": "month",
+								"id": "month",
+								"label": "Month",
+								"hint": "In the format: MM"
+							},
+							{
+								"template": "globalFormText",
+								"name": "year",
+								"id": "year",
+								"label": "Year",
+								"hint": "In the format: YY"
+							}
+						]
+					}
+				]
+			},
+			{
 				"legend": "<h2>Radios</h2>",
@@ -127,3 +234,3 @@ "fields": [
 						"template": "globalFormRadios",
-						"label": "Animal",
+						"legend": "Animal",
 						"id": "radios-animals",
@@ -303,2 +410,3 @@ "name": "radios-animals",
 		"globalFormFieldset": "./toolkits/global/packages/global-forms/view/globalFormFieldset.hbs",
+		"globalFormInlineFields": "./toolkits/global/packages/global-forms/view/globalFormInlineFields.hbs",
 		"globalFormLabel": "./toolkits/global/packages/global-forms/view/globalFormLabel.hbs",
@@ -319,2 +427,3 @@ "globalFormError": "./toolkits/global/packages/global-forms/view/globalFormError.hbs",
 		"globalFormHTML": "./toolkits/global/packages/global-forms/view/fields/globalFormHTML.hbs",
+		"globalFormButton": "./toolkits/global/packages/global-forms/view/fields/globalFormButton.hbs",
 		"globalFormButtons": "./toolkits/global/packages/global-forms/view/fields/globalFormButtons.hbs",
@@ -321,0 +430,0 @@ "globalFormIconError": "./toolkits/global/packages/global-forms/view/globalFormIconError.hbs",

HISTORY.md

 # History
 
+## 5.0.0 (2022-09-29)
+    * BREAKING:
+        * Fields required by default; required removed with `optional` set to `true`
+    * `requiredSuffix` for marking required field explicitly
+    * Ability to visually hide labels
+    * Inline fields (sets of fields laid out horizontally)
+    * Fieldsets without legends now use `div` (suppresses pa11y false positive)
+    
 ## 5.0.0-rc.10 (2022-09-30)
@@ -4,0 +12,0 @@ * Removes margin-top from form labels used on pictographic radios when in horizontal layout

package.json

 {
 	"name": "@springernature/global-forms",
-	"version": "5.0.0-rc.10",
+	"version": "5.0.0",
 	"license": "MIT",
@@ -5,0 +5,0 @@ "description": "form component",

README.md

 # Global Forms
 
-**IMPORTANT:** _This is a **release candidate** representing an ambitious reworking of the global-forms component, including design tokens integration, at a component level, for the first time. It is expected to need some additional work before a full release can be made. Tokens are generated to the `scss/00-tokens` folder and cannot be edited directly. If you need to temporarily add or override variables, please do this in a `10-settings` folder, one level down. The Elements Design System team will assess these changes for making these variables tokens later._
+This component includes a number of form fields and related templates.
 
-This component includes a number of form fields and related templates. It is designed to make it as simple as possible to create an HTML form.
-
 The component does not include any JavaScript. States (such as an invalid/error state) are defined at a data level. If you're using client-side processing, you might benefit from compiling the form’s handlebars template in the browser.
@@ -14,5 +12,2 @@
 ```scss
-// Include this with your settings
-@import '@springernature/global-forms/scss/10-settings/default';
-
 // Include this with your other components
@@ -64,3 +59,3 @@ @import '@springernature/global-forms/scss/50-components/forms';
 
-The `template` property sets the type of field - for example, `"template": "globalFormText"` renders a text input field if that is what you have registered the **view/fields/globalFormText.hbs** template as. Aim to make the `template`, `id`, and `name` properties mandatory parts of your data schema.
+The `template` property sets the type of field - for example, `"template": "globalFormText"` renders a text input field if that is what you have registered the **view/fields/globalFormText.hbs** template as. Aim to make the `template`, `id`, `label`, and `name` properties mandatory parts of your data schema.
 
@@ -79,2 +74,4 @@ This component supports a wide range of standard form field attributes. For example, to include a `readonly` attribute on your text input, you can include a property of the same name on the data:
 
+#### Hints
+
 The `hint` property adds hint text under the main label text but _inside_ the `<label>`. This means it is automatically available to screen reader software.
@@ -86,8 +83,16 @@
 
-The `optional` property adds _“(optional)”_ to the label text.
+#### Required
 
-```json
-"optional": true
+Fields are required by default. Avoid asking for information you don't really need. To explicitly mark fields as required, `requiredSuffix` will append text—such as an asterisk—to the label. This property permits HTML, meaning you can hide the asterisk character from screen readers.
+
 ```
+"requiredSuffix": "<span aria-hidden=\"true\">*</span>"
+```
 
+The `required` and `aria-required="true"` attributes are applied automatically. Unless `novalidate: true` is applied on the field’s data, browser validation will warn the user when they have not filled out the field upon submission.
+
+If you do need to ask for optional information, set `optional: true`. This will remove `required` and `aria-required="true"` as well as appending the text “(optional)” to the field label. 
+
+#### Data properties
+
 In addition to these top-level properties, you can add data properties as a `dataAttrs` array, which can be useful for unit testing.
@@ -109,3 +114,3 @@
 
-### Errors
+#### Errors
 
@@ -143,4 +148,2 @@ Each field can have an `error` property. The inclusion of the property means the field is in an error state. The property value (a string) defines the error message the user sees.
 
-### Making choices
-
 #### Select fields
@@ -277,3 +280,3 @@
 
-### Hidden fields
+#### Hidden fields
 
@@ -291,2 +294,39 @@ You can hide any field from visibility (also from screen reader software and keyboard interaction) using `hidden: true`. If you want to use a field of `type="hidden"`, you need to use `template: globalFormHidden`. It is recommended you also apply `hidden: true` to such fields because it will remove the inter-field margin. In the following example, note the `label` is omitted since hidden fields are not user facing.
 
+#### Inline fields
+
+It is possible to display fields in a horizontal line, using the following `template` value:
+
+```json
+"template": "globalFormInlineFields"
+```
+
+For example, here’s a possible field definition for a search bar, comprising an input and submit button:
+
+```json
+{
+    "template": "globalFormInlineFields",
+    "gap": "1em",
+    "fields": [
+        {
+            "template": "globalFormText",
+            "name": "search",
+            "id": "search",
+            "label": "Search",
+            "hideLabel": true
+        },
+        {
+            "template": "globalFormButton",
+            "type": "submit",
+            "label": "Search",
+            "modifiers": ["primary"]
+        }
+    ]
+}
+```
+
+* **`fields`**: Individual fields are defined in a `fields` array.
+* **`gap`**: The gap between the fields; any valid `gap` value.
+* **`hideLabel`**: You can visually hide labels with the `hideLabel` property _without_ removing them from screen reader output. Only do this if there is another visual form of label (the “Search” label of the submit button in this case). 
+* **`nowrap`**: Not used in the previous example. Stop the individual fields from wrapping (beware of narrow viewports).
+
 ### Supplementary fields
@@ -293,0 +333,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116895

increased by5.43%

Number of package files

33

increased by6.45%

Lines of code

434

increased by33.54%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

467

increased by9.37%

No dependency changes