@box/blueprint-web 12.51.1 → 12.52.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 (4) hide show
  1. package/dist/lib-esm/index.css +141 -58
  2. package/dist/lib-esm/input-chip/input-chip.js +9 -2
  3. package/dist/lib-esm/input-chip/input-chip.module.js +1 -1
  4. package/package.json +1 -1
package/dist/lib-esm/index.css CHANGED
@@ -1911,111 +1911,194 @@
1911
1911
  .bp_chips_group_module_chipsGroup--61ede > [role=row]{
1912
1912
  max-width:100%;
1913
1913
  }
1914
- .bp_input_chip_module_container--7e728{
1915
- --surface-inputchip-surface-variable:var(--purple-rain-20);
1916
- --text-inputchip-text-variable:var(--purple-rain-120);
1917
- --icon-inputchip-deleteicon-variable:var(--purple-rain-120);
1914
+
1915
+ .bp_input_chip_module_container--86f74[data-modern=false]{
1916
+ --input-chip-surface:var(--surface-inputchip-surface);
1917
+ --input-chip-surface-hover:var(--surface-inputchip-surface-hover);
1918
+ --input-chip-surface-error:var(--surface-inputchip-surface-error);
1919
+ --input-chip-surface-variable:var(--purple-rain-20);
1920
+ --input-chip-text:var(--text-text-on-light);
1921
+ --input-chip-text-variable:var(--purple-rain-120);
1922
+ --input-chip-delete-icon:var(--purple-rain-120);
1923
+ --input-chip-border-error:var(--border-inputchip-border-error);
1924
+ --input-chip-border-radius:var(--radius-half);
1925
+ --input-chip-height:var(--size-7);
1926
+ --input-chip-padding-inline:var(--space-1);
1927
+ --input-chip-padding-block:var(--space-05);
1928
+ --input-chip-padding-inline-avatar:var(--space-05);
1929
+ --input-chip-padding-inline-delete:var(--space-1) var(--space-05);
1930
+ --input-chip-label-padding-inline:var(--space-2);
1931
+ --input-chip-focus-ring-width:var(--border-2);
1932
+ --input-chip-focus-ring-color:var(--outline-focus-on-light);
1933
+ --input-chip-focus-ring-offset-width:var(--border-1);
1934
+ --input-chip-focus-ring-offset-color:var(--outline-focus-on-dark);
1935
+ --input-chip-error-focus-ring-width:var(--border-2);
1936
+ --input-chip-error-focus-ring-color:var(--outline-focus-on-light);
1937
+ --input-chip-error-focus-ring-offset-width:var(--border-2);
1938
+ --input-chip-error-focus-ring-offset-color:var(--outline-focus-on-dark);
1939
+ --input-chip-delete-surface:var(--surface-cta-surface-icon);
1940
+ --input-chip-delete-icon-color:var(--icon-cta-icon);
1941
+ --input-chip-delete-surface-hover:var(--surface-cta-surface-icon-hover);
1942
+ --input-chip-delete-icon-hover:var(--icon-cta-icon-hover);
1943
+ --input-chip-delete-surface-pressed:var(--surface-cta-surface-icon-pressed);
1944
+ --input-chip-delete-icon-pressed:var(--icon-cta-icon-pressed);
1945
+ --input-chip-delete-icon-border-radius:var(--radius-half);
1946
+ --input-chip-delete-padding-inline:var(--space-1);
1947
+ --input-chip-delete-padding-block:var(--space-1);
1948
+ }
1949
+
1950
+ .bp_input_chip_module_container--86f74[data-modern=true]{
1951
+ --input-chip-surface:var(--bp-gray-10);
1952
+ --input-chip-surface-hover:var(--bp-gray-10);
1953
+ --input-chip-surface-error:var(--bp-watermelon-red-10);
1954
+ --input-chip-surface-variable:var(--bp-purple-rain-10);
1955
+ --input-chip-text:var(--bp-text-text-on-light);
1956
+ --input-chip-text-variable:var(--bp-purple-rain-120);
1957
+ --input-chip-delete-icon:var(--bp-purple-rain-120);
1958
+ --input-chip-border-error:var(--bp-watermelon-red-100);
1959
+ --input-chip-border-radius:var(--bp-radius-16);
1960
+ --input-chip-height:var(--bp-size-070);
1961
+ --input-chip-padding-inline:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-005);
1962
+ --input-chip-padding-block:var(--bp-space-005);
1963
+ --input-chip-padding-inline-avatar:0 var(--bp-space-010);
1964
+ --input-chip-padding-inline-delete:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-005);
1965
+ --input-chip-label-padding-inline:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-020);
1966
+ --input-chip-focus-ring-width:var(--bp-border-02);
1967
+ --input-chip-focus-ring-color:var(--bp-outline-focus-on-light);
1968
+ --input-chip-focus-ring-offset-width:var(--bp-border-01);
1969
+ --input-chip-focus-ring-offset-color:var(--bp-outline-focus-on-dark);
1970
+ --input-chip-error-focus-ring-width:var(--bp-border-02);
1971
+ --input-chip-error-focus-ring-color:var(--bp-outline-focus-on-light);
1972
+ --input-chip-error-focus-ring-offset-width:var(--bp-border-02);
1973
+ --input-chip-error-focus-ring-offset-color:var(--bp-outline-focus-on-dark);
1974
+ --input-chip-delete-surface:var(--bp-surface-cta-surface-icon);
1975
+ --input-chip-delete-icon-color:var(--bp-icon-icon-on-light-secondary);
1976
+ --input-chip-delete-surface-hover:var(--bp-surface-cta-surface-icon-hover);
1977
+ --input-chip-delete-icon-hover:var(--bp-icon-cta-icon-hover);
1978
+ --input-chip-delete-surface-pressed:var(--bp-surface-cta-surface-icon-pressed);
1979
+ --input-chip-delete-icon-pressed:var(--bp-icon-cta-icon-pressed);
1980
+ --input-chip-delete-icon-border-radius:var(--bp-radius-06);
1981
+ --input-chip-delete-padding-inline:var(--bp-space-010);
1982
+ --input-chip-delete-padding-block:var(--bp-space-010);
1983
+ }
1984
+
1985
+ .bp_input_chip_module_container--86f74{
1918
1986
  align-items:center;
1919
- background-color:var(--surface-inputchip-surface);
1987
+ background-color:var(--input-chip-surface);
1920
1988
  border:none;
1921
- border-radius:var(--radius-half);
1922
- color:var(--text-text-on-light);
1989
+ border-radius:var(--input-chip-border-radius);
1990
+ color:var(--input-chip-text);
1923
1991
  cursor:pointer;
1924
1992
  display:flex;
1925
1993
  font-family:var(--body-default-font-family);
1926
1994
  font-size:var(--body-default-font-size);
1927
1995
  font-weight:var(--body-default-font-weight);
1928
- height:var(--size-7);
1996
+ height:var(--input-chip-height);
1929
1997
  letter-spacing:var(--body-default-letter-spacing);
1930
1998
  line-height:var(--body-default-line-height);
1931
1999
  max-width:100%;
1932
2000
  outline:none;
1933
- padding-block:var(--space-05);
1934
- padding-inline:var(--space-1) var(--space-1);
2001
+ padding-block:var(--input-chip-padding-block);
2002
+ padding-inline:var(--input-chip-padding-inline);
1935
2003
  -webkit-text-decoration:var(--body-default-text-decoration);
1936
2004
  text-decoration:var(--body-default-text-decoration);
1937
2005
  text-transform:var(--body-default-text-case);
1938
2006
  -webkit-user-select:none;
1939
2007
  user-select:none;
1940
2008
  }
1941
- .bp_input_chip_module_container--7e728.bp_input_chip_module_avatarContainer--7e728{
1942
- padding-inline:var(--space-05);
2009
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_avatarContainer--86f74{
2010
+ padding-inline:var(--input-chip-padding-inline-avatar);
2011
+ }
2012
+ .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_avatarContainer--86f74).bp_input_chip_module_deleteButton--86f74{
2013
+ padding-inline:var(--input-chip-padding-inline-delete);
1943
2014
  }
1944
- .bp_input_chip_module_container--7e728:not(.bp_input_chip_module_avatarContainer--7e728).bp_input_chip_module_deleteButton--7e728{
1945
- padding-inline:var(--space-1) var(--space-05);
2015
+ .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_avatarContainer--86f74).bp_input_chip_module_noDeleteButton--86f74{
2016
+ padding-inline:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-005);
1946
2017
  }
1947
- .bp_input_chip_module_container--7e728:not(.bp_input_chip_module_error--7e728):focus{
1948
- background-color:var(--surface-inputchip-surface-hover);
1949
- box-shadow:0 0 0 var(--border-1) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-1)) var(--outline-focus-on-light);
2018
+ .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_error--86f74):focus{
2019
+ background-color:var(--input-chip-surface-hover);
2020
+ box-shadow:0 0 0 var(--input-chip-focus-ring-offset-width) var(--input-chip-focus-ring-offset-color), 0 0 0 calc(var(--input-chip-focus-ring-width) + var(--input-chip-focus-ring-offset-width)) var(--input-chip-focus-ring-color);
1950
2021
  }
