@box/blueprint-web 12.52.1 → 12.53.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 (5) hide show
  1. package/dist/lib-esm/accordion/accordion.js +14 -2
  2. package/dist/lib-esm/accordion/accordion.module.js +1 -1
  3. package/dist/lib-esm/index.css +178 -64
  4. package/dist/lib-esm/modal/types.d.ts +2 -0
  5. package/package.json +1 -1
package/dist/lib-esm/accordion/accordion.js CHANGED
@@ -4,6 +4,7 @@ import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, Surf
4
4
  import * as RadixAccordion from '@radix-ui/react-accordion';
5
5
  import clsx from 'clsx';
6
6
  import { createElement } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
8
  import { Ghost } from '../ghost/ghost.js';
8
9
  import { InlineNotice } from '../inline-notice/inline-notice.js';
9
10
  import { Status } from '../status/status.js';
@@ -33,8 +34,12 @@ const accordionIconVariantToIconProps = {
33
34
  * </Accordion>
34
35
  */
35
36
  const Root = props => {
37
+ const {
38
+ enableModernizedComponents
39
+ } = useBlueprintModernization();
36
40
  return jsx(RadixAccordion.Root, {
37
- ...props
41
+ ...props,
42
+ className: enableModernizedComponents ? styles.accordion : ''
38
43
  });
39
44
  };
40
45
  const Item = props => {
@@ -46,10 +51,14 @@ const Item = props => {
46
51
  ...rest
47
52
  } = props;
48
53
  const accordionItemClasses = clsx(styles.accordionItem, className);
54
+ const {
55
+ enableModernizedComponents
56
+ } = useBlueprintModernization();
49
57
  if (loading) {
50
58
  return jsx("div", {
51
59
  ...rest,
52
60
  className: accordionItemClasses,
61
+ "data-modern": enableModernizedComponents,
53
62
  children: jsx("button", {
54
63
  "aria-label": loadingAriaLabel,
55
64
  className: styles.accordionTrigger,
@@ -65,6 +74,7 @@ const Item = props => {
65
74
  return jsx("div", {
66
75
  ...rest,
67
76
  className: accordionItemClasses,
77
+ "data-modern": enableModernizedComponents,
68
78
  children: jsx("div", {
69
79
  className: clsx({
70
80
  [styles.accordionFixedContent]: Boolean(children)
@@ -96,6 +106,7 @@ const Item = props => {
96
106
  return jsxs(RadixAccordion.Item, {
97
107
  ...itemRest,
98
108
  className: accordionItemClasses,
109
+ "data-modern": enableModernizedComponents,
99
110
  children: [jsx(RadixAccordion.Header, {
100
111
  asChild: true,
101
112
  children: jsx(RadixAccordion.Trigger, {
@@ -125,7 +136,8 @@ const Item = props => {
125
136
  })
126
137
  }), jsx(PointerChevron, {
127
138
  "aria-hidden": "true",
128
- className: styles.accordionTriggerIcon
139
+ className: styles.accordionTriggerIcon,
140
+ color: enableModernizedComponents ? 'var(--bp-icon-icon-on-light-secondary)' : 'var(--bp-gray-100)'
129
141
  })]
130
142
  })]
131
143
  })
package/dist/lib-esm/accordion/accordion.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"accordionContent":"bp_accordion_module_accordionContent--13004","slideDown":"bp_accordion_module_slideDown--13004","slideUp":"bp_accordion_module_slideUp--13004","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--13004","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--13004","accordionItem":"bp_accordion_module_accordionItem--13004","accordionFixedContent":"bp_accordion_module_accordionFixedContent--13004","accordionHeader":"bp_accordion_module_accordionHeader--13004","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--13004","accordionStatus":"bp_accordion_module_accordionStatus--13004","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--13004","accordionTrigger":"bp_accordion_module_accordionTrigger--13004","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--13004"};
2
+ var styles = {"accordionItem":"bp_accordion_module_accordionItem--8cf35","accordionContent":"bp_accordion_module_accordionContent--8cf35","slideDown":"bp_accordion_module_slideDown--8cf35","slideUp":"bp_accordion_module_slideUp--8cf35","accordion":"bp_accordion_module_accordion--8cf35","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--8cf35","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--8cf35","accordionFixedContent":"bp_accordion_module_accordionFixedContent--8cf35","accordionHeader":"bp_accordion_module_accordionHeader--8cf35","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--8cf35","accordionStatus":"bp_accordion_module_accordionStatus--8cf35","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--8cf35","accordionTrigger":"bp_accordion_module_accordionTrigger--8cf35","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--8cf35"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -802,19 +802,94 @@
802
802
  .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
803
803
  background-color:var(--surface-status-surface-green-focus);
804
804
  }
805
- .bp_accordion_module_accordionContent--13004[data-state=open]{
806
- animation:bp_accordion_module_slideDown--13004 .15s ease-out;
807
- }
808
-
809
- .bp_accordion_module_accordionContent--13004[data-state=closed]{
810
- animation:bp_accordion_module_slideUp--13004 .15s ease-out;
811
- }
812
805
 
813
- .bp_accordion_module_accordionContent--13004{
806
+ .bp_accordion_module_accordionItem--8cf35[data-modern=false]{
807
+ --accordion-min-width:320px;
808
+ --accordion-item-radius:none;
809
+ --accordion-item-background-collapsed:var(--surface-accordion-surface);
810
+ --accordion-item-background-expanded:var(--surface-accordion-surface);
811
+ --accordion-item-border:var(--border-1) solid var(--border-divider-border);
812
+ --accordion-item-border-expanded:none;
813
+ --accordion-item-border-bottom-expanded:var(--border-1) solid var(--border-divider-border);
814
+ --accordion-content-padding-block:var(--space-4);
815
+ --accordion-content-padding-inline:var(--space-4);
816
+ --accordion-content-padding-block-end:var(--space-6);
817
+ --accordion-content-gap:var(--space-4);
818
+ --accordion-error-padding-block-start:var(--space-4);
819
+ --accordion-error-padding-inline:var(--space-4);
820
+ --accordion-fixed-content-gap:var(--space-4);
821
+ --accordion-fixed-content-padding-block:var(--space-5);
822
+ --accordion-fixed-content-padding-inline:var(--space-4);
823
+ --accordion-header-text-color:var(--text-text-on-light);
824
+ --accordion-status-margin:var(--space-2);
825
+ --accordion-icon-size:var(--size-4);
826
+ --accordion-icon-radius:var(--radius-half);
827
+ --accordion-icon-margin:var(--space-2);
828
+ --accordion-trigger-border:none;
829
+ --accordion-trigger-expanded-border:none;
830
+ --accordion-trigger-border-hover:none;
831
+ --accordion-trigger-padding:var(--space-4) var(--space-6) var(--space-4) var(--space-4);
832
+ --accordion-trigger-background-active:var(--surface-surface);
833
+ --accordion-trigger-collapsed-background-hover:var(--surface-accordion-surface-hover);
834
+ --accordion-trigger-expanded-background-hover:var(--surface-accordion-surface-hover);
835
+ --accordion-trigger-collapsed-background-focus:var(--surface-surface-hover);
836
+ --accordion-trigger-expanded-background-focus:var(--surface-surface-hover);
837
+ --accordion-trigger-box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
838
+ --accordion-trigger-icon-margin:var(--space-3);
839
+ --accordion-trigger-icon-transform-collapsed:none;
840
+ --accordion-trigger-icon-transform-expanded:rotate(180deg);
841
+ }
842
+
843
+ .bp_accordion_module_accordionItem--8cf35[data-modern=true]{
844
+ --accordion-min-width:320px;
845
+ --accordion-item-radius:var(--bp-radius-08);
846
+ --accordion-item-background-collapsed:var(--bp-surface-accordion-surface-collapsed);
847
+ --accordion-item-background-expanded:var(--bp-surface-accordion-surface-expanded);
848
+ --accordion-item-border:none;
849
+ --accordion-item-border-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
850
+ --accordion-item-border-bottom-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
851
+ --accordion-content-padding-block:var(--bp-space-040);
852
+ --accordion-content-padding-inline:var(--bp-space-040);
853
+ --accordion-content-padding-block-end:var(--bp-space-060);
854
+ --accordion-content-gap:var(--bp-space-040);
855
+ --accordion-error-padding-block-start:var(--bp-space-040);
856
+ --accordion-error-padding-inline:var(--bp-space-040);
857
+ --accordion-fixed-content-gap:0.625rem;
858
+ --accordion-fixed-content-padding-block:0.625rem;
859
+ --accordion-fixed-content-padding-inline:0.625rem;
860
+ --accordion-header-text-color:var(--bp-text-text-on-light);
861
+ --accordion-status-margin:var(--bp-space-020);
862
+ --accordion-icon-size:var(--bp-size-050);
863
+ --accordion-icon-radius:var(--bp-radius-16);
864
+ --accordion-icon-margin:var(--bp-space-020);
865
+ --accordion-trigger-border:var(--bp-border-01) solid var(--bp-black-opacity-04);
866
+ --accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
867
+ --accordion-trigger-border-hover:var(--bp-border-01) solid var(--bp-black-opacity-08);
868
+ --accordion-trigger-padding:var(--bp-space-030) var(--bp-space-040) var(--bp-space-030) var(--bp-space-040);
869
+ --accordion-trigger-background-active:var(--bp-surface-accordion-surface-collapsed);
870
+ --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
871
+ --accordion-trigger-expanded-background-hover:var(--bp-surface-accordion-surface-expanded-hover);
872
+ --accordion-trigger-collapsed-background-focus:var(--bp-surface-accordion-surface-collapsed-hover);
873
+ --accordion-trigger-expanded-background-focus:var(--bp-surface-accordion-surface-expanded-hover);
874
+ --accordion-trigger-box-shadow:inset 0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
875
+ --accordion-trigger-icon-margin:var(--bp-space-030);
876
+ --accordion-trigger-icon-transform-collapsed:rotate(270deg);
877
+ --accordion-trigger-icon-transform-expanded:rotate(360deg);
878
+ }
879
+
880
+ .bp_accordion_module_accordionContent--8cf35[data-state=open]{
881
+ animation:bp_accordion_module_slideDown--8cf35 .15s ease-out;
882
+ }
883
+
884
+ .bp_accordion_module_accordionContent--8cf35[data-state=closed]{
885
+ animation:bp_accordion_module_slideUp--8cf35 .15s ease-out;
886
+ }
887
+
888
+ .bp_accordion_module_accordionContent--8cf35{
814
889
  overflow:hidden;
815
890
  }
816
891
 
817
- @keyframes bp_accordion_module_slideDown--13004{
892
+ @keyframes bp_accordion_module_slideDown--8cf35{
818
893
  from{
819
894
  height:0;
820
895
  }
@@ -822,7 +897,7 @@
822
897
  height:var(--radix-accordion-content-height);
823
898
  }
824
899
  }
825
- @keyframes bp_accordion_module_slideUp--13004{
900
+ @keyframes bp_accordion_module_slideUp--8cf35{
826
901
  from{
827
902
  height:var(--radix-accordion-content-height);
828
903
  }
@@ -830,110 +905,149 @@
830
905
  height:0;
831
906
  }
832
907
  }
833
- .bp_accordion_module_accordionContentWrapper--13004{
908
+ .bp_accordion_module_accordion--8cf35{
834
909
  display:flex;
835
910
  flex-direction:column;
836
- gap:var(--space-4);
837
- padding-block:var(--space-4);
838
- padding-block-end:var(--space-6);
839
- padding-inline:var(--space-4);
911
+ gap:var(--bp-space-030);
912
+ padding:var(--bp-space-030);
840
913
  }
841
914
 
842
- .bp_accordion_module_accordionInlineErrorWrapper--13004{
843
- padding-block-start:var(--space-4);
844
- padding-inline:var(--space-4);
915
+ .bp_accordion_module_accordionContentWrapper--8cf35{
916
+ display:flex;
917
+ flex-direction:column;
918
+ gap:var(--accordion-content-gap);
919
+ padding-block:var(--accordion-content-padding-block);
920
+ padding-block-end:var(--accordion-content-padding-block-end);
921
+ padding-inline:var(--accordion-content-padding-inline);
845
922
  }
846
923
 
847
- .bp_accordion_module_accordionItem--13004{
848
- border-bottom:var(--border-1) solid var(--border-divider-border);
849
- min-width:320px;
924
+ .bp_accordion_module_accordionInlineErrorWrapper--8cf35{
925
+ padding-block-start:var(--accordion-error-padding-block-start);
926
+ padding-inline:var(--accordion-error-padding-inline);
850
927
  }
851
- .bp_accordion_module_accordionItem--13004,.bp_accordion_module_accordionItem--13004 > [data-state=open]{
852
- background-color:var(--surface-accordion-surface);
928
+
929
+ .bp_accordion_module_accordionItem--8cf35{
930
+ -webkit-tap-highlight-color:transparent;
931
+ background:none;
932
+ border-bottom:var(--accordion-item-border);
933
+ border-radius:var(--accordion-item-radius);
934
+ min-width:var(--accordion-min-width);
935
+ }
936
+ .bp_accordion_module_accordionItem--8cf35[data-state=open]{
937
+ border:var(--accordion-item-border-expanded);
938
+ border-bottom:var(--accordion-item-border-bottom-expanded);
853
939
  }
854
940
 
855
- .bp_accordion_module_accordionFixedContent--13004{
856
- background-color:var(--surface-surface);
941
+ .bp_accordion_module_accordionFixedContent--8cf35{
942
+ background-color:var(--accordion-item-background-collapsed);
943
+ border:var(--accordion-trigger-border);
944
+ border-radius:var(--accordion-item-radius);
857
945
  display:flex;
858
946
  flex-direction:column;
859
- gap:var(--space-4);
860
- padding-block:var(--space-5);
861
- padding-inline:var(--space-4);
947
+ gap:var(--accordion-fixed-content-gap);
948
+ padding-block:var(--accordion-fixed-content-padding-block);
949
+ padding-inline:var(--accordion-fixed-content-padding-inline);
862
950
  }
863
951
 
864
- .bp_accordion_module_accordionHeader--13004{
865
- color:var(--text-text-on-light);
952
+ .bp_accordion_module_accordionHeader--8cf35{
866
953
  display:flex;
954
+ justify-content:space-between;
955
+ margin:0;
956
+ text-align:initial;
957
+ width:100%;
958
+ }
959
+
960
+ .bp_accordion_module_accordionItem--8cf35[data-modern=false] .bp_accordion_module_accordionHeader--8cf35{
961
+ color:var(--accordion-header-text-color);
867
962
  font-family:var(--title-small-font-family);
868
963
  font-size:var(--title-small-font-size);
869
964
  font-weight:var(--title-small-font-weight);
870
- justify-content:space-between;
871
965
  letter-spacing:var(--title-small-letter-spacing);
872
966
  line-height:var(--title-small-line-height);
873
- margin:0;
874
- text-align:initial;
875
967
  -webkit-text-decoration:var(--title-small-text-decoration);
876
968
  text-decoration:var(--title-small-text-decoration);
877
969
  text-transform:var(--title-small-text-case);
878
- width:100%;
879
970
  }
880
971
 
881
- .bp_accordion_module_accordionHeaderTrigger--13004{
972
+ .bp_accordion_module_accordionItem--8cf35[data-modern=true] .bp_accordion_module_accordionHeader--8cf35{
973
+ color:var(--accordion-header-text-color);
974
+ font-family:var(--title-medium-font-family);
975
+ font-size:var(--title-medium-font-size);
976
+ font-weight:var(--title-medium-font-weight);
977
+ letter-spacing:var(--title-medium-letter-spacing);
978
+ line-height:var(--title-medium-line-height);
979
+ line-height:var(--bp-font-line-height-04);
980
+ -webkit-text-decoration:var(--title-medium-text-decoration);
981
+ text-decoration:var(--title-medium-text-decoration);
982
+ text-transform:var(--title-medium-text-case);
983
+ }
984
+
985
+ .bp_accordion_module_accordionHeaderTrigger--8cf35{
882
986
  align-items:center;
883
987
  display:flex;
884
988
  }
885
989
 
886
- .bp_accordion_module_accordionStatus--13004{
887
- margin-inline-start:var(--space-2);
990
+ .bp_accordion_module_accordionStatus--8cf35{
991
+ margin-inline-start:var(--accordion-status-margin);
888
992
  }
889
993
 
890
- .bp_accordion_module_accordionIconWrapper--13004{
994
+ .bp_accordion_module_accordionIconWrapper--8cf35{
891
995
  align-items:center;
892
- border-radius:var(--radius-half);
996
+ border-radius:var(--accordion-icon-radius);
893
997
  display:flex;
894
- height:var(--size-4);
998
+ height:var(--accordion-icon-size);
895
999
  justify-content:center;
896
- margin-inline-start:var(--space-2);
897
- width:var(--size-4);
1000
+ margin-inline-start:var(--accordion-icon-margin);
1001
+ width:var(--accordion-icon-size);
898
1002
  }
899
1003
 
900
- .bp_accordion_module_accordionTrigger--13004{
1004
+ .bp_accordion_module_accordionTrigger--8cf35{
901
1005
  align-items:center;
902
- background-color:var(--surface-surface);
903
- border:none;
1006
+ background-color:var(--accordion-item-background-collapsed);
1007
+ border:var(--accordion-trigger-border);
1008
+ border-radius:var(--accordion-item-radius);
904
1009
  display:flex;
905
1010
  height:100%;
906
- padding:var(--space-4);
907
- padding-inline-end:var(--space-6);
1011
+ padding:var(--accordion-trigger-padding);
908
1012
  text-transform:capitalize;
909
1013
  width:100%;
910
1014
  }
911
- .bp_accordion_module_accordionTrigger--13004:active{
912
- background-color:var(--surface-surface);
1015
+ .bp_accordion_module_accordionTrigger--8cf35:disabled{
1016
+ cursor:default;
1017
+ opacity:.3;
1018
+ }
1019
+ .bp_accordion_module_accordionTrigger--8cf35:focus-visible{
1020
+ background-color:var(--accordion-trigger-collapsed-background-focus);
1021
+ border:var(--accordion-trigger-border-hover);
1022
+ box-shadow:var(--accordion-trigger-box-shadow);
1023
+ outline:none;
913
1024
  }
914
- .bp_accordion_module_accordionTrigger--13004:hover{
915
- background-color:var(--surface-accordion-surface-hover);
1025
+ .bp_accordion_module_accordionTrigger--8cf35:hover:not(:disabled){
1026
+ background-color:var(--accordion-trigger-collapsed-background-hover);
1027
+ border:var(--accordion-trigger-border-hover);
916
1028
  cursor:pointer;
917
1029
  }
918
- .bp_accordion_module_accordionTrigger--13004:focus-visible{
919
- background-color:var(--surface-surface-hover);
920
- box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
921
- outline:none;
1030
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]{
1031
+ background-color:var(--accordion-item-background-expanded);
1032
+ border:var(--accordion-trigger-expanded-border);
1033
+ border-bottom-left-radius:0;
1034
+ border-bottom-right-radius:0;
922
1035
  }
923
- .bp_accordion_module_accordionTrigger--13004:disabled{
924
- cursor:default;
925
- opacity:.3;
1036
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]:focus-visible{
1037
+ background-color:var(--accordion-trigger-expanded-background-focus);
1038
+ border:var(--accordion-trigger-expanded-border);
926
1039
  }
927
- .bp_accordion_module_accordionTrigger--13004:disabled:hover{
928
- background-color:var(--gray-white);
1040
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]:hover:not(:disabled){
1041
+ background-color:var(--accordion-trigger-expanded-background-hover);
1042
+ border:var(--accordion-trigger-expanded-border);
929
1043
  }
930
- .bp_accordion_module_accordionTrigger--13004 .bp_accordion_module_accordionTriggerIcon--13004{
931
- color:var(--gray-50);
1044
+ .bp_accordion_module_accordionTrigger--8cf35 .bp_accordion_module_accordionTriggerIcon--8cf35{
932
1045
  flex-shrink:0;
933
1046
  margin-inline-start:var(--space-3);
1047
+ transform:var(--accordion-trigger-icon-transform-collapsed);
934
1048
  }
935
- .bp_accordion_module_accordionTrigger--13004[data-state=open] .bp_accordion_module_accordionTriggerIcon--13004{
936
- transform:rotate(180deg);
1049
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open] .bp_accordion_module_accordionTriggerIcon--8cf35{
1050
+ transform:var(--accordion-trigger-icon-transform-expanded);
937
1051
  }
938
1052
 
939
1053
  .bp_avatar_module_avatar--e431a{
package/dist/lib-esm/modal/types.d.ts CHANGED
@@ -23,6 +23,8 @@ export interface ModalCloseProps {
23
23
  variant?: 'default' | 'onColor';
24
24
  /** The size of the button. Default: 'large'. */
25
25
  size?: IconButtonProps['size'];
26
+ /** Determines if the close button is disabled */
27
+ disabled?: boolean;
26
28
  }
27
29
  export interface ModalTriggerProps {
28
30
  /** Content of the Trigger element */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.52.1",
3
+ "version": "12.53.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {