Skip to content

Commit

Permalink
:erge branch 'main' of https://github.com/infor-design/enterprise-wc …
Browse files Browse the repository at this point in the history 
…into 5032-Add-ids-breadcrumb
  • Loading branch information
@chrisakinrinade
chrisakinrinade committed Jun 1, 2021
2 parents 749cc4b + b9c114c commit 1bb137e
Show file tree
Hide file tree
Showing 16 changed files with 351 additions and 147 deletions.
36 changes: 18 additions & 18 deletions app/ids-input/standalone-css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,49 @@ <h1 class="ids-text ids-text-12">IDS Input - Standalone CSS</h1>
<div class="ids-layout-grid-cell">

<div class="ids-input">
<label for="input-first-name" class="ids-text label-text">First Name</label>
<label for="input-first-name" class="ids-text ids-label-text">First Name</label>
<div class="field-container">
<input class="ids-input-field" id="input-first-name" name="input-first-name" placeholder="Normal text Field"/>
</div>
</div>

<div class="ids-input disabled">
<label for="input-disabled" class="ids-text label-text">Disabled</label>
<label for="input-disabled" class="ids-text ids-label-text">Disabled</label>
<div class="field-container">
<input class="ids-input-field" disabled id="input-disabled" name="input-disabled" value="Field not editable"/>
</div>
</div>

<div class="ids-input readonly">
<label for="input-readonly" class="ids-text label-text">Readonly</label>
<label for="input-readonly" class="ids-text ids-label-text">Readonly</label>
<div class="field-container">
<input class="ids-input-field" readonly id="input-readonly" name="input-readonly" value="02006"/>
</div>
</div>

<div class="ids-input">
<label for="input-default-align" class="ids-text label-text">Default align (left)</label>
<label for="input-default-align" class="ids-text ids-label-text">Default align (left)</label>
<div class="field-container">
<input class="ids-input-field" id="input-default-align" name="input-default-align" value="Default align"/>
</div>
</div>

<div class="ids-input">
<label for="input-left-align" class="ids-text label-text">Left align</label>
<label for="input-left-align" class="ids-text ids-label-text">Left align</label>
<div class="field-container">
<input class="ids-input-field left" id="input-left-align" name="input-left-align" value="Left align"/>
</div>
</div>

<div class="ids-input">
<label for="input-center-align" class="ids-text label-text">Center align</label>
<label for="input-center-align" class="ids-text ids-label-text">Center align</label>
<div class="field-container">
<input class="ids-input-field center" id="input-center-align" name="input-center-align" value="Center align"/>
</div>
</div>

<div class="ids-input">
<label for="input-right-align" class="ids-text label-text">Right align</label>
<label for="input-right-align" class="ids-text ids-label-text">Right align</label>
<div class="field-container">
<input class="ids-input-field right" id="input-right-align" name="input-right-align" value="Right align"/>
</div>
Expand All @@ -73,7 +73,7 @@ <h2 class="ids-text ids-text-12">Ids Input - Compact</h2>
<div class="ids-layout-grid-cell">

<div class="ids-input">
<label for="input-compact" class="ids-text label-text">Compact</label>
<label for="input-compact" class="ids-text ids-label-text">Compact</label>
<div class="field-container compact">
<input class="ids-input-field" id="input-compact" name="input-compact"/>
</div>
Expand All @@ -91,28 +91,28 @@ <h2 class="ids-text ids-text-12">Ids Input - Field Heights (Height)</h2>
<div class="ids-layout-grid-cell">

<div class="ids-input">
<label for="input-height-extra-small" class="ids-text label-text">Extra Small</label>
<label for="input-height-extra-small" class="ids-text ids-label-text">Extra Small</label>
<div class="field-container field-height-xs">
<input class="ids-input-field" id="input-height-extra-small" name="input-height-extra-small"/>
</div>
</div>

<div class="ids-input">
<label for="input-height-small" class="ids-text label-text">Small</label>
<label for="input-height-small" class="ids-text ids-label-text">Small</label>
<div class="field-container field-height-sm">
<input class="ids-input-field" id="input-height-small" name="input-height-small"/>
</div>
</div>

<div class="ids-input">
<label for="input-height-medium" class="ids-text label-text">Medium (default)</label>
<label for="input-height-medium" class="ids-text ids-label-text">Medium (default)</label>
<div class="field-container field-height-md">
<input class="ids-input-field" id="input-height-medium" name="input-height-medium"/>
</div>
</div>

<div class="ids-input">
<label for="input-height-large" class="ids-text label-text">Large</label>
<label for="input-height-large" class="ids-text ids-label-text">Large</label>
<div class="field-container field-height-lg">
<input class="ids-input-field" id="input-height-large" name="input-height-large"/>
</div>
Expand All @@ -130,42 +130,42 @@ <h2 class="ids-text ids-text-12">Ids Input - Sizes (Width)</h2>
<div class="ids-layout-grid-cell">

