Release 3.12.0

.grenrc.yml

@@ -1,50 +1,4 @@
 ---
   dataSource: "milestones"
   prefix: ""
-  ignoreLabels: 
-    - "category: a11y :wheelchair:"
-    - "category: assets :file_folder:"
-    - "category: design tokens :nail_care:"
-    - "category: documentation :notebook:"
-    - "category: site :computer:"
-    - "category: ui-kit :triangular_ruler:"
-    - "component: accordion"
-    - "component: alert"
-    - "component: autocomplete"
-    - "component: box"
-    - "component: button"
-    - "component: card"
-    - "component: checkbox"
-    - "component: chip"
-    - "component: container"
-    - "component: date-picker"
-    - "component: dialog"
-    - "component: dropdown"
-    - "component: footer"
-    - "component: form"
-    - "component: header"
-    - "component: heading"
-    - "component: input-text"
-    - "component: input-password"
-    - "component: input-number"
-    - "component: text-area"
-    - "component: toggle group"
-    - "component: link"
-    - "component: progress-bar"
-    - "component: radio"
-    - "component: select"
-    - "component: sidenav"
-    - "component: slider"
-    - "component: spinner"
-    - "component: switch"
-    - "component: upload"
-    - "component: wizard"
-    - "type: enhancement :pencil2:"
-    - "type: disparity :warning:"
-    - "status: work in progress :+1:"
-    - "status: under evaluation :mag_right:"
-    - "task: story :white_check_mark:"
-    - "task: epic :pushpin:"
-  groupBy: {"Documentation:": ["category: documentation :notebook:"], "UI-Kit:": ["category: ui-kit :triangular_ruler:"], "Fixes:": ["type: disparity :warning:"], "Site": ["category: site :computer:"]} 
-  milestoneMatch: "Release {{tag_name}}"
   changelogFilename: "CHANGELOG.md"

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.11.0 (28/10/2021)
+
+## What's Changed
+
+### Documentation
+
+* Accordion :focus state update by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/584
+* Fix accordion component specs by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/589
+* Component footer documentation update by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/592
+* Update contributing/design documentation by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/595
+* Component tag documentation update by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/590
+* Header documentation update by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/599
+* Select documentation update by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/602
+* Documentation fixes by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/603
+* Sidenav documentation fixes by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/585
+
+### UI Kit
+
+* Update UI Kit select and sidenav components by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/604
+* Add component status identifiers by @aweell in https://github.com/dxc-technology/halstack-style-guide/pull/597
+
+**Full Changelog**: https://github.com/dxc-technology/halstack-style-guide/compare/3.10.0...3.11.0
+---
+
 ## 3.10.0 (18/10/2021)
 
 #### Documentation:

guidelines/components/box/README.md

@@ -1,35 +1,73 @@
 # Box
 
-![box-overview](images/box_overview.png)
+There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component.
 
 
-There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component.
+## Usage
 
-## Appearance
+* Organize the group layout with the information presented clearly by applying the styles in the box container.
+* Box can be reused accros the UI, avoid using different variants in the same page.
+* Use always a minimun padding and always leave enough margin when stacking boxes so the shadows don't ovelap.
 
-Just as the name indicates the content in the webpage can be grouped using the Box Component, which is a simple wrapper component used to organise the layout within the box container.
+## Variants
 
-The Box has properties like margins, padding, borders, shadows, background colors etc. and organise the layout design serving as a container for interactive / non-interactive components like icons, labels, paragraphs and buttons etc.
+![Box component variants](images/box_variants.png)
 
-### Modes
+_Box component variants_
 
-#### No-shadow:
-Can be used as a container, there's no visual appearance of the box in the UI, just works as a simple <div>
+The `shadow-default` and `shadow-high` variants can be used to create clear distictions between sections of content without the use of borders or separators, the `no-shadow` helps in the process of building the layout. Note that when using an application `background-color` different than white, the limits of the box are goig to be clearly visible no matter the variant choosed.
+## Content
 
-#### Shadow depth 1:
-Regular visualization of the box, the container can be used to create a clear distinction between different sections of the UI.
+Any type of content can be place inside the box component.
 
