139 - ids-spinbox wc

[rob2d]

Explain the details for making this change. What existing problem does the pull request solve?

Adds IdsSpinbox (Phase 1) and base attributes.

Misc: also fixes:

a small potential issue with ids-keyboard-mixin where we sub on an array as the key vs the events (since we do not actually group key combos or use it in this manner in other components -- the fix was 2 lines so figured small enough to include here)

Related github/jira issue (required):

Closes #139

Steps necessary to review your pull request (required):

pull this PR branch locally and run environment (139-ids-spinbox)
visit http://localhost:4300/ids-spinbox/
ensure functionality listed at #139 for Phase 1 is implemented.

Included in this Pull Request:

• An e2e or functional test for the bug or feature.
• A note to the change log.

[tmcconechy]

Looks really good and getting more consistent. Just a couple things that could be improved (some could be moved to TODO).

1. Can you make sure it works in all themes see https://github.com/infor-design/enterprise-wc/tree/main/src/ids-mixins#ids-theme-mixin for details (all the components you did are missing this so should get in the habit)
2. The focus state is looking a bit strange
   
3. We have a feature i just remembered where you can hold and press the spinbox

• go to https://main-enterprise.demo.design.infor.com/components/spinbox/example-index.html
• hold down on the + button with the mouse
• this is the code https://github.com/infor-design/enterprise/blob/main/src/components/spinbox/spinbox.js#L735 and general logic

My suggestion would be fix 1 and 2 and add 3 to the TODO for now but feel free to add

[tmcconechy]

This can go in example.js (or else the demo css will go in the built component)

[rob2d]

not sure if this is user error here, but tried to put this into app/ids-spinbox/example.js and it doesn't actually reflect when visiting the main app index.

[tmcconechy]

I did it here https://github.com/infor-design/enterprise-wc/tree/main/app/ids-tooltip but not sure about the main index either. You maybe need to import it index.js but sounds like this is for layout? If so i would just remove it and use ids-layout grid?

[deep7102]

@rob2d looking very nice, few things found

• Why not used the use ids-layout-grid for demo example
• Missing read-only example
• Initial load focus was on last spin-input
• Input is fine, but each button around looks bit wider
• Type in 10 then click on ant button +/- value got reset
• In 0-to-5 spin box, it let enter other values like 60
• Missing getter/setter for label, label-required, readonly and placeholder props
• Do we need label-required in demo example? by default it should be true

[rob2d]

@deep7102 thanks for the feedback.

Re: Type in 10 then click on ant button +/- value got reset

I saw in the issue it said handling blur/etc was not for Phase I, so I was aware of that but just pushing with functionality as it is since that's a related edge case.

Edit: seems for other issues I do at least need a change handler here.

[rob2d]

@deep7102 seems placeholder and label setters are there

for

Initial load focus was on last spin-input

I believe this is a separate issue/slightly out of scope and on ids-input at the moment since I'm not adding code for managing focus state beyond when user has retrieved it. Can see this when visiting http://localhost:4300 (document.activeState is on "active focus" component but that shouldn't be auto binding)