feat: (core) Add [state] to all input-group related components. Adapt forms #1613

JKMarkowski · 2019-11-18T15:04:27Z

Please provide a link to the associated issue.

fixes: #1085
fixes: #1217
fixes: #1216
fixes: #1721
fixes: #1715

It is WIP PR, just to summarize all the things done and start to make docs in breaking changes

Please provide a brief summary of this pull request.

There is new [state] @input on all of the input-group related component:

Combobox
DatePicker
DateTimePicker
InputGroup
LocalizationEditor
MultiInput
TimePicker

After some change on fundamental-style, Select component will be added to this list as well.

There is new documentation and usage of these component within Form, with fd-form-message component.

There is also new forms adaptation, which included change of

FormMessage component, the types to 'success' | 'error' | 'warning' | 'information'
FormControl component, now it supports the compact mode and has other types: 'valid' | 'invalid' | 'warning' | 'information'
FormLabel got new [checkbox], [radio] and [toggle] options, to define if it's used along with these input elements
InputGroup will have changed styling (no impact on NGX), but it will allow to use more than 1 addon one side.
Toggle now have semantic and compact modes.
Changed fd-form-set to fd-fieldset
Removed fd-input-group-search

Please check whether the PR fulfills the following requirements

the commit message follows the guideline:
https://github.com/SAP/fundamental-ngx/blob/master/CONTRIBUTING.md
tests for the changes that have been done

Documentation checklist:

update README.md
Breaking Changes Wiki
Documentation Examples

netlify · 2019-11-18T15:08:24Z

Deploy preview for fundamental-ngx ready!

Built with commit 0aa77b6

https://deploy-preview-1613--fundamental-ngx.netlify.com

stefanoScalzo · 2019-11-19T16:09:52Z

.../docs/src/app/core/component-docs/date-picker/examples/date-picker-form-example.component.ts

+            <br/>
+
+            <div fd-form-item>
+                <label fd-form-label>Disabled Date Picker</label>


The disabled date picker still gets the hand on hover

Also add :(core)

There is added pointer-events: none no disabled popovers.

stefanoScalzo · 2019-11-19T16:10:56Z

...ent-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html

+    <br/><br/>
+    <div fd-form-item>
+        <label fd-form-label>Disabled Date Picker</label>
+        <fd-datetime-picker [state]="'information'" formControlName="disabledDate"></fd-datetime-picker>


cursor still has hand on hover

There is added pointer-events: none no disabled popovers.

InnaAtanasova

Checkboxes look off

The help icon should be on the right side of the input and there's no help message any more. It's been removed. Now it's just the default msg

JKMarkowski · 2019-11-20T14:31:53Z

Hi @InnaAtanasova, did you check the preview checkbox? On my side it looks like that:

Also now help message is removed and inlineHelp flag is added to fd-form-label

InnaAtanasova · 2019-11-20T14:35:05Z

It's radio buttons, not checkboxes that are broken

JKMarkowski · 2019-11-22T11:25:51Z

@InnaAtanasova
The radio's issue comes from fundamental-styles lib. It's about some weird order of css properties.
All of the changes from 0.2.0 has been introduced.

droshev · 2019-11-30T01:47:47Z

@JKMarkowski @InnaAtanasova @stefanoScalzo are we waiting for anything more in this PR?

JKMarkowski · 2019-12-02T10:39:42Z

Hi @droshev, We are waiting for SAP/fundamental-styles#442 I think.

JKMarkowski · 2019-12-04T13:32:08Z

Newest 0.4.0-rc.21 is adapted on this PR.

stefanoScalzo · 2020-01-03T16:39:24Z

libs/core/src/lib/toggle/toggle.component.html

+    <span class="fd-toggle"
+          [ngClass]="
+          (size ? ('fd-toggle--' + size) : '') +
+          (semantic ? ' fd-toggle--semantic' : ' ') +


I think there should not be a space in between the quotes

There should be quotes, because it's treaten as a string, without empty string it will be
fd-toggle--sizefd-toggle--semantic

quotes yes but there is a space on line 5 in the single quotes

stefanoScalzo · 2020-01-03T16:45:04Z

.../src/lib/localizator-editor/localization-editor-main/localization-editor-main.component.html

