Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(enhancement) bump styling to carbon 11 for form-entry engine #1

Merged
merged 1 commit into from
Aug 31, 2022
Merged

(enhancement) bump styling to carbon 11 for form-entry engine #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"src/assets"
],
"styles": [
"src/styles.css",
"src/styles.scss",
"projects/ngx-formentry/styles/ngx-formentry.css"
],
"stylePreprocessorOptions": {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"e2e": "ng e2e"
},
"peerDependencies": {
"carbon-components": "10.x"
"@carbon/styles": "1.x"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a dependency, not a peer dependency (it isn't provided at runtime).

},
"dependencies": {
"@angular-devkit/core": "^10.2.3",
Expand All @@ -27,6 +27,7 @@
"@angular/platform-browser": "^11.2.14",
"@angular/platform-browser-dynamic": "^11.2.14",
"@angular/router": "^11.2.14",
"@carbon/styles": "^1.11.0",
"@ng-select/ng-select": "^6.1.0",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
Expand Down Expand Up @@ -65,7 +66,6 @@
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"carbon-components": "^10.36.0",
"eslint": "^7.6.0",
"husky": "^4.3.0",
"jasmine-core": "~3.6.0",
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-formentry/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"shelljs": "^0.7.0",
"slick-carousel": "^1.6.0",
"tree-model": "^1.0.5",
"carbon-components": "^10.36.0",
"@carbon/styles": "^1.11.0",
"ngx-file-uploader": "^0.0.18",
"@angular-extensions/elements": "^12.6.0"
}
Expand Down
6 changes: 3 additions & 3 deletions projects/ngx-formentry/src/change-tracking/sample-form/sample-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@
>
</div>
<div class="form-row">
<button class="bx--btn bx--btn--primary" type="submit" [disabled]="!form.valid">Save</button>
<button class="bx--btn bx--btn--secondary" type="button" (click)="setControlOneValue()">
<button class="cds--btn cds--btn--primary" type="submit" [disabled]="!form.valid">Save</button>
<button class="cds--btn cds--btn--secondary" type="button" (click)="setControlOneValue()">
change value 1
</button>
<button class="bx--btn bx--btn--danger" type="button" (click)="removeControlNine()">
<button class="cds--btn cds--btn--danger" type="button" (click)="removeControlNine()">
remove control 9
</button>
</div>
Expand Down
20 changes: 10 additions & 10 deletions ...s/ngx-formentry/src/components/appointments-overview/appointments-overview.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<div *ngIf="showAppointments" class="container">
<div *ngIf="loadingAppointments">
<span *ngIf="!appointmentsLoaded && errorLoadingAppointments">Error checking appointments</span>
<div *ngIf="loadingAppointments" class="bx--inline-loading" aria-live="assertive">
<div class="bx--inline-loading__animation">
<div *ngIf="loadingAppointments" class="cds--inline-loading" aria-live="assertive">
<div class="cds--inline-loading__animation">
<div aria-atomic="true" aria-labelledby="loading-id-2" aria-live="assertive"
class="bx--loading bx--loading--small">
<label id="loading-id-2" class="bx--visually-hidden">Active loading indicator</label><svg
class="bx--loading__svg" viewBox="0 0 100 100">
class="cds--loading cds--loading--small">
<label id="loading-id-2" class="cds--visually-hidden">Active loading indicator</label><svg
class="cds--loading__svg" viewBox="0 0 100 100">
<title>Active loading indicator</title>
<circle class="bx--loading__background" cx="50%" cy="50%" r="44"></circle>
<circle class="bx--loading__stroke" cx="50%" cy="50%" r="44"></circle>
<circle class="cds--loading__background" cx="50%" cy="50%" r="44"></circle>
<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44"></circle>
</svg>
</div>
</div>
<div class="bx--inline-loading__text">Loading...</div>
<div class="cds--inline-loading__text">Loading...</div>
</div>
</div>

<div class="bx--data-table-content" *ngIf="appointmentsLoaded && !errorLoadingAppointments">
<table class="bx--data-table bx--data-table--no-border">
<div class="cds--data-table-content" *ngIf="appointmentsLoaded && !errorLoadingAppointments">
<table class="cds--data-table cds--data-table--no-border">
<thead>
<tr>
<th *ngFor="let appointment of appointments" scope="col" [ngClass]="{ active: appointment.date === today }">
Expand Down
10 changes: 5 additions & 5 deletions projects/ngx-formentry/src/components/check-box/checkbox.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<fieldset class="bx--fieldset">
<div class="bx--form-item bx--checkbox-wrapper" *ngFor="let option of options; let i = index">
<input type="checkbox" class="bx--checkbox" [id]="i + 'id'" [checked]="option.checked" (change)="selectOpt(option, $event)" [value]="option.value">
<label [for]="i + 'id'" class="bx--checkbox-label">
<span class="bx--checkbox-label-text">{{ option.label }}</span>
<fieldset class="cds--fieldset">
<div class="cds--form-item cds--checkbox-wrapper" *ngFor="let option of options; let i = index">
<input type="checkbox" class="cds--checkbox" [id]="i + 'id'" [checked]="option.checked" (change)="selectOpt(option, $event)" [value]="option.value">
<label [for]="i + 'id'" class="cds--checkbox-label">
<span class="cds--checkbox-label-text">{{ option.label }}</span>
</label>
</div>
</fieldset>
14 changes: 7 additions & 7 deletions projects/ngx-formentry/src/components/input/input.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,19 @@ export class TextInput {
*/
@Input() size: 'sm' | 'md' | 'xl' = 'md';

@HostBinding('class.bx--text-input') inputClass = true;
@HostBinding('class.bx--text-input--xl') get isSizeXl() {
@HostBinding('class.cds--text-input') inputClass = true;
@HostBinding('class.cds--text-input--xl') get isSizeXl() {
return this.size === 'xl';
}
@HostBinding('class.bx--text-input--sm') get isSizeSm() {
@HostBinding('class.cds--text-input--sm') get isSizeSm() {
return this.size === 'sm';
}
@HostBinding('class.bx--text-input--invalid') @Input() invalid = false;
@HostBinding('class.bx--text-input__field-wrapper--warning')
@HostBinding('class.cds--text-input--invalid') @Input() invalid = false;
@HostBinding('class.cds--text-input__field-wrapper--warning')
@Input()
warn = false;
@HostBinding('class.bx--skeleton') @Input() skeleton = false;
@HostBinding('class.bx--text-input--light') get isLightTheme() {
@HostBinding('class.cds--skeleton') @Input() skeleton = false;
@HostBinding('class.cds--text-input--light') get isLightTheme() {
return this.theme === 'light';
}
}
20 changes: 10 additions & 10 deletions projects/ngx-formentry/src/components/input/label.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,17 @@ import { TextArea } from './text-area.directive';
<label
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="bx--label"
class="cds--label"
[ngClass]="{
'bx--skeleton': skeleton
'cds--skeleton': skeleton
}"
>
<ng-content></ng-content>
</label>
<div
[class]="wrapperClass"
[ngClass]="{
'bx--text-input__field-wrapper--warning': warn
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="invalid ? true : null"
#wrapper
Expand All @@ -62,7 +62,7 @@ import { TextArea } from './text-area.directive';
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg"
class="bx--text-input__invalid-icon"
class="cds--text-input__invalid-icon"
width="16"
height="16"
viewBox="0 0 16 16"
Expand All @@ -81,7 +81,7 @@ import { TextArea } from './text-area.directive';
</div>
<div
*ngIf="!skeleton && helperText && !invalid && !warn"
class="bx--form__helper-text"
class="cds--form__helper-text"
>
<ng-container *ngIf="!isTemplate(helperText)">{{
helperText
Expand All @@ -91,7 +91,7 @@ import { TextArea } from './text-area.directive';
[ngTemplateOutlet]="helperText"
></ng-template>
</div>
<div *ngIf="!warn && invalid" class="bx--form-requirement">
<div *ngIf="!warn && invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{
invalidText
}}</ng-container>
Expand All @@ -100,7 +100,7 @@ import { TextArea } from './text-area.directive';
[ngTemplateOutlet]="invalidText"
></ng-template>
</div>
<div *ngIf="!invalid && warn" class="bx--form-requirement">
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
<ng-template
*ngIf="isTemplate(warnText)"
Expand All @@ -117,7 +117,7 @@ export class Label implements AfterContentInit, AfterViewInit {
/**
* The class of the wrapper
*/
wrapperClass = 'bx--text-input__field-wrapper';
wrapperClass = 'cds--text-input__field-wrapper';
/**
* The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
* its input counterpart through the 'for' attribute.
Expand Down Expand Up @@ -163,7 +163,7 @@ export class Label implements AfterContentInit, AfterViewInit {
// @ts-ignore
@ContentChild(TextArea, { static: false }) textArea: TextArea;

@HostBinding('class.bx--form-item') labelClass = true;
@HostBinding('class.cds--form-item') labelClass = true;

/**
* Creates an instance of Label.
Expand All @@ -177,7 +177,7 @@ export class Label implements AfterContentInit, AfterViewInit {
*/
ngAfterContentInit() {
if (this.textArea) {
this.wrapperClass = 'bx--text-area__wrapper';
this.wrapperClass = 'cds--text-area__wrapper';
}
}

Expand Down
8 changes: 4 additions & 4 deletions projects/ngx-formentry/src/components/input/text-area.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ export class TextArea {
*/
@Input() theme: 'light' | 'dark' = 'dark';

@HostBinding('class.bx--text-area') baseClass = true;
@HostBinding('class.bx--text-area--invalid') @Input() invalid = false;
@HostBinding('class.bx--skeleton') @Input() skeleton = false;
@HostBinding('class.bx--text-area--light') get isLightTheme() {
@HostBinding('class.cds--text-area') baseClass = true;
@HostBinding('class.cds--text-area--invalid') @Input() invalid = false;
@HostBinding('class.cds--skeleton') @Input() skeleton = false;
@HostBinding('class.cds--text-area--light') get isLightTheme() {
return this.theme === 'light';
}
}
24 changes: 12 additions & 12 deletions projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div class="date-time-picker-container">
<div data-date-picker data-date-picker-type="single"
class="bx--date-picker bx--date-picker--single bx--date-picker--light" [ngClass]="{
'bx--date-picker--light': theme === 'light'
class="cds--date-picker cds--date-picker--single cds--date-picker--light" [ngClass]="{
'cds--date-picker--light': theme === 'light'
}">
<div class="bx--date-picker-container fill">
<div class="bx--date-picker-input__wrapper">
<div class="cds--date-picker-container fill">
<div class="cds--date-picker-input__wrapper">
<input [disabled]="isDisabled" (dateTimeChange)="onInput($event)" type="text"
class="bx--date-picker__input fill" [id]="id" [value]="value" [owlDateTime]="dt1"
class="cds--date-picker__input fill" [id]="id" [value]="value" [owlDateTime]="dt1"
[owlDateTimeTrigger]="dt1" placeholder="mm/dd/yyyy" data-date-picker-input />
<svg [owlDateTimeTrigger]="dt1" focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="bx--date-picker__icon"
xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="cds--date-picker__icon"
width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path
d="M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z">
Expand All @@ -20,16 +20,16 @@
</div>


<div *ngIf="showWeeks" class="bx--select some-class week-select-wrapper" [ngClass]="{'bx--select--light': theme === 'light'}">
<div class="bx--select-input__wrapper">
<select (change)="onWeeksSelected($event.target.value)" id="select-1" class="bx--select-input">
<option class="bx--select-option" value="placeholder-item" disabled="" hidden="" selected="">Select
<div *ngIf="showWeeks" class="cds--select some-class week-select-wrapper" [ngClass]="{'cds--select--light': theme === 'light'}">
<div class="cds--select-input__wrapper">
<select (change)="onWeeksSelected($event.target.value)" id="select-1" class="cds--select-input">
<option class="cds--select-option" value="placeholder-item" disabled="" hidden="" selected="">Select
Weeks</option>
<option class="bx--select-option" [value]="week" *ngFor="let week of weeks">{{week}} Weeks</option>
<option class="cds--select-option" [value]="week" *ngFor="let week of weeks">{{week}} Weeks</option>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"
class="bx--select__arrow">
class="cds--select__arrow">
<path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
</svg>
</div>
Expand Down
34 changes: 17 additions & 17 deletions projects/ngx-formentry/src/components/number-input/number-input.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
<div data-numberinput [attr.data-invalid]="invalid ? true : null" class="bx--number" [ngClass]="{
'bx--number--light': theme === 'light',
'bx--number--nolabel': !label,
'bx--number--helpertext': helperText,
'bx--skeleton': skeleton,
'bx--number--sm': size === 'sm',
'bx--number--xl': size === 'xl'
<div data-numberinput [attr.data-invalid]="invalid ? true : null" class="cds--number" [ngClass]="{
'cds--number--light': theme === 'light',
'cds--number--nolabel': !label,
'cds--number--helpertext': helperText,
'cds--skeleton': skeleton,
'cds--number--sm': size === 'sm',
'cds--number--xl': size === 'xl'
}">
<div class="bx--number__input-wrapper" [ngClass]="{
'bx--number__input-wrapper--warning': warn
<div class="cds--number__input-wrapper" [ngClass]="{
'cds--number__input-wrapper--warning': warn
}">
<input type="number" [id]="id" [value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step"
[disabled]="disabled" [required]="required" (input)="onNumberInputChange($event)" />
<div class="bx--number__controls">
<button type="button" class="bx--number__control-btn down-icon" (click)="onDecrement()" title="Decrement number"
<div class="cds--number__controls">
<button type="button" class="cds--number__control-btn down-icon" (click)="onDecrement()" title="Decrement number"
[attr.aria-label]="decrementLabel" tabindex="-1">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="down-icon">
<path d="M8 15H24V17H8z"></path>
</svg>
</button>
<div class="bx--number__rule-divider"></div>
<button type="button" class="bx--number__control-btn up-icon" (click)="onIncrement()" title="Increment number"
<div class="cds--number__rule-divider"></div>
<button type="button" class="cds--number__control-btn up-icon" (click)="onIncrement()" title="Increment number"
[attr.aria-label]="incrementLabel" tabindex="-1">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="up-icon">
<path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path>
</svg>
</button>
<div class="bx--number__rule-divider"></div>
<div class="cds--number__rule-divider"></div>
</div>
</div>
<div *ngIf="helperText && !invalid && !warn" class="bx--form__helper-text">
<div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text">
<ng-container *ngIf="!isTemplate(helperText)">{{
helperText
}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="!warn && invalid" class="bx--form-requirement">
<div *ngIf="!warn && invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{
invalidText
}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="bx--form-requirement">
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-formentry/src/components/select/optgroup.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ import { Directive, HostBinding } from '@angular/core';
selector: 'optgroup'
})
export class OptGroup {
@HostBinding('class') inputClass = 'bx--select-optgroup';
@HostBinding('class') inputClass = 'cds--select-optgroup';
}
2 changes: 1 addition & 1 deletion projects/ngx-formentry/src/components/select/option.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ import { Directive, HostBinding } from '@angular/core';
selector: 'option'
})
export class Option {
@HostBinding('class') inputClass = 'bx--select-option';
@HostBinding('class') inputClass = 'cds--select-option';
}
Loading