-#### Shadow depth 2:
-Basically the same as the previous on but with a deeper shadow.
 
 ## Design specifications
 
+
+![Component design specifications](images/box_specs.png)
+
+_Component design specifications_
+
+### Color
+
+| Component token                 | Element                      | Core token             | Value                     |
+| :------------------------------ | :--------------------------- | :--------------------- | :------------------------ | 
+| `backgroundColor`               | Container                    | `color-white`          | #ffffff                   |
+| `borderColor`                   | Container                    | `color-transparent`    | #transparent              |
+| `noneShadowDepthShadowColor`    | Shadow                       | `color-transparent`    | transparent               |
+| `oneShadowDepthShadowColor`     | Shadow                       | -                      | #00000033                 |
+| `twoShadowDepthShadowColor`     | Shadow                       | -                      | #00000033                 |
+
+
+
 ### Border
 
-| Property                        | Element                      | Core token             | Value                     |
+| Component token                 | Element                      | Core token             | Value                     |
 | :------------------------------ | :--------------------------- | :--------------------- | :------------------------ | 
-| `border-width`                  | Container border             | `border-width-0`       | 0                         |
-| `border-radius`                 | Container border             | `border-radius-medium` | 0.25rem / 4px             | 
+| `borderThickness`               | Container border             | `border-width-0`       | 0                         |
+| `borderRadius`                  | Container border             | `border-radius-medium` | 0.25rem / 4px             | 
+| `borderStyle`                   | Container border             | `border-style-none`    | none                      | 
+
+
+### Shadow
+
+| Component token                 | Element                      | Core token             | Value                           |
+| :------------------------------ | :--------------------------- | :--------------------- | :------------------------------ | 
+| `noneShadowDepthShadowOffsetX`  | Container shadow             | -                      | none                            |
+| `noneShadowDepthShadowOffsetY`  | Container shadow             | -                      | none                            |
+| `noneShadowDepthShadowBlur`     | Container shadow             | -                      | none                            |
+| `noneShadowDepthShadowSpread`   | Container shadow             | -                      | none                            |
+| `oneShadowDepthShadowOffsetX`   | Container shadow             | -                      | 0x                              |
+| `oneShadowDepthShadowOffsetY`   | Container shadow             | -                      | 3px                             |
+| `oneShadowDepthShadowBlur`      | Container shadow             | -                      | 6px                             |
+| `oneShadowDepthShadowSpread`    | Container shadow             | -                      | 0px                             |
+| `twoShadowDepthShadowOffsetX`   | Container shadow             | -                      | 0x                              |
+| `twoShadowDepthShadowOffsetY`   | Container shadow             | -                      | 3px                             |
+| `twoShadowDepthShadowBlur`      | Container shadow             | -                      | 10px                            |
+| `twoShadowDepthShadowSpread`    | Container shadow             | -                      | 0px                             |
+
+
+
 ### Width
 
 In the cases of `fillParent` and `fillContent` the box is going to behave as a fluid container occupying the space the parent leaves for its children or adapting its size to the children it the box has. Instead of using a fluid approach, you can set a fixed size, choosing between `small`, `medium` and `large` properties.
@@ -72,17 +110,11 @@ padding | value
 And also apply different values to each side of the component:
 ```top``` ```bottom``` ```left``` ```right```
 
-## Content
-
-Any type of content can be place inside the box component.
-
-
-## User interface considerations
+## Links and references
 
