@lumx/core 4.18.1-alpha.0 → 4.18.1-alpha.1

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/components-and-utils.css +3 -4
  2. package/js/components/TextField/Stories.d.ts +1 -0
  3. package/js/components/TextField/TextField.d.ts +3 -1
  4. package/lumx.css +3 -4
  5. package/package.json +2 -2
  6. package/scss/components/text-field/_index.scss +9 -10
package/components-and-utils.css CHANGED
@@ -11514,16 +11514,15 @@ table {
11514
11514
  flex-shrink: 0;
11515
11515
  align-items: center;
11516
11516
  margin-left: auto;
11517
- }
11518
- .lumx-text-field__char-counter span {
11517
+ float: right;
11519
11518
  font-size: var(--lumx-material-text-field-header-label-font-size);
11520
11519
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
11521
11520
  line-height: var(--lumx-material-text-field-header-label-line-height);
11522
11521
  }
11523
- .lumx-text-field--theme-light .lumx-text-field__char-counter span {
11522
+ .lumx-text-field--theme-light .lumx-text-field__char-counter {
11524
11523
  color: var(--lumx-color-dark-L2);
11525
11524
  }
11526
- .lumx-text-field--theme-dark .lumx-text-field__char-counter span {
11525
+ .lumx-text-field--theme-dark .lumx-text-field__char-counter {
11527
11526
  color: var(--lumx-color-light-L2);
11528
11527
  }
11529
11528
  .lumx-text-field__char-counter i {
package/js/components/TextField/Stories.d.ts CHANGED
@@ -80,6 +80,7 @@ export declare function setup({ component: TextField, components: { Chip, IconBu
80
80
  args: {
81
81
  value: string;
82
82
  maxLength: number;
83
+ charCounterMessage: (n: number) => string;
83
84
  label: string;
84
85
  helper: string;
85
86
  };
package/js/components/TextField/TextField.d.ts CHANGED
@@ -38,6 +38,8 @@ export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled,
38
38
  labelProps?: InputLabelProps;
39
39
  /** Max string length the input accepts (constrains the input and displays a character counter). */
40
40
  maxLength?: number;
41
+ /** Character counter message formatter. Receives remaining character count, returns accessible label (e.g. \"{n} characters remaining\"). */
42
+ charCounterMessage?: (charCount: number) => string | JSXElement;
41
43
  /** Whether the text field is a textarea or an input. */
42
44
  multiline?: boolean;
43
45
  /** Placeholder text. */
@@ -57,7 +59,7 @@ export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled,
57
59
  /** Ref to the component root. */
58
60
  ref?: CommonRef;
59
61
  }
60
- export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
62
+ export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'charCounterMessage' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
61
63
  /**
62
64
  * Generate unique accessibility IDs for helper and error texts.
63
65
  * Combines them with any existing aria-describedby in priority order (error > helper > existing).
package/lumx.css CHANGED
@@ -12195,16 +12195,15 @@ table {
12195
12195
  flex-shrink: 0;
12196
12196
  align-items: center;
12197
12197
  margin-left: auto;
12198
- }
12199
- .lumx-text-field__char-counter span {
12198
+ float: right;
12200
12199
  font-size: var(--lumx-material-text-field-header-label-font-size);
12201
12200
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
12202
12201
  line-height: var(--lumx-material-text-field-header-label-line-height);
12203
12202
  }
12204
- .lumx-text-field--theme-light .lumx-text-field__char-counter span {
12203
+ .lumx-text-field--theme-light .lumx-text-field__char-counter {
12205
12204
  color: var(--lumx-color-dark-L2);
12206
12205
  }
12207
- .lumx-text-field--theme-dark .lumx-text-field__char-counter span {
12206
+ .lumx-text-field--theme-dark .lumx-text-field__char-counter {
12208
12207
  color: var(--lumx-color-light-L2);
12209
12208
  }
12210
12209
  .lumx-text-field__char-counter i {
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "dependencies": {
9
9
  "@floating-ui/dom": "^1.7.5",
10
- "@lumx/icons": "^4.18.1-alpha.0",
10
+ "@lumx/icons": "^4.18.1-alpha.1",
11
11
  "classnames": "^2.3.2",
12
12
  "focus-visible": "^5.0.2",
13
13
  "lodash": "4.18.1",
@@ -66,7 +66,7 @@
66
66
  "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
67
67
  },
68
68
  "sideEffects": false,
69
- "version": "4.18.1-alpha.0",
69
+ "version": "4.18.1-alpha.1",
70
70
  "devDependencies": {
71
71
  "@rollup/plugin-typescript": "^12.3.0",
72
72
  "@testing-library/dom": "^10.4.1",
package/scss/components/text-field/_index.scss CHANGED
@@ -43,19 +43,18 @@
43
43
  flex-shrink: 0;
44
44
  align-items: center;
45
45
  margin-left: auto;
46
+ float: right;
46
47
 
47
- span {
48
- font-size: var(--lumx-material-text-field-header-label-font-size);
49
- font-weight: var(--lumx-material-text-field-header-label-font-weight);
50
- line-height: var(--lumx-material-text-field-header-label-line-height);
48
+ font-size: var(--lumx-material-text-field-header-label-font-size);
49
+ font-weight: var(--lumx-material-text-field-header-label-font-weight);
50
+ line-height: var(--lumx-material-text-field-header-label-line-height);
51
51
 
52
- #{$self}--theme-light & {
53
- color: lumx-color-variant("dark", "L2");
54
- }
52
+ #{$self}--theme-light & {
53
+ color: lumx-color-variant("dark", "L2");
54
+ }
55
55
 
56
- #{$self}--theme-dark & {
57
- color: lumx-color-variant("light", "L2");
58
- }
56
+ #{$self}--theme-dark & {
57
+ color: lumx-color-variant("light", "L2");
59
58
  }
60
59
 
61
60
  i {