@patternfly/patternfly 6.0.0-alpha.156 → 6.0.0-alpha.158

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 (12) hide show
  1. package/components/Menu/menu.css +11 -0
  2. package/components/Menu/menu.scss +13 -0
  3. package/components/TextInputGroup/text-input-group.css +20 -18
  4. package/components/TextInputGroup/text-input-group.scss +23 -22
  5. package/components/_index.css +31 -18
  6. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +31 -18
  10. package/patternfly.css +31 -18
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -15535,6 +15535,8 @@ ul.pf-v6-c-list {
15535
15535
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
15536
15536
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
15537
15537
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15538
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15539
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15538
15540
  --pf-v6-c-menu--m-plain--BoxShadow: none;
15539
15541
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
15540
15542
  --pf-v6-c-menu__content--Height: auto;
@@ -15548,6 +15550,9 @@ ul.pf-v6-c-list {
15548
15550
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
15549
15551
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
15550
15552
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
15553
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
15554
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15555
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
15551
15556
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
15552
15557
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
15553
15558
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -15718,6 +15723,8 @@ ul.pf-v6-c-list {
15718
15723
  background-color: var(--pf-v6-c-menu--BackgroundColor);
15719
15724
  border-radius: var(--pf-v6-c-menu--BorderRadius);
15720
15725
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
15726
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
15727
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
15721
15728
  }
15722
15729
  .pf-v6-c-menu .pf-v6-c-menu {
15723
15730
  min-width: 100%;
@@ -15889,6 +15896,9 @@ ul.pf-v6-c-list {
15889
15896
  .pf-v6-c-menu__list-item {
15890
15897
  align-items: baseline;
15891
15898
  min-width: 0;
15899
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
15900
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
15901
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
15892
15902
  }
15893
15903
  .pf-v6-c-menu__list-item > * {
15894
15904
  position: relative;
@@ -15898,6 +15908,7 @@ ul.pf-v6-c-list {
15898
15908
  inset: 0;
15899
15909
  content: "";
15900
15910
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
15911
+ transition: inherit;
15901
15912
  }
15902
15913
  .pf-v6-c-menu__list-item.pf-m-load {
15903
15914
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
@@ -25145,15 +25156,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25145
25156
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25146
25157
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25147
25158
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25148
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25149
25159
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25150
25160
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25151
25161
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25152
25162
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25153
25163
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25154
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25155
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25156
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25164
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25165
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25166
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25167
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25168
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25169
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25170
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25171
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25157
25172
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25158
25173
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25159
25174
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25179,15 +25194,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25179
25194
  width: 100%;
25180
25195
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25181
25196
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25182
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25183
- }
25184
- .pf-v6-c-text-input-group::before {
25185
- position: absolute;
25186
- inset: 0;
25187
- pointer-events: none;
25188
- content: "";
25189
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25190
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25191
25197
  }
25192
25198
  .pf-v6-c-text-input-group:hover {
25193
25199
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25201,7 +25207,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25201
25207
  .pf-v6-c-text-input-group.pf-m-plain {
25202
25208
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25203
25209
  }
25204
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25210
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25205
25211
  border: 0;
25206
25212
  }
25207
25213
 
@@ -25216,12 +25222,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25216
25222
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25217
25223
  }
25218
25224
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25225
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25226
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25219
25227
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25220
25228
  }
25221
25229
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25222
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25223
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25224
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25230
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25231
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25232
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25225
25233
  }
25226
25234
 
25227
25235
  .pf-v6-c-text-input-group__text {
@@ -25230,11 +25238,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25230
25238
  grid-template-areas: "text-input";
25231
25239
  grid-template-columns: 1fr;
25232
25240
  }
25233
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25241
+ .pf-v6-c-text-input-group__text::before {
25234
25242
  position: absolute;
25235
25243
  inset: 0;
25236
25244
  pointer-events: none;
25237
25245
  content: "";
25246
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25247
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25248
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25249
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25250
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25238
25251
  }
25239
25252
 
25240
25253
  .pf-v6-c-text-input-group__icon {