Skip to content

Added tag types. #712

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

Merged
marcialfps merged 3 commits into from
Feb 24, 2022
Merged

Added tag types. #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7bbdb18
Added tag types.
raquelarrojo Feb 22, 2022
5962597
Change default size tag doc.
raquelarrojo Feb 22, 2022
21fc585
Some fixes tag types
raquelarrojo Feb 24, 2022
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
24 changes: 12 additions & 12 deletions ...mponents/examples/tag/properties/tag-table-properties/tag-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<td>Text to be placed next inside the tag.</td>
</tr>
<tr>
<td>labelPosition: string</td>
<td>labelPosition: 'before' | 'after'</td>
<td><code>'after'</code></td>
<td>Whether the label should appear after or before the icon.</td>
</tr>
Expand All @@ -38,22 +38,17 @@
"href". Component will show some visual feedback on hover.
</td>
</tr>
<tr>
<td>tabIndexValue: number</td>
<td><code>0</code></td>
<td>Value of the tabindex.</td>
</tr>
<tr>
<td>onClick: EventEmitter</td>
<td></td>
<td>
If defined, the tag will be displayed as a button. This function will be
called when the user clicks the tag. Component will show some visual
feedback on hover.
If defined, the tag will be displayed as a button. This event will emit in
case the user clicks the tag. Component will show some visual feedback on
hover.
</td>
</tr>
<tr>
<td>margin: any (string | object)</td>
<td>margin: string | object</td>
<td></td>
<td>
Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
Expand All @@ -63,8 +58,8 @@
</td>
</tr>
<tr>
<td>size: any (string | object)</td>
<td><code>'medium'</code></td>
<td>size: string</td>
<td><code>'fitContent'</code></td>
<td>
Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
'fitContent').
Expand All @@ -77,4 +72,9 @@
</td>
<td>If true, the page is opened in a new browser tab.</td>
</tr>
<tr>
<td>tabIndexValue: number</td>
<td><code>0</code></td>
<td>Value of the tabindex.</td>
</tr>
</dxc-table>
4 changes: 2 additions & 2 deletions projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { css } from "emotion";
import { CssUtils } from "../utils";
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";

type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
type Space =
| "xxsmall"
| "xsmall"
Expand Down Expand Up @@ -60,7 +59,8 @@ export class DxcBoxComponent implements OnInit {
/**
* Size of the component.
*/
@Input() size: Size = "fitContent";
@Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
"fitContent";
currentBackgroundColor;

sizes = {
Expand Down
8 changes: 4 additions & 4 deletions projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ The API properties are the following:
</tr>
<tr>
<td>@Input<br>iconBgColor: string</td>
<td><code>'black'</code></td>
<td><code>'#5f249f'</code></td>
<td>Background color of the icon section of the tag.</td>
</tr>
<tr>
Expand All @@ -70,7 +70,7 @@ The API properties are the following:
Component will show some visual feedback on hover.</td>
</tr>
<tr>
<td>@Input<br>margin: any (string | object)</td>
<td>@Input<br>margin: string | object</td>
<td></td>
<td>
Size of the margin to be applied to the component ('xxsmall' |
Expand All @@ -80,8 +80,8 @@ The API properties are the following:
</td>
</tr>
<tr>
<td>@Input<br>size: any (string | object)</td>
<td><code>'medium'</code></td>
<td>@Input<br>size: string</td>
<td><code>'fitContent'</code></td>
<td>Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').</td>
</tr>
<tr>
Expand Down
66 changes: 56 additions & 10 deletions projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,85 @@ import {
import { ContentChildren, ChangeDetectorRef } from "@angular/core";
import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component";

type Space =
| "xxsmall"
| "xsmall"
| "small"
| "medium"
| "large"
| "xlarge"
| "xxlarge";
type Margin = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};
@Component({
selector: "dxc-tag",
templateUrl: "./dxc-tag.component.html",
providers: [CssUtils],
})
export class DxcTagComponent implements OnInit {
isHovered = false;

@Input() size: string;
@Input() iconSrc: string;
@Input() iconBgColor: string;
/**
* Text to be placed next inside the tag.
*/
@Input() label: string;
@Input() labelPosition: string;
/**
* @deprecated URL of the icon.
*/
@Input() iconSrc: string;
/**
* Background color of the icon section of the tag.
*/
@Input() iconBgColor: string = "#5f249f";
/**
* Whether the label should appear after or before the icon.
*/
@Input() labelPosition: "before" | "after" = "after";
/**
* If defined, the tag will be displayed as an anchor, using this prop as "href".
* Component will show some visual feedback on hover.
*/
@Input() linkHref: string;
@Input() margin: any;
/**
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
*/
@Input() margin: Space | Margin;
/**
* If true, the page is opened in a new browser tab.
*/
@Input()
get newWindow(): boolean {
return this._newWindow;
}
set newWindow(value: boolean) {
this._newWindow = coerceBooleanProperty(value);
}
private _newWindow;
private _newWindow = false;
/**
* Size of the component.
*/
@Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
"fitContent";
/**
* Value of the tabindex.
*/
@Input()
get tabIndexValue(): number {
return this._tabIndexValue;
}
set tabIndexValue(value: number) {
this._tabIndexValue = coerceNumberProperty(value);
}
private _tabIndexValue;

@Output() onClick = new EventEmitter<any>();
private _tabIndexValue = 0;
/**
* If defined, the tag will be displayed as a button. This event will emit in case the user clicks the tag.
* Component will show some visual feedback on hover.
*/
@Output() onClick: EventEmitter<void> = new EventEmitter<void>();

isClickDefined = false;
shadowDepth: string;
Expand Down