@telus-uds/system-theme-tokens 2.6.0 → 2.8.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Mon, 19 Sep 2022 22:48:56 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Nov 2022 01:32:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.8.0
+
+Tue, 08 Nov 2022 01:32:09 GMT
+
+### Minor changes
+
+- feat: add ButtonDropdown component. (ugursysl@gmail.com)
+- Background feature for Carousel (tiagohldb@gmail.com)
+- Add platform specificity to some appearances (alan.slater@nearform.com)
+- Box gradient (tiagohldb@gmail.com)
+- feat: add clear button tokens to TextInput (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-constants to v1.2.0
+
+## 2.7.0
+
+Fri, 14 Oct 2022 19:30:03 GMT
+
+### Minor changes
+
+- Implementing hide label for pagination on larger screens (tiagohldb@gmail.com)
+- feat: add tokens for TextInput buttons (ruslan.bredikhin@nearform.com)
+- Update `Button` theme with `textLine` and `textLineStyle` (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v1.1.0
+
 ## 2.6.0
 
-Mon, 19 Sep 2022 22:48:56 GMT
+Mon, 19 Sep 2022 22:51:24 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -7,6 +7,14 @@ const focus = {
   description:
     "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
   values: [true],
+  type: 'state',
+  platforms: ['rn'] // In most cases, Native Apps team want to skip focus state
+}
+
+const inputFocus = {
+  description:
+    'Focus states for some input elements are well supported across web, RN, ios and android',
+  values: [true],
   type: 'state'
 }
 
@@ -14,7 +22,8 @@ const hover = {
   description:
     "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
   values: [true],
-  type: 'state'
+  type: 'state',
+  platforms: ['rn'] // Native Apps team currently want to skip ios / android hover
 }
 
 const pressed = {
@@ -50,6 +59,12 @@ const validation = {
   type: 'state'
 }
 
+const open = {
+  description: 'Applies when a ButtonDropdown is open.',
+  values: [true],
+  type: 'state'
+}
+
 // TODO this is used in radio and checkbox, should re-use validation state above?
 const error = { values: [true], type: 'state' }
 
@@ -70,6 +85,7 @@ module.exports = {
     }
   },
   Button: { focus, hover, pressed, inactive, selected },
+  ButtonDropdown: { focus, hover, pressed, inactive, selected, open },
   ButtonGroupItem: { focus, hover, pressed, inactive, selected },
   CarouselTabsPanelItem: { focus, hover, pressed, inactive, selected },
   Checkbox: { checked, error, focus, hover, inactive },
@@ -127,15 +143,20 @@ module.exports = {
       values: ['previous', 'next'],
       description: "Determines which way does the button navigate in Pagination's context",
       type: 'state'
+    },
+    compact: {
+      values: [true],
+      description: 'Determines if the "Next" and "Previous" labels should be omitted',
+      type: 'state'
     }
   },
   ProgressBar: { inactive },
   QuickLinksList: { hover, focus, pressed },
   Radio: { checked, error, focus, hover, inactive },
   RadioCard: { pressed, checked, error, focus, hover, inactive },
-  Search: { hover, focus, inactive },
+  Search: { hover, focus: inputFocus, inactive },
   SearchButton: { hover, focus, pressed, inactive },
-  Select: { validation, hover, focus, inactive },
+  Select: { validation, hover, focus: inputFocus, inactive },
   SideNavItem: {
     active: {
       description:
@@ -162,7 +183,7 @@ module.exports = {
   },
   TabsItem: { focus, hover, pressed, selected },
   TagsItem: { focus, hover, pressed, inactive, selected },
-  TextInput: { validation, hover, focus, inactive },
+  TextInput: { validation, hover, inactive, focus: inputFocus },
   ToggleSwitch: { focus, hover, pressed, inactive, selected },
   TooltipButton: { focus, hover, pressed },
   SkipLink: { focus }

package/components.js

@@ -1,7 +1,7 @@
 // Define the required components and their supported tokens
 module.exports = {
   ActivityIndicator: { size: 'size', thickness: 'border', color: 'color' },
-  Box: { backgroundColor: 'color' },
+  Box: { backgroundColor: 'color', gradient: 'gradient' },
   Button: {
     borderColor: 'color',
     borderWidth: 'border',
@@ -28,6 +28,46 @@ module.exports = {
     iconSpace: 'integer',
     icon: 'icon',
 
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color',
+    textLine: 'textLine',
+    textLineStyle: 'textLineStyle'
+  },
+  ButtonDropdown: {
+    icon: 'icon',
+    iconPosition: 'position',
+    iconSpace: 'integer',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconPadding: 'size',
+    iconAlignSelf: 'flexAlign',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    iconBackground: 'color',
+    iconBorderRadius: 'radius',
+    // These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
+    // https://github.com/telus/universal-design-system/issues/782
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    minWidth: 'size',
     outerBorderColor: 'color',
     outerBorderWidth: 'border',
     outerBorderGap: 'size',
@@ -83,6 +123,7 @@ module.exports = {
     shadow: 'shadow'
   },
   Carousel: {
+    backgroundColor: 'color',
     nextIcon: 'icon',
     previousIcon: 'icon',
     showPreviousNextNavigation: 'show',
@@ -383,7 +424,8 @@ module.exports = {
     iconSize: 'size',
     iconDisplace: 'size',
     width: 'size',
-    textAlign: 'flexJustifyContent'
+    textAlign: 'flexJustifyContent',
+    displayLabel: 'show'
   },
   Progress: {
     backgroundColor: 'color',
@@ -814,6 +856,10 @@ module.exports = {
     borderWidth: 'border',
     borderColor: 'color',
     borderRadius: 'radius',
+    buttonSize: 'size',
+    buttonsGap: 'size',
+    buttonsPaddingRight: 'size',
+    clearButtonIcon: 'icon',
     paddingTop: 'size',
     paddingBottom: 'size',
     paddingLeft: 'size',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"
@@ -25,6 +25,6 @@
     "skip": true
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^1.0.4"
+    "@telus-uds/system-constants": "^1.2.0"
   }
 }