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

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 +4 -3
  2. package/js/components/TextField/Stories.d.ts +0 -1
  3. package/js/components/TextField/TextField.d.ts +1 -3
  4. package/lumx.css +4 -3
  5. package/package.json +2 -2
  6. package/scss/components/text-field/_index.scss +10 -9
package/components-and-utils.css CHANGED
@@ -11514,15 +11514,16 @@ table {
11514
11514
  flex-shrink: 0;
11515
11515
  align-items: center;
11516
11516
  margin-left: auto;
11517
- float: right;
11517
+ }
11518
+ .lumx-text-field__char-counter span {
11518
11519
  font-size: var(--lumx-material-text-field-header-label-font-size);
11519
11520
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
11520
11521
  line-height: var(--lumx-material-text-field-header-label-line-height);
11521
11522
  }
11522
- .lumx-text-field--theme-light .lumx-text-field__char-counter {
11523
+ .lumx-text-field--theme-light .lumx-text-field__char-counter span {
11523
11524
  color: var(--lumx-color-dark-L2);
11524
11525
  }
11525
- .lumx-text-field--theme-dark .lumx-text-field__char-counter {
11526
+ .lumx-text-field--theme-dark .lumx-text-field__char-counter span {
11526
11527
  color: var(--lumx-color-light-L2);
11527
11528
  }
11528
11529
  .lumx-text-field__char-counter i {
package/js/components/TextField/Stories.d.ts CHANGED
@@ -80,7 +80,6 @@ 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;
84
83
  label: string;
85
84
  helper: string;
86
85
  };
package/js/components/TextField/TextField.d.ts CHANGED
@@ -38,8 +38,6 @@ 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;
43
41
  /** Whether the text field is a textarea or an input. */
44
42
  multiline?: boolean;
45
43
  /** Placeholder text. */
@@ -59,7 +57,7 @@ export interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled,
59
57
  /** Ref to the component root. */
60
58
  ref?: CommonRef;
61
59
  }
62
- export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'charCounterMessage' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
60
+ export type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
63
61
  /**
64
62
  * Generate unique accessibility IDs for helper and error texts.
65
63
  * Combines them with any existing aria-describedby in priority order (error > helper > existing).
package/lumx.css CHANGED
@@ -12195,15 +12195,16 @@ table {
12195
12195
  flex-shrink: 0;
12196
12196
  align-items: center;
12197
12197
  margin-left: auto;
12198
- float: right;
12198
+ }
12199
+ .lumx-text-field__char-counter span {
12199
12200
  font-size: var(--lumx-material-text-field-header-label-font-size);
12200
12201
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
12201
12202
  line-height: var(--lumx-material-text-field-header-label-line-height);
12202
12203
  }
12203
- .lumx-text-field--theme-light .lumx-text-field__char-counter {
12204
+ .lumx-text-field--theme-light .lumx-text-field__char-counter span {
12204
12205
  color: var(--lumx-color-dark-L2);
12205
12206
  }
12206
- .lumx-text-field--theme-dark .lumx-text-field__char-counter {
12207
+ .lumx-text-field--theme-dark .lumx-text-field__char-counter span {
12207
12208
  color: var(--lumx-color-light-L2);
12208
12209
  }
12209
12210
  .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.1",
10
+ "@lumx/icons": "^4.19.0-next.0",
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.1",
69
+ "version": "4.19.0-next.0",
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,18 +43,19 @@
43
43
  flex-shrink: 0;
44
44
  align-items: center;
45
45
  margin-left: auto;
46
- float: right;
47
46
 
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);
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);
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");
56
+ #{$self}--theme-dark & {
57
+ color: lumx-color-variant("light", "L2");
58
+ }
58
59
  }
59
60
 
60
61
  i {