<div class="ids-input">
<label for="input-size-extra-small" class="ids-text label-text">Extra Small</label>
<label for="input-size-extra-small" class="ids-text ids-label-text">Extra Small</label>
<div class="field-container xs">
<input class="ids-input-field" id="input-size-extra-small" name="input-size-extra-small"/>
</div>
</div>

<div class="ids-input">
<label for="input-size-small" class="ids-text label-text">Small</label>
<label for="input-size-small" class="ids-text ids-label-text">Small</label>
<div class="field-container sm">
<input class="ids-input-field" id="input-size-small" name="input-size-small"/>
</div>
</div>

<div class="ids-input">
<label for="input-size-small-medium" class="ids-text label-text">Small - Medium</label>
<label for="input-size-small-medium" class="ids-text ids-label-text">Small - Medium</label>
<div class="field-container mm">
<input class="ids-input-field" id="input-size-small-medium" name="input-size-small-medium"/>
</div>
</div>

<div class="ids-input">
<label for="input-size-medium" class="ids-text label-text">Medium</label>
<label for="input-size-medium" class="ids-text ids-label-text">Medium</label>
<div class="field-container md">
<input class="ids-input-field" id="input-size-medium" name="input-size-medium"/>
</div>
</div>

<div class="ids-input">
<label for="input-size-large" class="ids-text label-text">Large</label>
<label for="input-size-large" class="ids-text ids-label-text">Large</label>
<div class="field-container lg">
<input class="ids-input-field" id="input-size-large" name="input-size-large"/>
</div>
</div>

<div class="ids-input">
<label for="input-size-full" class="ids-text label-text">Full</label>
<label for="input-size-full" class="ids-text ids-label-text">Full</label>
<div class="field-container full">
<input class="ids-input-field" id="input-size-full" name="input-size-full"/>
</div>
Expand Down
70 changes: 42 additions & 28 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/ids-base/ids-constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const props = {
KEEP_OPEN: 'keep-open',
LABEL: 'label',
LABEL_AUDIBLE: 'label-audible',
LABEL_HIDDEN: 'label-hidden',
LABEL_REQUIRED: 'label-required',
LABEL_FILETYPE: 'label-filetype',
MAX: 'max',
Expand Down
30 changes: 18 additions & 12 deletions src/ids-button/ids-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { IdsRenderLoopMixin, IdsRenderLoopItem } from '../ids-mixins/ids-render-

import styles from './ids-button.scss';

const { stringToBool } = stringUtils;

// Button Styles
const BUTTON_TYPES = [
'default',
Expand Down Expand Up @@ -88,10 +90,13 @@ class IdsButton extends mix(IdsElement).with(
switch (name) {
// Convert "tabindex" to "tabIndex"
case 'tabindex':
if (Number.isNaN(Number.parseInt(newValue))) {
this.tabIndex = null;
}
this.tabIndex = Number(newValue);
break;
default:
IdsElement.prototype.attributeChangedCallback.apply(this, [name, oldValue, newValue]);
super.attributeChangedCallback.apply(this, [name, oldValue, newValue]);
break;
}
}
Expand All @@ -106,7 +111,6 @@ class IdsButton extends mix(IdsElement).with(
this.setIconAlignment();
this.shouldUpdate = true;
super.connectedCallback();
this.setAttribute('role', 'button');
}

/**
Expand Down Expand Up @@ -286,16 +290,20 @@ class IdsButton extends mix(IdsElement).with(
* @param {boolean|string} val true if the button will be disabled
*/
set disabled(val) {
const isValueTruthy = stringToBool(val);
this.shouldUpdate = false;
this.removeAttribute(props.DISABLED);
this.shouldUpdate = true;
if (isValueTruthy) {
this.setAttribute(props.DISABLED, '');
} else {
this.removeAttribute(props.DISABLED);
}

const trueVal = stringUtils.stringToBool(val);
this.state.disabled = trueVal;
this.shouldUpdate = true;
this.state.disabled = isValueTruthy;

/* istanbul ignore next */
if (this.button) {
this.button.disabled = trueVal;
this.button.disabled = isValueTruthy;
}
}

Expand All @@ -309,17 +317,15 @@ class IdsButton extends mix(IdsElement).with(
* @returns {void}
*/
set tabIndex(val) {
// Remove the webcomponent tabIndex
this.shouldUpdate = false;
this.removeAttribute(props.TABINDEX);
this.shouldUpdate = true;

const trueVal = Number(val);

if (Number.isNaN(trueVal) || trueVal < -1) {
this.state.tabIndex = 0;
this.button.setAttribute(props.TABINDEX, '0');
this.removeAttribute(props.TABINDEX);
return;
}

this.state.tabIndex = trueVal;
this.button.setAttribute(props.TABINDEX, `${trueVal}`);
}
Expand Down
1 change: 1 addition & 0 deletions src/ids-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,5 +142,6 @@ The IDS Input component is now a WebComponent. Instead of using classes to defin
1. Can be consumed in NG/Vue/React (pull it in standalone/built see it works standalone)

## Accessibility Guidelines
There should be a label on all inputs to give an indication what the value means.

## Regional Considerations
Loading

0 comments on commit 1bb137e

Please sign in to comment.