1951
- .bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728{
1952
- background-color:var(--surface-inputchip-surface-error);
1953
- outline:var(--border-1) solid var(--border-inputchip-border-error);
2022
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_error--86f74{
2023
+ background-color:var(--input-chip-surface-error);
2024
+ outline:var(--border-1) solid var(--input-chip-border-error);
1954
2025
  }
1955
- .bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728:focus{
1956
- box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-2)) var(--outline-focus-on-light);
2026
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_error--86f74:focus{
2027
+ box-shadow:0 0 0 var(--input-chip-error-focus-ring-offset-width) var(--input-chip-error-focus-ring-offset-color), 0 0 0 calc(var(--input-chip-error-focus-ring-width) + var(--input-chip-error-focus-ring-offset-width)) var(--input-chip-error-focus-ring-color);
1957
2028
  }
1958
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728{
2029
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74{
1959
2030
  align-items:center;
1960
- background:var(--surface-cta-surface-icon);
1961
- border-radius:var(--radius-half);
2031
+ background:var(--input-chip-delete-surface);
2032
+ border-radius:var(--input-chip-delete-icon-border-radius);
1962
2033
  display:flex;
1963
2034
  flex-shrink:0;
1964
2035
  justify-content:center;
1965
- padding-block:var(--space-1);
1966
- padding-inline:var(--space-1);
2036
+ padding-block:var(--input-chip-delete-padding-block);
2037
+ padding-inline:var(--input-chip-delete-padding-inline);
1967
2038
  }
1968
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
1969
- fill:var(--icon-cta-icon);
2039
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74 *{
2040
+ fill:var(--input-chip-delete-icon-color);
1970
2041
  }
1971
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
1972
- background:var(--surface-cta-surface-icon-hover);
2042
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:hover{
2043
+ background:var(--input-chip-delete-surface-hover);
1973
2044
  }
1974
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
1975
- fill:var(--icon-cta-icon-hover);
2045
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:hover *{
2046
+ fill:var(--input-chip-delete-icon-hover);
1976
2047
  }
1977
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
1978
- background:var(--surface-cta-surface-icon-pressed);
2048
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:active{
2049
+ background:var(--input-chip-delete-surface-pressed);
1979
2050
  }
1980
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
1981
- fill:var(--icon-cta-icon-pressed);
2051
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:active *{
2052
+ fill:var(--input-chip-delete-icon-pressed);
1982
2053
  }
1983
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_label--7e728{
2054
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_label--86f74{
1984
2055
  overflow:hidden;
1985
- padding-inline:var(--space-2);
2056
+ padding-inline:var(--input-chip-label-padding-inline);
1986
2057
  text-overflow:ellipsis;
1987
2058
  white-space:nowrap;
1988
2059
  }
1989
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728{
1990
- background-color:var(--surface-inputchip-surface-variable);
2060
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74{
2061
+ background-color:var(--input-chip-surface-variable);
1991
2062
  }
1992
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_label--7e728{
1993
- color:var(--text-inputchip-text-variable);
2063
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_label--86f74{
2064
+ color:var(--input-chip-text-variable);
1994
2065
  }
1995
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728:focus{
1996
- background-color:var(--surface-inputchip-surface-variable);
2066
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74:focus{
2067
+ background-color:var(--input-chip-surface-variable);
1997
2068
  }
1998
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728{
1999
- background:var(--surface-cta-surface-icon);
2069
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74{
2070
+ background:var(--input-chip-delete-surface);
2000
2071
  }
2001
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
2002
- fill:var(--icon-inputchip-deleteicon-variable);
2072
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74 *{
2073
+ fill:var(--input-chip-delete-icon);
2003
2074
  }
2004
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
2005
- background:var(--surface-cta-surface-icon-hover);
2075
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:hover{
2076
+ background:var(--input-chip-delete-surface-hover);
2006
2077
  }
2007
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
2008
- fill:var(--icon-inputchip-deleteicon-variable);
2078
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:hover *{
2079
+ fill:var(--input-chip-delete-icon);
2009
2080
  }
2010
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
2011
- background:var(--surface-cta-surface-icon-pressed);
2081
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:active{
2082
+ background:var(--input-chip-delete-surface-pressed);
2012
2083
  }
2013
- .bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
2014
- fill:var(--icon-inputchip-deleteicon-variable);
2084
+ .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:active *{
2085
+ fill:var(--input-chip-delete-icon);
2015
2086
  }
2016
- .bp_input_chip_module_container--7e728 .bp_input_chip_module_avatar--7e728{
2087
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74{
2017
2088
  flex-shrink:0;
2018
2089
  }
2090
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74.bp_input_chip_module_modern--86f74{
2091
+ border-bottom-left-radius:var(--bp-radius-16);
2092
+ border-bottom-right-radius:0;
2093
+ border-top-left-radius:var(--bp-radius-16);
2094
+ border-top-right-radius:0;
2095
+ height:1.75rem;
2096
+ overflow:hidden;
2097
+ width:1.75rem;
2098
+ }
2099
+ .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74.bp_input_chip_module_modern--86f74 *{
2100
+ border-radius:unset;
2101
+ }
2019
2102
  .bp_inline_error_module_inlineError--9a67c{
2020
2103
  align-items:center;
2021
2104
  color:var(--text-text-error-on-light);
package/dist/lib-esm/input-chip/input-chip.js CHANGED
@@ -3,6 +3,7 @@ import { XMark } from '@box/blueprint-web-assets/icons/Fill';
3
3
  import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import clsx from 'clsx';
5
5
  import React__default, { forwardRef } from 'react';
6
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
7
  import { Text } from '../text/text.js';
7
8
  import styles from './input-chip.module.js';
8
9
 
@@ -25,11 +26,16 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
25
26
  onDelete,
26
27
  ...buttonProps
27
28
  } = props;
29
+ const {
30
+ enableModernizedComponents
31
+ } = useBlueprintModernization();
28
32
  // Clone avatar element to override its props
29
33
  const withSmallAvatarSize = element => {
30
34
  const cloneAvatarWithSmallSize = el => /*#__PURE__*/React__default.cloneElement(el, {
31
35
  ...el.props,
32
- className: clsx(el.props.className, styles.avatar),
36
+ className: clsx(el.props.className, styles.avatar, {
37
+ [styles.modern]: enableModernizedComponents
38
+ }),
33
39
  size: 'small',
34
40
  'aria-hidden': 'true'
35
41
  });
@@ -54,12 +60,13 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
54
60
  };
55
61
  const hasError = variant === 'error';
56
62
  const variantClass = getVariantClass(variant);
57
- const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className);
63
+ const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, onDelete && styles.deleteButton, !onDelete && enableModernizedComponents && styles.noDeleteButton, className);
58
64
  return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
59
65
  ...buttonProps,
60
66
  ref: ref,
61
67
  "aria-invalid": hasError,
62
68
  className: containerClassName,
69
+ "data-modern": enableModernizedComponents,
63
70
  onKeyDown: handleKeyDown,
64
71
  type: "button",
65
72
  children: [avatar, jsx(Text, {
package/dist/lib-esm/input-chip/input-chip.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"container":"bp_input_chip_module_container--7e728","avatarContainer":"bp_input_chip_module_avatarContainer--7e728","deleteButton":"bp_input_chip_module_deleteButton--7e728","error":"bp_input_chip_module_error--7e728","deleteIcon":"bp_input_chip_module_deleteIcon--7e728","label":"bp_input_chip_module_label--7e728","variable":"bp_input_chip_module_variable--7e728","avatar":"bp_input_chip_module_avatar--7e728"};
2
+ var styles = {"container":"bp_input_chip_module_container--86f74","avatarContainer":"bp_input_chip_module_avatarContainer--86f74","deleteButton":"bp_input_chip_module_deleteButton--86f74","noDeleteButton":"bp_input_chip_module_noDeleteButton--86f74","error":"bp_input_chip_module_error--86f74","deleteIcon":"bp_input_chip_module_deleteIcon--86f74","label":"bp_input_chip_module_label--86f74","variable":"bp_input_chip_module_variable--86f74","avatar":"bp_input_chip_module_avatar--86f74","modern":"bp_input_chip_module_modern--86f74"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.51.1",
3
+ "version": "12.52.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {