Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
407a2b9
Add note for the absence of the size small
aweell Jan 20, 2022
d5c99aa
Merge pull request #677 from dxc-technology/component-date
aweell Jan 20, 2022
93bc49a
Add component template
aweell Jan 20, 2022
a974203
Add description and usage section
aweell Jan 20, 2022
b46a407
Add anatomy section
aweell Jan 21, 2022
0b6c58b
Update specs
aweell Jan 21, 2022
19aa979
Update spacing values
aweell Jan 21, 2022
fd48cd8
Merge pull request #682 from dxc-technology/principles-spacing
aweell Jan 21, 2022
bb6ac05
Add miniature
aweell Jan 21, 2022
de2218e
Update UI-Kit version
aweell Jan 21, 2022
65fd125
Merge pull request #681 from dxc-technology/component-paginator
aweell Jan 24, 2022
b447237
Update `hamburguerHoverColor` token value
aweell Jan 31, 2022
cba916e
Merge pull request #687 from dxc-technology/component-header
aweell Jan 31, 2022
6647313
Update component tokens
aweell Feb 3, 2022
f5833de
Fix typos
aweell Feb 3, 2022
98f4496
Merge pull request #692 from dxc-technology/component-switch
aweell Feb 7, 2022
6f59d8c
Update slider tokens and images
aweell Feb 8, 2022
a2013ec
Merge pull request #694 from dxc-technology/component-slider
aweell Feb 10, 2022
835f5a4
Update UI-Kit component and doc images
aweell Feb 10, 2022
d697246
Update fileItem action :focus and dnd dragover box-shadow
aweell Feb 10, 2022
14205ac
Update button label of single-file variant
aweell Feb 15, 2022
6f8de99
Merge pull request #698 from dxc-technology/component-file-input
aweell Feb 15, 2022
cb73305
Update dialog content section copy
aweell Feb 15, 2022
4e3f58b
Merge pull request #701 from dxc-technology/component-dialog
aweell Feb 15, 2022
47edd60
Update CHANGELOG.md with latest version
aweell Feb 15, 2022
8fef0bc
Update UI-kit 4.1.0 with latest changes
aweell 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
31 changes: 31 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,36 @@
# Changelog

## 4.0.0 (12/01/2022)
## What's Changed


* [Inputs] Add new inputs documentation pages by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/651
* [Header] Add contentColor token by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/652
* [Docs] Deprecated component alert message by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/654
* [File-input] Add component documentation by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/655
* [Select] Add component update to release branch by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/660
* [Docs] Fixes for release 4.0.0 by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/657




**Full Changelog**: https://github.com/dxc-technology/halstack-style-guide/compare/3.14.0...4.0.0
---

## 3.14.0 (15/12/2021)
## What's Changed
* [Button] Documentation accessibility references by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/633
* Add neutral transparent color palette by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/630
* Add contributing/overview folder by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/637
* Update typography documentation by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/639
* [Principles] Type tokens for code tags and accessibility by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/640
* [Contributing] Add overview and updated catalog by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/641
* [Contributing] Add docs to DS guidelines by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/642


**Full Changelog**: https://github.com/dxc-technology/halstack-style-guide/compare/3.13.0...3.14.0
---

## 3.13.0 (26/11/2021)
## What's Changed
* [Contribution] Update feedback section by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/622
Expand Down
Binary file added Halstack UI-Kit/UI_kit_Halstack_v4.1.0.xd
Binary file not shown.
Binary file modified contributing/assets/components/input_file_images.xd
Binary file not shown.
Binary file not shown.
Binary file modified contributing/assets/components/slider_images.xd
Binary file not shown.
18 changes: 9 additions & 9 deletions guidelines/components/accordion/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -190,19 +190,19 @@ _Component design specifications_

