@veracity/vui 2.8.3-rc.3 → 2.8.3-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/button/button.d.ts.map +1 -1
  2. package/dist/cjs/button/button.js +25 -2
  3. package/dist/esm/button/button.d.ts.map +1 -1
  4. package/dist/esm/button/button.js +25 -2
  5. package/package.json +1 -1
  6. package/src/button/button.tsx +24 -1
package/dist/cjs/button/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAoHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
package/dist/cjs/button/button.js CHANGED
@@ -83,7 +83,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
83
83
  const buttonGroupProps = (0, context_1.useButtonGroupContext)();
84
84
  const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
85
85
  const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
86
- isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "dropDownIcon", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
86
+ isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "dropDownIcon", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "title", "variant"]);
87
87
  const hasState = Boolean(state) && state !== 'idle';
88
88
  const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
89
89
  const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
@@ -102,6 +102,29 @@ exports.Button = (0, core_1.vui)((props, ref) => {
102
102
  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
103
103
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
104
104
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
105
+ let ariaLabel = 'vui-button';
106
+ if (title) {
107
+ ariaLabel = title;
108
+ }
109
+ else {
110
+ if ((0, utils_1.isString)(text)) {
111
+ ariaLabel = text;
112
+ }
113
+ else if ((0, utils_1.isReactText)(text)) {
114
+ ariaLabel = text.toString();
115
+ }
116
+ else {
117
+ if ((0, utils_1.isString)(icon)) {
118
+ ariaLabel = icon;
119
+ }
120
+ else if ((0, utils_1.isString)(iconLeft)) {
121
+ ariaLabel = iconLeft;
122
+ }
123
+ else if ((0, utils_1.isString)(iconRight)) {
124
+ ariaLabel = iconRight;
125
+ }
126
+ }
127
+ }
105
128
  const disabledProps = disabled
106
129
  ? {
107
130
  'aria-disabled': disabled,
@@ -123,7 +146,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
123
146
  w: isFullWidth ? '100%' : undefined
124
147
  });
125
148
  return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
126
- react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
149
+ react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": ariaLabel, borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
127
150
  hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
128
151
  react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
129
152
  react_1.default.createElement(Content, null,
package/dist/esm/button/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAoHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
package/dist/esm/button/button.js CHANGED
@@ -42,7 +42,7 @@ export const Button = vui((props, ref) => {
42
42
  const buttonGroupProps = useButtonGroupContext();
43
43
  const mergedProps = { ...buttonGroupProps, ...props };
44
44
  const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
45
- isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant: variantProp, ...rest } = mergedProps;
45
+ isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp, ...rest } = mergedProps;
46
46
  const hasState = Boolean(state) && state !== 'idle';
47
47
  const states = { ...buttonStateMapping, ...stateMapping };
48
48
  const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
@@ -61,6 +61,29 @@ export const Button = vui((props, ref) => {
61
61
  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
62
62
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
63
63
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
64
+ let ariaLabel = 'vui-button';
65
+ if (title) {
66
+ ariaLabel = title;
67
+ }
68
+ else {
69
+ if (isString(text)) {
70
+ ariaLabel = text;
71
+ }
72
+ else if (isReactText(text)) {
73
+ ariaLabel = text.toString();
74
+ }
75
+ else {
76
+ if (isString(icon)) {
77
+ ariaLabel = icon;
78
+ }
79
+ else if (isString(iconLeft)) {
80
+ ariaLabel = iconLeft;
81
+ }
82
+ else if (isString(iconRight)) {
83
+ ariaLabel = iconRight;
84
+ }
85
+ }
86
+ }
64
87
  const disabledProps = disabled
65
88
  ? {
66
89
  'aria-disabled': disabled,
@@ -82,7 +105,7 @@ export const Button = vui((props, ref) => {
82
105
  w: isFullWidth ? '100%' : undefined
83
106
  });
84
107
  return (React.createElement(ButtonProvider, { value: context },
85
- React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
108
+ React.createElement(ButtonBase, { "aria-label": ariaLabel, borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
86
109
  hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
87
110
  React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
88
111
  React.createElement(Content, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "2.8.3-rc.3",
3
+ "version": "2.8.3-rc.5",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "module": "./dist/esm/index.js",
6
6
  "main": "./dist/cjs/index.js",
package/src/button/button.tsx CHANGED
@@ -36,6 +36,7 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
36
36
  user-select: none;
37
37
  width: fit-content;
38
38
  `
39
+
39
40
  /**
40
41
  * Triggers given actions on click. Supports multiple states, sizes and variants.
41
42
  *
@@ -60,7 +61,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
60
61
  isDropDown,
61
62
  isElevated,
62
63
  isFullWidth,
63
- isLoading, // eslint-disable-line
64
+ isLoading, // eslint-disable-line
64
65
  isRound,
65
66
  isSplit,
66
67
  isTruncated,
@@ -68,6 +69,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
68
69
  state = props.isLoading ? 'loading' : '',
69
70
  stateMapping,
70
71
  text,
72
+ title,
71
73
  variant: variantProp,
72
74
  ...rest
73
75
  } = mergedProps
@@ -96,6 +98,25 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
96
98
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
97
99
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
98
100
 
101
+ let ariaLabel = 'vui-button'
102
+ if (title) {
103
+ ariaLabel = title
104
+ } else {
105
+ if (isString(text)) {
106
+ ariaLabel = text
107
+ } else if (isReactText(text)) {
108
+ ariaLabel = text.toString()
109
+ } else {
110
+ if (isString(icon)) {
111
+ ariaLabel = icon
112
+ } else if (isString(iconLeft)) {
113
+ ariaLabel = iconLeft
114
+ } else if (isString(iconRight)) {
115
+ ariaLabel = iconRight
116
+ }
117
+ }
118
+ }
119
+
99
120
  const disabledProps = disabled
100
121
  ? {
101
122
  'aria-disabled': disabled,
@@ -121,6 +142,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
121
142
  return (
122
143
  <ButtonProvider value={context}>
123
144
  <ButtonBase
145
+ aria-label={ariaLabel}
124
146
  borderWidth={border}
125
147
  className={cs('vui-button', className, isActive && activeClassName)}
126
148
  disabled={disabled}
@@ -129,6 +151,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
129
151
  pl={pl}
130
152
  pr={isDropDown ? 0 : pr}
131
153
  ref={ref}
154
+ title={title}
132
155
  type="button"
133
156
  variant={variant}
134
157
  {...buttonStyles}