Skip to content

Documentation fixes #688

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
merged 3 commits into from
Feb 15, 2022
Merged

Documentation fixes #688

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ad57dc
Fix type comments indicating margin values
marcialfps Feb 14, 2022
f8c6027
Fix prop types in documentation
marcialfps Feb 14, 2022
0c700b7
Events description fix
marcialfps Feb 15, 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
51 changes: 28 additions & 23 deletions ...app/components/examples/alert/properties/alert-properties/alert-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,41 @@
<dxc-heading [level]="4" weight="normal" text="Properties" [margin]="{bottom:'small'}"></dxc-heading>
<dxc-heading
[level]="4"
weight="normal"
text="Properties"
[margin]="{ bottom: 'small' }"
></dxc-heading>
<dxc-table>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>type: string ('info' | 'confirm' | 'warning' | 'error')</td>
<td>type: 'info' | 'confirm' | 'warning' | 'error'</td>
<td>
<code>'info'</code>
</td>
<td>Uses on of the available alert types.</td>
</tr>
<tr>
<td>mode: string ('inline' | 'modal')</td>
<td>mode: 'inline' | 'modal'</td>
<td>
<code>'inline'</code>
</td>
<td>
Uses on of the available alert modes:
<ul>
<li>
<strong>inline:</strong> If onClose function is received, close
button will be visible and the function will be executed when it's
clicked. There is no overlay layer. Position should be decided by
the user.
<strong>inline:</strong> If onClose function is received, close button
will be visible and the function will be executed when it's clicked.
There is no overlay layer. Position should be decided by the user.
</li>
<li>
<strong>modal:</strong> The alert will be displayed in the middle
of the screen with an overlay layer behind. The onClose function
will be executed when the X button or the overlay is clicked. The
user has the responsibility of hidding the modal in the onClose
function, otherwise the modal will remain visible.
<strong>modal:</strong> The alert will be displayed in the middle of
the screen with an overlay layer behind. The onClose function will be
executed when the X button or the overlay is clicked. The user has the
responsibility of hidding the modal in the onClose function, otherwise
the modal will remain visible.
</li>
</ul>
</td>
Expand All @@ -44,9 +48,7 @@
<tr>
<td>tabIndexValue: number</td>
<td><code>0</code></td>
<td>
Tabindex value given to the close button.
</td>
<td>Tabindex value given to the close button.</td>
</tr>
<tr>
<td>onClose: EventEmitter</td>
Expand All @@ -57,20 +59,23 @@
</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' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
can pass an object with 'top', 'bottom', 'left' and 'right' properties
in order to specify different margin sizes.
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.
</td>
</tr>
<tr>
<td>size: any (string | object)</td>
<td>size: string</td>
<td>
<code>'fitContent'</code>
</td>
<td>Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').</td>
<td>
Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
'fitContent').
</td>
</tr>
</dxc-table>
</dxc-table>
16 changes: 7 additions & 9 deletions ...nents/examples/card/properties/card-table-properties/card-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<td>Color of the image background.</td>
</tr>
<tr>
<td>imagePadding: any (string | object)</td>
<td>imagePadding: string | object</td>
<td></td>
<td>
Size of the padding to be applied to the image section of the component
Expand All @@ -31,14 +31,14 @@
</td>
</tr>
<tr>
<td>imagePosition: string ('after' | 'before')</td>
<td>imagePosition: 'after' | 'before'</td>
<td>
<code>'before'</code>
</td>
<td>Whether the image should appear in relation to the content.</td>
</tr>
<tr>
<td>contentPadding: any (string | object)</td>
<td>contentPadding: string | object</td>
<td></td>
<td>
Size of the padding to be applied to the content section of the component
Expand All @@ -59,8 +59,8 @@
<td>onClick: EventEmitter</td>
<td></td>
<td>
This event will emit when the user clicks the card. Component will
show some visual feedback on hover.
This event will emit when the user clicks the card. Component will show
some visual feedback on hover.
</td>
</tr>
<tr>
Expand All @@ -69,7 +69,7 @@
<td>Whether the image must cover the whole image area of the card.</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 @@ -86,8 +86,6 @@
<tr>
<td>outlined: boolean</td>
<td><code>true</code></td>
<td>Whether the card must be outlined.
</td>
<td>Whether the card must be outlined.</td>
</tr>