| Component token | Element | Core token | Value |
| :------------------------------------------ | :--------------------------- | :--------------------- | :------------------------ |
| `titleLabelPaddingRight` | Title | `spacing-05` | 1rem / 16px |
| `titleLabelPaddingLeft` | Title | `spacing-00` | 0rem / 0px |
| `titleLabelPaddingTop` | Title | `spacing-00` | 0rem / 0px |
| `titleLabelPaddingBottom` | Title | `spacing-00` | 0rem / 0px |
| `titleLabelPaddingRight` | Title | `spacing-16` | 1rem / 16px |
| `titleLabelPaddingLeft` | Title | `spacing-0 ` | 0rem / 0px |
| `titleLabelPaddingTop` | Title | `spacing-0 ` | 0rem / 0px |
| `titleLabelPaddingBottom` | Title | `spacing-0 ` | 0rem / 0px |


| Property | Element | Core token | Value |
| :------------------------------------------ | :--------------------------- | :------------------- | :----------- |
| `padding-left` | Header | `spacing-05` | 16px |
| `padding-right` | Header | `spacing-05` | 16px |
| `padding-right` | Helper text | `spacing-06` | 24px |
| `padding` | Caret icon | `spacing-04` | 12px |
| `margin-right` | Custom icon | `spacing-04` | 12px |
| `padding-left` | Header | `spacing-16` | 16px |
| `padding-right` | Header | `spacing-16` | 16px |
| `padding-right` | Helper text | `spacing-24` | 24px |
| `padding` | Caret icon | `spacing-12` | 12px |
| `margin-right` | Custom icon | `spacing-12` | 12px |
| `padding` | Custom content | [Component spacing](https://github.com/dxc-technology/halstack-style-guide/tree/master/guidelines/principles/spacing#component-spacing-tokens) | [[Prop] padding](https://developer.dxc.com/tools/react/next/#/components/accordion) |
| `margin` | Accordion container | [Component spacing](https://github.com/dxc-technology/halstack-style-guide/tree/master/guidelines/principles/spacing#component-spacing-tokens) | [[Prop] margin](https://developer.dxc.com/tools/react/next/#/components/accordion) |

Expand Down
10 changes: 5 additions & 5 deletions guidelines/components/alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,11 @@ Depending on the content that need to be displayed, more detailed descriptions c

| Component token | Element | Core token | Value |
| :------------------------------------------ | :--------------------------- | :--------------------- | :---------------- |
| `containerPaddingLeft` | Container | `spacing-04` | 0.75rem / 12px |
| `containerPaddingRight` | Container | `spacing-04` | 0.75rem / 12px |
| `iconMarginRight` | Icon | `spacing-03` | 0.75rem / 12px |
| `inlineTextPaddingLeft` | Inline text | `spacing-03` | 0.5rem / 8px |
| `titlePaddingLeft` | Title | `spacing-03` | 0.5rem / 8px |
| `containerPaddingLeft` | Container | `spacing-12` | 0.75rem / 12px |
| `containerPaddingRight` | Container | `spacing-12` | 0.75rem / 12px |
| `iconMarginRight` | Icon | `spacing-8` | 0.75rem / 12px |
| `inlineTextPaddingLeft` | Inline text | `spacing-8` | 0.5rem / 8px |
| `titlePaddingLeft` | Title | `spacing-8` | 0.5rem / 8px |


### Iconography
Expand Down
16 changes: 8 additions & 8 deletions guidelines/components/autosuggest/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ The specifications for the autosuggest input can be found in the [input text spe

| Property | Element | Token | Value |
| :---------------------------------- | :-------------------- | :---------------------- | :---------------- |
| `padding-top` | List dialog | `spacing-02` | 0.25rem / 4px |
| `padding-bottom` | List dialog | `spacing-02` | 0.25rem / 4px |
| `padding-left` | List option | `spacing-03` | 0.5rem / 8px |
| `padding-right` | List option | `spacing-03` | 0.5rem / 8px |
| `padding-top` | List option | `spacing-01` | 0.125rem / 2px |
| `padding-bottom` | List option | `spacing-01` | 0.125rem / 2px |
| `padding-left` | List option value | `spacing-03` | 0.5rem / 8px |
| `padding-right` | List option value | `spacing-03` | 0.5rem / 8px |
| `padding-top` | List dialog | `spacing-4` | 0.25rem / 4px |
| `padding-bottom` | List dialog | `spacing-4` | 0.25rem / 4px |
| `padding-left` | List option | `spacing-8` | 0.5rem / 8px |
| `padding-right` | List option | `spacing-8` | 0.5rem / 8px |
| `padding-top` | List option | `spacing-2` | 0.125rem / 2px |
| `padding-bottom` | List option | `spacing-2` | 0.125rem / 2px |
| `padding-left` | List option value | `spacing-8` | 0.5rem / 8px |
| `padding-right` | List option value | `spacing-8` | 0.5rem / 8px |

## Links and references

Expand Down
14 changes: 7 additions & 7 deletions guidelines/components/button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,16 @@ _Design specifications for button component_

| Component token | Element | Core token | Value |
| :----------------------------- | :--------------- | :---------------- | :-------------- |
| `primaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
| `primaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
| `primaryPaddingTop` | Container | `spacing-03` | 0.5rem / 8px |
| `primaryPaddingBottom` | Container | `spacing-03` | 0.5rem / 8px |
| `primaryPaddingLeft` | Container | `spacing-8` | 0.5rem / 8px |
| `primaryPaddingRight` | Container | `spacing-8` | 0.5rem / 8px |
| `primaryPaddingTop` | Container | `spacing-8` | 0.5rem / 8px |
| `primaryPaddingBottom` | Container | `spacing-8` | 0.5rem / 8px |

| Property | Element | Core token | Value |
| :----------------------------- | :--------------- | :---------------- | :-------------- |
| `margin-right` | Label | `spacing-03` | 0.5rem / 8px |
| `margin-left` | Label | `spacing-03` | 0.5rem / 8px |
| `margin-left` | Icon | `spacing-03` | 0.5rem / 8px |
| `margin-right` | Label | `spacing-8` | 0.5rem / 8px |
| `margin-left` | Label | `spacing-8` | 0.5rem / 8px |
| `margin-left` | Icon | `spacing-8` | 0.5rem / 8px |


### Size
Expand Down
12 changes: 6 additions & 6 deletions guidelines/components/card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@ _Card design specifications_

| Property | Element | Core token | Value |
| :----------------------- | :----------------------- | :------------------------- | :--------------- |
| `margin-top` | Custom content- subtitle | `spacing-02` | 0.25rem / 4px |
| `margin-bottom` | Custom content- title | `spacing-05` | 1rem / 16px |
| `padding-left` | Custom content | `spacing-06` | 1.5rem / 24px |
| `padding-top` | Custom content | `spacing-06` | 1.5rem / 24px |
| `padding-bottom` | Custom content | `spacing-06` | 1.5rem / 24px |
| `padding-right` | Container | `spacing-06` | 1.5rem / 24px |
| `margin-top` | Custom content- subtitle | `spacing-4` | 0.25rem / 4px |
| `margin-bottom` | Custom content- title | `spacing-16` | 1rem / 16px |
| `padding-left` | Custom content | `spacing-24` | 1.5rem / 24px |
| `padding-top` | Custom content | `spacing-24` | 1.5rem / 24px |
| `padding-bottom` | Custom content | `spacing-24` | 1.5rem / 24px |
| `padding-right` | Container | `spacing-24` | 1.5rem / 24px |


### Size
Expand Down
2 changes: 1 addition & 1 deletion guidelines/components/checkbox/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ _Component design specifications_

| Component token | Element | Core token | Value |
| :----------------------- | :--------------- | :------------------------- | :--------------------------- |
| `inputMargin` | Checkbox input | `spacing-03` | 0.5rem / 8px |
| `inputMargin` | Checkbox input | `spacing-8` | 0.5rem / 8px |

### Typography

Expand Down
8 changes: 4 additions & 4 deletions guidelines/components/chip/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,10 @@ _Component chip design specifications_

| Component token | Element | Core token | Value |
| :----------------------- | :-------------------- | :-------------- | :---------------- |
| `labelMarginLeft` | Label | `spacing-03` | 0.5rem / 8px |
| `labelMarginRight` | Label | `spacing-03` | 0.5rem / 8px |
| `containerPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
| `containerPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
| `labelMarginLeft` | Label | `spacing-8` | 0.5rem / 8px |
| `labelMarginRight` | Label | `spacing-8` | 0.5rem / 8px |
| `containerPaddingLeft` | Container | `spacing-8` | 0.5rem / 8px |
| `containerPaddingRight` | Container | `spacing-8` | 0.5rem / 8px |



Expand Down
11 changes: 6 additions & 5 deletions guidelines/components/date-input/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,10 @@ _date input design specifications_

The date input `color`, `typography`, `border`, `spacing`, `width` and `margin` specifications are inherited from the text input, for reference [check the text input component documentation](https://developer.dxc.com/design/guidelines/components/text-input).

The date input doesn't have the following text input elements, therefore, their listed styles don't apply:
The date input doesn't have the following text input elements or properties, therefore, their listed styles don't apply:

* Prefix / Suffix
* The size `small` is not available


### Datepicker dialog
Expand Down Expand Up @@ -107,10 +108,10 @@ _Structure and spacing for date picker calendar pop-up_

| Property | Element | Core token | Value |
| :---------------------------- | :-------------------- | :-------------- | :--------------- |
| `padding` | Calendar container | `spacing-05` | 1rem / 16px |
| `padding-left/right` | Month container | `spacing-03` | 0.5rem / 8px |
| `padding-left/right` | Year selector | `spacing-05` | 1rem / 16px |
| `padding-top/bottom` | Separator | `spacing-03` | 0.5rem / 8px |
| `padding` | Calendar container | `spacing-16` | 1rem / 16px |
| `padding-left/right` | Month container | `spacing-8` | 0.5rem / 8px |
| `padding-left/right` | Year selector | `spacing-16` | 1rem / 16px |
| `padding-top/bottom` | Separator | `spacing-8` | 0.5rem / 8px |

#### Sizing

Expand Down
11 changes: 8 additions & 3 deletions guidelines/components/dialog/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ A modal dialog is a message box or child window that requires user interaction b
* Can have some combinations of actions, like buttons to accept/cancel the action. There can be one, two or more buttons
* If the dialog is not including a cancel action, provide a way to close it
* Modal dialog boxes should overlay only a portion of the underlying page to keep the user oriented within the workflow



## Anatomy
Expand All @@ -28,7 +29,11 @@ A modal dialog is a message box or child window that requires user interaction b

_Example of a dialog using Halstack components as content_

Any content (Halstack components or custom) can be placed inside the dialog component, try always to avoid scrolling.
Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be direct and easy to complete.

* Don’t use to display complex or large amounts of data.
* Don’t recreate a full app or page in a dialog
* Try always to avoid scrolling


## Overlay
Expand Down Expand Up @@ -88,8 +93,8 @@ _Design specifications for dialog component_

| Property | Element | Core token | Value |
| :----------------------- | :--------------- | :------------------------- | :--------------- |
| `margin-right` | Title icon | `spacing-04` | 0.75rem / 12px |
| `margin-bottom` | Title | `spacing-06` | 1.5rem / 24px |
| `margin-right` | Title icon | `spacing-12` | 0.75rem / 12px |
| `margin-bottom` | Title | `spacing-24` | 1.5rem / 24px |


### Size
Expand Down
Loading