@proximus/lavender-button-native 0.1.0-alpha.4 → 0.1.0-alpha.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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/PxButton.d.ts +2 -2
  3. package/dist/PxButton.d.ts.map +1 -1
  4. package/package.json +6 -6
  5. package/src/PxButton.tsx +43 -30
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.4...@proximus/lavender-button-native@0.1.0-alpha.5) (2025-09-19)
7
+
8
+ ### Features
9
+
10
+ - **BCRI-4249550:** message card + tag components ([#22](https://github.com/Pxs-Corporate/react-native-lavender/issues/22)) ([39fb91c](https://github.com/Pxs-Corporate/react-native-lavender/commit/39fb91cc294a37d07e63fca2b4e993d90b867082))
11
+
6
12
  # [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.3...@proximus/lavender-button-native@0.1.0-alpha.4) (2025-09-12)
7
13
 
8
14
  **Note:** Version bump only for package @proximus/lavender-button-native
package/dist/PxButton.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface IProps extends AccessibilityProps {
15
15
  testID?: string;
16
16
  prefix?: ReactNode;
17
17
  suffix?: ReactNode;
18
- loading?: boolean;
18
+ inverted?: boolean;
19
19
  }
20
- export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, loading, type, accessibilityLabel, accessibilityHint, }: IProps): React.JSX.Element;
20
+ export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, type, accessibilityLabel, accessibilityHint, inverted, }: IProps): React.JSX.Element;
21
21
  //# sourceMappingURL=PxButton.d.ts.map
package/dist/PxButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,qBAA4B,EAC5B,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,OAAO,EACP,OAAe,EACf,IAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,MAAM,qBAwGR"}
1
+ {"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,qBAA4B,EAC5B,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,MAAM,qBA2GR"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-button-native",
3
- "version": "0.1.0-alpha.4",
3
+ "version": "0.1.0-alpha.5",
4
4
  "description": "Button component",
5
5
  "license": "MIT",
6
6
  "main": "src/index.ts",
@@ -16,10 +16,10 @@
16
16
  "@proximus/lavender-texts-native": "workspace:*"
17
17
  },
18
18
  "devDependencies": {
19
- "@proximus/lavender-common-native": "0.1.0-alpha.3",
20
- "@proximus/lavender-icon-native": "0.1.0-alpha.3",
21
- "@proximus/lavender-styling-native": "0.1.0-alpha.2",
22
- "@proximus/lavender-texts-native": "0.1.0-alpha.3"
19
+ "@proximus/lavender-common-native": "0.1.0-alpha.4",
20
+ "@proximus/lavender-icon-native": "0.1.0-alpha.4",
21
+ "@proximus/lavender-styling-native": "0.1.0-alpha.3",
22
+ "@proximus/lavender-texts-native": "0.1.0-alpha.4"
23
23
  },
24
24
  "publishConfig": {
25
25
  "access": "public"
@@ -35,5 +35,5 @@
35
35
  }
36
36
  }
37
37
  },
38
- "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
38
+ "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
39
39
  }
package/src/PxButton.tsx CHANGED
@@ -26,23 +26,25 @@ export interface IProps extends AccessibilityProps {
26
26
  testID?: string;
27
27
  prefix?: ReactNode;
28
28
  suffix?: ReactNode;
29
- loading?: boolean;
29
+ inverted?: boolean;
30
30
  }
31
31
 