</dxc-table>
4 changes: 2 additions & 2 deletions .../src/app/components/examples/dropdown/properties/dropdown-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<td>Whether the arrow next to the label is displayed or not.</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 @@ -50,7 +50,7 @@
</tr>
<tr>
<td>size: string</td>
<td><code>'fitContent' </code></td>
<td><code>'fitContent'</code></td>
<td>
Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
'fitContent').
Expand Down
2 changes: 1 addition & 1 deletion ...examples/header/properties/header-table-properties/header-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
</td>
</tr>
<tr>
<td>padding: any (string | object)</td>
<td>padding: string | object</td>
<td></td>
<td>
Size of the padding to be applied to the custom area of the component
Expand Down
177 changes: 91 additions & 86 deletions ...app/components/examples/radio/properties/radio-properties/radio-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,93 @@
<dxc-heading [level]="4" weight="normal" text="Properties" [margin]="{bottom:'small'}"></dxc-heading>
<dxc-heading
[level]="4"
weight="normal"
text="Properties"
[margin]="{ bottom: 'small' }"
></dxc-heading>
<dxc-table>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>checked: boolean</td>
<td>
<code>false</code>
</td>
<td>
If true, the radio is selected. If undefined the component will be
uncontrolled and the value will be managed internally by the
component.
</td>
</tr>
<tr>
<td>value: any</td>
<td></td>
<td>
Will be passed to the value attribute of the html input element.
When inside a form, this value will be only submitted if the radio is checked.
</td>
</tr>
<tr>
<td>label: string</td>
<td></td>
<td>Text to be placed next to the radio.</td>
</tr>
<tr>
<td>labelPosition: string ('before' | 'after')</td>
<td>
<code>'before'</code>
</td>
<td>Whether the label should appear after or before the radio.</td>
</tr>
<tr>
<td>name: string</td>
<td></td>
<td>Name attribute of the input element.</td>
</tr>
<tr>
<td>disabled: boolean</td>
<td>
<code>false</code>
</td>
<td>If true, the component will be disabled.</td>
</tr>
<tr>
<td>required: boolean</td>
<td>
<code>false</code>
</td>
<td>
If true, the radio will change its appearence, showing that the value
is required.
</td>
</tr>
<tr>
<td>onChange: EventEmitter</td>
<td></td>
<td>
This function will be called when the user clicks the radio. The new
value will be passed as a parameter.
</td>
</tr>
<tr>
<td>margin: any (string | object)</td>
<td></td>
<td>
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.
</td>
</tr>
<tr>
<td>size: any (string | object)</td>
<td>
<code>'fitContent'</code>
</td>
<td>
Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
</td>
</tr>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>checked: boolean</td>
<td>
<code>false</code>
</td>
<td>
If true, the radio is selected. If undefined the component will be
uncontrolled and the value will be managed internally by the component.
</td>
</tr>
<tr>
<td>value: string</td>
<td></td>
<td>
Will be passed to the value attribute of the html input element. When
inside a form, this value will be only submitted if the radio is checked.
</td>
</tr>
<tr>
<td>label: string</td>
<td></td>
<td>Text to be placed next to the radio.</td>
</tr>
<tr>
<td>labelPosition: 'before' | 'after'</td>
<td>
<code>'before'</code>
</td>
<td>Whether the label should appear after or before the radio.</td>
</tr>
<tr>
<td>name: string</td>
<td></td>
<td>Name attribute of the input element.</td>
</tr>
<tr>
<td>disabled: boolean</td>
<td>
<code>false</code>
</td>
<td>If true, the component will be disabled.</td>
</tr>
<tr>
<td>required: boolean</td>
<td>
<code>false</code>
</td>
<td>
If true, the radio will change its appearence, showing that the value is
required.
</td>
</tr>
<tr>
<td>onChange: EventEmitter</td>
<td></td>
<td>
This function will be called when the user clicks the radio. The new value
will be passed as a parameter.
</td>
</tr>
<tr>
<td>margin: string | object</td>
<td></td>
<td>
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.
</td>
</tr>
<tr>
<td>size: string</td>
<td>
<code>'fitContent'</code>
</td>
<td>
Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
'fitContent').
</td>
</tr>
</dxc-table>
4 changes: 2 additions & 2 deletions ...cdk-site/src/app/components/examples/tabs/properties/tabs-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
<td>The index of the active tab.</td>
</tr>
<tr>
<td>iconPosition: string ('top' | 'left')</td>
<td>iconPosition: 'top' | 'left'</td>
<td><code>'left'</code></td>
<td>Position of icons in tabs.</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 Down
7 changes: 4 additions & 3 deletions projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,10 @@ export class DxcAlertComponent implements OnChanges {
@Output() onClose: EventEmitter<void> = new EventEmitter<void>();

/**
* Size of the margin to be applied to the component. You can pass an object with
* 'top', 'bottom', 'left' and 'right' properties in order to specify different
* margin sizes.
* 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;

Expand Down
Loading