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

Migrated dnn-color-input and dnn-input in new dnn-fieldset #1016

Merged
merged 1 commit into from
Mar 11, 2024
Merged

Migrated dnn-color-input and dnn-input in new dnn-fieldset #1016

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
85 changes: 3 additions & 82 deletions packages/stencil-library/licenses.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,15 @@
{
"@babel/code-frame@7.12.11": {
"licenses": "MIT",
"repository": "https://github.com/babel/babel",
"publisher": "Sebastian McKenzie",
"email": "sebmck@gmail.com",
"path": "node_modules\\@babel\\code-frame",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@babel\\code-frame\\LICENSE"
},
"@dnncommunity/dnn-elements@0.23.3-alpha.7": {
"licenses": "MIT",
"repository": "https://github.com/dnncommunity/dnn-elements",
"path": "",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md"
},
"@eslint/eslintrc@0.4.3": {
"licenses": "MIT",
"repository": "https://github.com/eslint/eslintrc",
"publisher": "Nicholas C. Zakas",
"path": "node_modules\\@eslint\\eslintrc",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@eslint\\eslintrc\\LICENSE"
},
"@humanwhocodes/config-array@0.5.0": {
"licenses": "Apache-2.0",
"repository": "https://github.com/humanwhocodes/config-array",
"publisher": "Nicholas C. Zakas",
"path": "node_modules\\@humanwhocodes\\config-array",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@humanwhocodes\\config-array\\LICENSE"
},
"@stencil/eslint-plugin@0.4.0": {
"licenses": "MIT",
"repository": "https://github.com/ionic-team/stencil-eslint",
"path": "node_modules\\@stencil\\eslint-plugin",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@stencil\\eslint-plugin\\LICENSE.md"
},
"eslint-utils@2.1.0": {
"licenses": "MIT",
"repository": "https://github.com/mysticatea/eslint-utils",
"publisher": "Toru Nagashima",
"path": "node_modules\\eslint\\node_modules\\eslint-utils",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\node_modules\\eslint-utils\\LICENSE"
},
"eslint-visitor-keys@1.3.0": {
"licenses": "Apache-2.0",
"repository": "https://github.com/eslint/eslint-visitor-keys",
"publisher": "Toru Nagashima",
"path": "node_modules\\espree\\node_modules\\eslint-visitor-keys",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\node_modules\\eslint-visitor-keys\\LICENSE"
},
"eslint@7.32.0": {
"licenses": "MIT",
"repository": "https://github.com/eslint/eslint",
"publisher": "Nicholas C. Zakas",
"email": "nicholas+npm@nczconsulting.com",
"path": "node_modules\\eslint",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\LICENSE"
},
"espree@7.3.1": {
"licenses": "BSD-2-Clause",
"repository": "https://github.com/eslint/espree",
"publisher": "Nicholas C. Zakas",
"email": "nicholas+npm@nczconsulting.com",
"path": "node_modules\\espree",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\LICENSE"
},
"ignore@4.0.6": {
"licenses": "MIT",
"repository": "https://github.com/kaelzhang/node-ignore",
"publisher": "kael",
"path": "node_modules\\ignore",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\ignore\\LICENSE-MIT"
},
"tslib@1.14.1": {
"licenses": "0BSD",
"repository": "https://github.com/Microsoft/tslib",
"publisher": "Microsoft Corp.",
"path": "node_modules\\tslib",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tslib\\LICENSE.txt"
},
"tsutils@3.0.0": {
"licenses": "MIT",
"repository": "https://github.com/ajafff/tsutils",
"publisher": "Klaus Meinhardt",
"path": "node_modules\\tsutils",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tsutils\\LICENSE"
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md"
},
"typescript@4.9.5": {
"typescript@5.2.2": {
"licenses": "Apache-2.0",
"repository": "https://github.com/Microsoft/TypeScript",
"publisher": "Microsoft Corp.",
"path": "node_modules\\typescript",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
}
}
4 changes: 2 additions & 2 deletions packages/stencil-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ export namespace Components {
*/
"checkValidity": () => Promise<ValidityState>;
/**
* If true, the browser default validation message will be hidden.
* @deprecated This control has it's own validation reporting, will be removed in v0.25.0
*/
"disableValidityReporting": boolean;
/**
Expand Down Expand Up @@ -1405,7 +1405,7 @@ declare namespace LocalJSX {
*/
"autocomplete"?: string;
/**
* If true, the browser default validation message will be hidden.
* @deprecated This control has it's own validation reporting, will be removed in v0.25.0
*/
"disableValidityReporting"?: boolean;
/**
Expand Down
52 changes: 17 additions & 35 deletions packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,46 +16,28 @@
/** @prop --contast-text-align: Allows customizing the text alignment of the contast indicator text. */
--contast-text-align: left;
}
dnn-fieldset{
width: 100%;
}

.container{
border: 1px solid var(--foreground, #000);
border-radius: var(--control-radius, 3px);
padding: 0.75em;
.inner-container{
display: flex;
justify-content: space-between;
gap: 0.1em;
position: relative;
width: 100%;
background-color: var(--background);
.inner-container{
display: flex;
justify-content: space-between;
position: relative;
width: 100%;
background-color: var(--background);
}
label{
display: inline-block;
position: absolute;
left: 0.5em;
top: -1.5em;
padding: 0 0.5em;
background-color: var(--background);
white-space: nowrap;
max-width: 100%;
border-radius: var(--control-radius);
font-size: 1em;
}
button{
margin: 0 0 0 1em;
padding: 0;
border: none;
background-color: transparent;
width: 1em;
height: 1em;
svg{
fill: var(--dnn-color-primary);
transform: scale(1.5);
}
}

button{
margin: 0 0 0 1em;
padding: 0;
border: none;
background-color: transparent;
width: 1em;
height: 1em;
svg{
fill: var(--dnn-color-primary);
transform: scale(1.5);
}
}

Expand Down
30 changes: 11 additions & 19 deletions packages/stencil-library/src/components/dnn-color-input/dnn-color-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export class DnnColorInput {
@Event() colorInput: EventEmitter<DnnColorInfo>;

@State() currentColor: DnnColorInfo;
@State() focused: boolean;

@AttachInternals() internals: ElementInternals;

Expand Down Expand Up @@ -101,6 +102,7 @@ export class DnnColorInput {
this.setFormValue();
}

// eslint-disable-next-line @stencil-community/own-methods-must-be-private
formResetCallback() {
this.internals.setValidity({});
this.color = this.originalColor.color;
Expand All @@ -119,17 +121,6 @@ export class DnnColorInput {

private labelId: string;

private getContainerClasses() {
const classes: string[] = ["container"];

if (this.readonly)
{
classes.push("disabled");
}

return classes.join(" ");
}

private showPicker(): void {
this.currentColor = {
color: this.color,
Expand All @@ -150,7 +141,7 @@ export class DnnColorInput {
}

private setFormValue(){
if (this.name){
if (this.name != undefined){
var formData = new FormData();
formData.append(this.name, JSON.stringify(this.currentColor));
this.internals.setFormValue(formData);
Expand All @@ -160,13 +151,13 @@ export class DnnColorInput {
render() {
return (
<Host>
<div
class={this.getContainerClasses()}
<dnn-fieldset
label={this.label}
id={this.labelId}
focused={this.focused}
helpText={this.helpText}
>
<div class="inner-container">
<label id={this.labelId}>
{this.label}
</label>
<slot name="prefix"></slot>
<div class="color-preview">
{this.useLightColor &&
Expand All @@ -191,6 +182,8 @@ export class DnnColorInput {
<button
aria-labelledby={this.labelId}
onClick={() => this.showPicker()}
onFocus={() => this.focused = true}
onBlur={() => this.focused = false}
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -202,8 +195,7 @@ export class DnnColorInput {
}
<slot name="suffix"></slot>
</div>
</div>
<div class="help-text">{this.helpText}</div>
</dnn-fieldset>
<dnn-modal ref={el => this.colorModal = el} backdropDismiss={false}>
{this.currentColor &&
<div class="modal-content">
Expand Down
36 changes: 18 additions & 18 deletions packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,35 @@
display: inline-block;

/** @prop --foreground: Defines the foreground color. */
--foreground: var(--dnn-color-foreground, #000);
--fieldset-foreground: var(--dnn-color-foreground, #000);

/** @prop --background: Defines the background color. */
--background: var(--dnn-color-background, #fff);
--fieldset-background: var(--dnn-color-background, #fff);

/** @prop --focus-color: Defines the color when the component is focused. */
--focus-color: var(--dnn-color-primary, #3792ED);
--fieldset-focus-color: var(--dnn-color-primary, #3792ED);

/** @prop --danger-color: Defines the danger color used for invalid data. */
--danger-color: var(--dnn-color-danger, #900);
--fieldset-danger-color: var(--dnn-color-danger, #900);

/** @prop --control-radius: Defines the radius for the control corners. */
--control-radius: var(--dnn-controls-radius, 3px);
--fieldset-control-radius: var(--dnn-controls-radius, 3px);
}

.container{
border: 1px solid var(--foreground, #000);
border-radius: var(--control-radius, 3px);
border: 1px solid var(--fieldset-foreground, #000);
border-radius: var(--fieldset-control-radius, 3px);
padding: 0.75em;
display: flex;
justify-content: space-between;
gap: 0.1em;
position: relative;
background-color: var(--background);
background-color: var(--fieldset-background);
margin-top: 1em;
.inner-container{
position: relative;
width: 100%;
background-color: var(--background);
background-color: var(--fieldset-background);
}
label{
display: inline-flex;
Expand All @@ -40,21 +40,21 @@
left: 0.5em;
top: -1.5em;
padding: 0 0.5em;
background-color: var(--background);
background-color: var(--fieldset-background);
white-space: nowrap;
max-width: 100%;
border-radius: var(--control-radius);
border-radius: var(--fieldset-control-radius);
font-size: 1em;
}
&.focused{
border: 1px solid var(--focus-color);
box-shadow: 0 0 0 1px var(--focus-color);
border: 1px solid var(--fieldset-focus-color);
box-shadow: 0 0 0 1px var(--fieldset-focus-color);
&.invalid{
border: 1px solid var(--danger-color);
box-shadow: 0 0 0 1px var(--danger-color);
border: 1px solid var(--fieldset-danger-color);
box-shadow: 0 0 0 1px var(--fieldset-danger-color);
}
input{
color: var(--foreground, #000);
color: var(--fieldset-foreground, #000);
}
}
&.float-label{
Expand All @@ -68,7 +68,7 @@
opacity: 0.5;
}
&.invalid{
border-color: var(--danger-color);
border-color: var(--fieldset-danger-color);
}
}

Expand All @@ -79,7 +79,7 @@
margin: 0.25em;
}
.error-message{
color: var(--danger-color);
color: var(--fieldset-danger-color);
font-style: normal;
font-weight: bold;
}
7 changes: 3 additions & 4 deletions packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,10 @@ export class DnnFieldset {
/** Sets the validity of the field. */
@Method()
async setValidity(valid: boolean, message?: string) {
this.valid = valid;
this.invalid = !valid;
this.customValidityMessage = message;
}

@State() valid: boolean = true;
@State() customValidityMessage: string;

private getContainerClasses() {
Expand Down Expand Up @@ -113,12 +112,12 @@ export class DnnFieldset {
<slot></slot>
</div>
</div>
{!this.valid && this.customValidityMessage &&
{this.invalid && this.customValidityMessage &&
<div class="error-message">
{this.customValidityMessage}
</div>
}
{this.valid &&
{!this.invalid &&
<div class="help-text">{this.helpText}</div>
}
</Host>
Expand Down
Loading
Loading