32
32
  function getButtonColors(props: Partial<IProps>, theme: ITheme) {
33
- const { loading, type } = props;
33
+ const { type, inverted = false } = props;
34
+
35
+ const invertedSuffix = inverted ? 'Inverted' : 'Default';
34
36
 
35
37
  switch (type) {
36
38
  case 'secondary': {
37
39
  return {
38
- backgroundColor: loading
39
- ? theme.t('ColorBackgroundStateDisabledDefault')
40
- : theme.t('ColorBackgroundContainerSecondaryDefault'),
41
- textColor: loading
42
- ? theme.t('ColorTextBrandInverted')
43
- : theme.t('ColorTextBrandDefault'),
44
- disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
45
- disabledText: theme.t('ColorTextStateDisabledDefault'),
40
+ backgroundColor: theme.t(
41
+ `ColorBackgroundContainerSecondary${invertedSuffix}`
42
+ ),
43
+ textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
44
+ disabledBackgroundColor: theme.t(
45
+ `ColorBackgroundStateDisabled${invertedSuffix}`
46
+ ),
47
+ disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
46
48
  };
47
49
  }
48
50
 
@@ -50,21 +52,23 @@ function getButtonColors(props: Partial<IProps>, theme: ITheme) {
50
52
  return {
51
53
  backgroundColor: 'transparent',
52
54
  disabledBackgroundColor: 'transparent',
53
- textColor: theme.t('ColorTextBrandDefault'),
54
- disabledText: theme.t('ColorTextStateDisabledDefault'),
55
+ textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
56
+ disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
55
57
  };
56
58
  }
57
59
 
58
60
  default: {
59
61
  return {
60
- backgroundColor: loading
61
- ? theme.t('ColorBackgroundStateDisabledDefault')
62
- : theme.t('ColorBackgroundContainerPrimaryDefault'),
63
- textColor: loading
62
+ backgroundColor: theme.t(
63
+ `ColorBackgroundContainerPrimary${invertedSuffix}`
64
+ ),
65
+ textColor: inverted
64
66
  ? theme.t('ColorTextBrandDefault')
65
67
  : theme.t('ColorTextBrandInverted'),
66
- disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
67
- disabledText: theme.t('ColorTextStateDisabledDefault'),
68
+ disabledBackgroundColor: theme.t(
69
+ `ColorBackgroundStateDisabled${invertedSuffix}`
70
+ ),
71
+ disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
68
72
  borderColor: theme.t('ColorBorderNone'),
69
73
  };
70
74
  }
@@ -72,28 +76,34 @@ function getButtonColors(props: Partial<IProps>, theme: ITheme) {
72
76
  }
73
77
 
74
78
  function getIconColor(props: Partial<IProps>, theme: ITheme) {
75
- const { type, disabled } = props;
79
+ const { type, disabled, inverted } = props;
80
+
81
+ const invertedSuffix = inverted ? 'Inverted' : 'Default';
76
82
 
77
83
  switch (type) {
78
84
  case 'primary':
79
85
  return disabled
80
- ? theme.t('ColorIconStateDisabledDefault')
81
- : theme.t('ColorIconBrandInverted');
86
+ ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
87
+ : inverted
88
+ ? theme.t('ColorIconBrandDefault')
89
+ : theme.t('ColorIconBrandInverted');
82
90
  default:
83
91
  return disabled
84
- ? theme.t('ColorIconStateDisabledDefault')
85
- : theme.t('ColorIconBrandDefault');
92
+ ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
93
+ : theme.t(`ColorIconBrand${invertedSuffix}`);
86
94
  }
87
95
  }
88
96
 
89
97
  function getIconBackgroundColor(props: Partial<IProps>, theme: ITheme) {
90
- const { type, disabled } = props;
98
+ const { type, disabled, inverted } = props;
99
+
100
+ const invertedSuffix = inverted ? 'Inverted' : 'Default';
91
101
 
92
102
  switch (type) {
93
103
  case 'tertiary':
94
104
  return disabled
95
- ? theme.t('ColorBackgroundStateDisabledDefault')
96
- : theme.t('ColorBackgroundContainerSecondaryDefault');
105
+ ? theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`)
106
+ : theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`);
97
107
  default:
98
108
  return undefined;
99
109
  }
@@ -109,22 +119,25 @@ export function PxButton({
109
119
  prefix,
110
120
  suffix,
111
121
  onPress,
112
- loading = false,
113
122
  type = 'primary',
114
123
  accessibilityLabel,
115
124
  accessibilityHint,
125
+ inverted,
116
126
  }: IProps) {
117
127
  const { theme } = useTheme();
118
- const buttonColors = getButtonColors({ loading, type }, theme);
128
+ const buttonColors = getButtonColors({ type, inverted }, theme);
119
129
 
120
130
  const iconStyles = {
121
131
  size: theme.t('SizeIconXs').number,
122
- color: getIconColor({ type, disabled }, theme),
132
+ color: getIconColor({ type, disabled, inverted }, theme),
123
133
  padding: theme.t('Padding2xsMobile').number,
124
134
  };
125
135
 
126
136
  const iconBackgroundStyles = {
127
- backgroundColor: getIconBackgroundColor({ type, disabled }, theme),
137
+ backgroundColor: getIconBackgroundColor(
138
+ { type, disabled, inverted },
139
+ theme
140
+ ),
128
141
  borderRadius: theme.t('RadiusPill').number,
129
142
  marginHorizontal: theme.t('SpacingXsMobile').number,
130
143
  };