@@ -1,7 +1,10 @@
 <fd-input-group [compact]="compact"
+                [state]="state"


Why is there a state on the input group and the addon?

Otherwise it's not applied to inputs.

stefanoScalzo · 2020-01-03T16:47:21Z

libs/core/src/lib/input-group/input-group.component.scss

-        max-height: 100%;
+
+    .fd-input-group__addon--button .fd-input-group__button {
+        &:hover {


Should this be in styles?

It is on styles, but on NGX we have some issues with classes hierarchy, so it's mandatory to add it there aswell.

stefanoScalzo · 2020-01-03T16:52:36Z

libs/core/src/lib/input-group/input-group.component.html

-        'fd-input-group--compact' : compact}">
+     [ngClass]="(inline ? 'fd-input-group--inline ' : ' ') +
+        (disabled ? 'is-disabled ' : ' ') +
+        (state ? 'is-' + state : ' ')">


could also be written like this
[ngClass]="
{
'fd-input-group--inline': inline,
'is-disabled ' : disabled,
is-' + state: state
}

It throws error, there is no way to add dynamically class as key in ngClass object

stefanoScalzo · 2020-01-03T16:54:09Z

libs/core/src/lib/form/form-item/form-item.component.scss

@@ -4,3 +4,5 @@
 @import "~fundamental-styles/dist/radio";
 @import "~fundamental-styles/dist/textarea";
 @import "~fundamental-styles/dist/form-select";
+@import "~fundamental-styles/dist/fieldset";
+


@InnaAtanasova Not sure if this should be importing all of these styles?

I removed unused.

Solve conflicts, Change FormState type file Add new forms styling Add input group examples Add datepicker form example Add multiple addons on input group Adapt new forms from styles, add form usage example in input-group components Change input group multiple addons

… fd-fieldset

…component, remove brs

JKMarkowski · 2020-01-06T12:25:37Z

@stefanoScalzo All your comments has been resolved, stackblitz is working. Please take a look again, so we can merge it.

JKMarkowski force-pushed the feat/input-group-state branch 2 times, most recently from 08cf699 to 91ed595 Compare November 18, 2019 15:49

JKMarkowski mentioned this pull request Nov 19, 2019

fix: fd-form-control are no longer styled properly #1614

Closed

JKMarkowski changed the title ~~WIP: Add [state] to all input-group related components. Adapt forms~~ feat: Add [state] to all input-group related components. Adapt forms Nov 19, 2019

stefanoScalzo reviewed Nov 19, 2019

View reviewed changes

InnaAtanasova self-requested a review November 19, 2019 22:08

InnaAtanasova requested changes Nov 19, 2019

View reviewed changes

JKMarkowski changed the title ~~feat: Add [state] to all input-group related components. Adapt forms~~ feat: (core) Add [state] to all input-group related components. Adapt forms Nov 20, 2019

JKMarkowski force-pushed the feat/input-group-state branch from 932799d to 8841e7d Compare November 20, 2019 14:27

JKMarkowski force-pushed the feat/input-group-state branch from 1b80678 to b191d19 Compare November 20, 2019 17:17

droshev added this to the sprint 24 - Maester Aemon milestone Nov 21, 2019

droshev added this to In progress in Development via automation Nov 21, 2019

droshev added the enhancement New feature or request label Nov 21, 2019

JKMarkowski force-pushed the feat/input-group-state branch from b191d19 to d364fec Compare November 21, 2019 19:41

JKMarkowski requested review from InnaAtanasova and stefanoScalzo November 22, 2019 11:24

droshev modified the milestones: sprint 24 - Maester Aemon, Sprint 25 - Paris Nov 28, 2019

JKMarkowski force-pushed the feat/input-group-state branch from 0964bf3 to 05a5356 Compare December 4, 2019 12:43

JKMarkowski requested a review from droshev December 5, 2019 08:54

droshev modified the milestones: Sprint 25 - Paris, Sprint 26 - Sprint 27 Rome Dec 14, 2019

JKMarkowski force-pushed the feat/input-group-state branch from 18b35b1 to 8b1a3df Compare December 23, 2019 11:10

stefanoScalzo reviewed Jan 3, 2020

View reviewed changes

JKMarkowski added 12 commits January 5, 2020 10:39

Add semantic toggle, beautify forms examples

0201503

Fix cursor pointer, remove old help message examples

9602787

Remove [isCheck], remove fd-form-control class, change fd-form-set to…

114a00d

… fd-fieldset

Solve rebase conflicts, fix tests

6847b9b

Adapt newest RC.21 version with new input groups

0a0e0f8

Adapt 0.4.0v styles

1e4bdfc

Remove multi addons, fix localization editor compact mode

3ce2852

Fix documentation, playground, optimize class adding

049e6c1

Fix datepicker and datetimepickers examples state, remove leftovers

9fb1eee

Change bracket on comments

1112522

Fix stackblitz, remove scss imports, change fd-fieldset to body-less …

25252be

…component, remove brs

JKMarkowski force-pushed the feat/input-group-state branch from 0f624cf to 25252be Compare January 6, 2020 11:55

Add dynamic states to datepickers

3f30691

JKMarkowski force-pushed the feat/input-group-state branch from 61d1c7f to d71b98e Compare January 6, 2020 13:27

stefanoScalzo self-requested a review January 6, 2020 15:32

stefanoScalzo approved these changes Jan 6, 2020

View reviewed changes

Add example of dynamic state to multi input

0aa77b6

JKMarkowski force-pushed the feat/input-group-state branch from d71b98e to 0aa77b6 Compare January 6, 2020 15:38

InnaAtanasova approved these changes Jan 6, 2020

View reviewed changes

Development automation moved this from Review in progress to Reviewer approved Jan 6, 2020

JKMarkowski merged commit adabbc7 into master Jan 6, 2020

Development automation moved this from Reviewer approved to Done Jan 6, 2020

JKMarkowski deleted the feat/input-group-state branch January 6, 2020 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: (core) Add [state] to all input-group related components. Adapt forms #1613

feat: (core) Add [state] to all input-group related components. Adapt forms #1613

JKMarkowski commented Nov 18, 2019 •

edited

netlify bot commented Nov 18, 2019 •

edited

stefanoScalzo Nov 19, 2019

stefanoScalzo Nov 19, 2019

JKMarkowski Nov 20, 2019

stefanoScalzo Nov 19, 2019

JKMarkowski Nov 20, 2019

InnaAtanasova left a comment

JKMarkowski commented Nov 20, 2019

InnaAtanasova commented Nov 20, 2019

JKMarkowski commented Nov 22, 2019 •

edited

droshev commented Nov 30, 2019

JKMarkowski commented Dec 2, 2019

JKMarkowski commented Dec 4, 2019

stefanoScalzo Jan 3, 2020

JKMarkowski Jan 5, 2020

stefanoScalzo Jan 6, 2020

stefanoScalzo Jan 3, 2020

JKMarkowski Jan 6, 2020

stefanoScalzo Jan 3, 2020

JKMarkowski Jan 5, 2020

stefanoScalzo Jan 3, 2020

JKMarkowski Jan 5, 2020

stefanoScalzo Jan 3, 2020

JKMarkowski Jan 6, 2020

JKMarkowski commented Jan 6, 2020

		@@ -1,7 +1,10 @@
		<fd-input-group [compact]="compact"
		[state]="state"

feat: (core) Add [state] to all input-group related components. Adapt forms #1613

feat: (core) Add [state] to all input-group related components. Adapt forms #1613

Conversation

JKMarkowski commented Nov 18, 2019 • edited

Please provide a link to the associated issue.

Please provide a brief summary of this pull request.

Please check whether the PR fulfills the following requirements

netlify bot commented Nov 18, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

InnaAtanasova left a comment

Choose a reason for hiding this comment

JKMarkowski commented Nov 20, 2019

InnaAtanasova commented Nov 20, 2019

JKMarkowski commented Nov 22, 2019 • edited

droshev commented Nov 30, 2019

JKMarkowski commented Dec 2, 2019

JKMarkowski commented Dec 4, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JKMarkowski commented Jan 6, 2020

JKMarkowski commented Nov 18, 2019 •

edited

netlify bot commented Nov 18, 2019 •

edited

JKMarkowski commented Nov 22, 2019 •

edited