-
-* Organize the group layout with the information presented clearly by applying the styles in the box container.
-* Box can be reused accros the UI, avoid using different shadow depths in the same page.
-* Use always a minimun padding and always leave enough margin when stacking boxes so the shadows don't ovelap.
+* [React component](https://developer.dxc.com/tools/react/next/#/components/box)
+* [Angular component](https://developer.dxc.com/tools/angular/next/#/components/box)
+* [Adobe XD component](https://xd.adobe.com/view/5dbf0c6e-c116-4fe2-970e-344911a74201-08ec/)
 
 ____________________________________________________________
 

guidelines/components/button/README.md

@@ -22,6 +22,12 @@ Variants: **primary**, **secondary** and **text**.
 ![Example of the button component variants](images/button_variants.png "Example of the button component variants")
 _Example of the button component variants_
 
+| Variant | Description |
+| :------ | :---------- |
+| Primary | For the principal call to action on the page; primary buttons should only appear once per screen (not including the application header or in a modal dialog) |
+| Secondary | For less prominent actions; secondary buttons can be used in isolation or paired with a primary button when there are multiple calls to action |
+| Text | For the least pronounced actions; often used in conjunction with a primary button (e.g. cancel in a modal dialog) |
+
 ## States
 
 The states are the different behaviors of the button component based on the interaction of the user.

guidelines/components/tag/README.md

@@ -48,10 +48,11 @@ _Design specification for the tag component_
 
 ### Color
 
-| Component token   | Element          | Core token     | Value      |
-| :---------------- | :--------------- | :------------- | :--------- |
-| `fontColor`       | Label            | `color-black`  | `#000000`  |
-| `iconColor`       | Icon            | `color-white`  | `#ffffff`  |
+| Component token   | Element          | Core token        | Value      |
+| :---------------- | :--------------- | :---------------- | :--------- |
+| `fontColor`       | Label            | `color-black`     | `#000000`  |
+| `iconColor`       | Icon             | `color-white`     | `#ffffff`  |
+| `focusColor`      | Container        | `color-blue-600`  | `#0095ff`  |
 
 *_The `tag` component is using the `box` underneath, the values for the background are inherited from the definition in the component. By default, the background color is white and not themable, so it will be the same for both components._
 
@@ -75,10 +76,12 @@ _Design specification for the tag component_
 
 ### Spacing
 
-| Property        | Element          | Core token    | Value       |
-| :-------------- | :--------------- | :------------ | :---------- |
-| `padding-left`  | Label            | `spacing-05`  | 1rem / 16px |
-| `padding-right` | Label            | `spacing-05`  | 1rem / 16px |
+| Component token        | Element          | Core token    | Value       |
+| :--------------------- | :--------------- | :------------ | :---------- |
+| `labelPaddingTop`      | Label            | `spacing-00`  | 0rem / 0px  |
+| `labelPaddingBottom`   | Label            | `spacing-00`  | 0rem / 0px  |
+| `labelPaddingLeft`     | Label            | `spacing-05`  | 1rem / 16px |
+| `labelPaddingRight`    | Label            | `spacing-05`  | 1rem / 16px |
 
 
 ### Size

guidelines/principles/spacing/README.md

@@ -56,15 +56,15 @@ Most components across Halstack can adopt our component spacing tokens as `margi
 _Usage of the `medium` token for `left` `right` `bottom` and `top` `padding` properties._
 
 
-| Component token     | Core token        | Value      |
-| ------------------- | --------------- | ------------ |
-| `xxsmall`           | `spacing-03`    | 8px          |
-| `xsmall`            | `spacing-05`    | 16px         |
-| `small`             | `spacing-06`    | 24px         |
-| `medium`            | `spacing-07`    | 32px         |
-| `large`             | `spacing-09`    | 48px         |
-| `xlarge`            | `spacing-11`    | 64px         |
-| `xxlarge`           | `spacing-14`    | 112px        |
+| Component token     | Core token       | Value        |
+| :------------------ | :--------------- | :----------- |
+| `xxsmall`           | `spacing-02`     | 4px          |
+| `xsmall`            | `spacing-03`     | 8px          |
+| `small`             | `spacing-04`     | 12px         |
+| `medium`            | `spacing-05`     | 16px         |
+| `large`             | `spacing-06`     | 24px         |
+| `xlarge`            | `spacing-07`     | 32px         |
+| `xxlarge`           | `spacing-09`     | 48px         | 
 
 
 ____________________________________________________________

release.yml

@@ -0,0 +1,14 @@
+changelog:
+  exclude:
+    authors:
+      - aweell
+  categories:
+    - title: Documentation 📚
+      labels:
+        - category: documentation :notebook:
+    - title: UI Kit 📐
+      labels:
+        - category: ui-kit :triangular_ruler:
+    - title: Other Changes
+      labels:
+        - "*"