@jobber/components 6.116.0 → 6.116.2

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/Button-cjs.js +3 -2
  2. package/dist/Button-es.js +3 -2
  3. package/dist/styles.css +25 -15
  4. package/package.json +2 -2
package/dist/Button-cjs.js CHANGED
@@ -40,10 +40,11 @@ function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variati
40
40
  * @deprecated Used composed solution instead
41
41
  */
42
42
  function ButtonContent({ label, icon, size = "base", iconOnRight = false, UNSAFE_className, UNSAFE_style, }) {
43
+ const iconSize = size === "large" ? "base" : size;
43
44
  return (React.createElement(React.Fragment, null,
44
- icon && !iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
45
+ icon && !iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
45
46
  label && (React.createElement(ButtonLabel, { size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonLabel, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonLabel }, label)),
46
- icon && iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
47
+ icon && iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
47
48
  }
48
49
  function getTypeSizes(size) {
49
50
  switch (size) {
package/dist/Button-es.js CHANGED
@@ -38,10 +38,11 @@ function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variati
38
38
  * @deprecated Used composed solution instead
39
39
  */
40
40
  function ButtonContent({ label, icon, size = "base", iconOnRight = false, UNSAFE_className, UNSAFE_style, }) {
41
+ const iconSize = size === "large" ? "base" : size;
41
42
  return (React__default.createElement(React__default.Fragment, null,
42
- icon && !iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
43
+ icon && !iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
43
44
  label && (React__default.createElement(ButtonLabel, { size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonLabel, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonLabel }, label)),
44
- icon && iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
45
+ icon && iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
45
46
  }
46
47
  function getTypeSizes(size) {
47
48
  switch (size) {
package/dist/styles.css CHANGED
@@ -10550,14 +10550,26 @@ input.oOrjwubmsVA- {
10550
10550
  background-color: var(--color-interactive--background--subtle--hover);
10551
10551
  }
10552
10552
 
10553
+ /* Extends beyond the container's padding box by --border-base so the green
10554
+ border overlays the grey container border. margin-left applies the horizontal
10555
+ offset uniformly to all left positions. */
10556
+
10553
10557
  .FDDKTZkTdfM- span {
10554
10558
  position: absolute;
10559
+ top: calc(-1 * 1px);
10560
+ top: calc(-1 * var(--border-base));
10555
10561
  left: 0;
10556
- width: calc(100% / var(--segmentedControl--option-count));
10557
- height: 100%;
10562
+ width: calc(
10563
+ 100% / var(--segmentedControl--option-count) + 2 * 1px
10564
+ );
10565
+ width: calc(
10566
+ 100% / var(--segmentedControl--option-count) + 2 * var(--border-base)
10567
+ );
10568
+ height: calc(100% + 2 * 1px);
10569
+ height: calc(100% + 2 * var(--border-base));
10558
10570
  box-sizing: border-box;
10559
- border: 1px solid hsl(107, 58%, 33%);
10560
- border: var(--border-base) solid var(--color-interactive);
10571
+ margin-left: calc(-1 * 1px);
10572
+ margin-left: calc(-1 * var(--border-base));
10561
10573
  border-radius: 8px;
10562
10574
  border-radius: var(--radius-base);
10563
10575
  background-color: rgba(255, 255, 255, 1);
@@ -10566,22 +10578,20 @@ input.oOrjwubmsVA- {
10566
10578
  transition: var(--timing-slow) left ease-out;
10567
10579
  }
10568
10580
 
10569
- /* Focus ring at z-index: 2 so hover backgrounds (z-index: 1) can't cover it.
10570
- Negative inset aligns with the span's outer edge so the green border stays
10571
- visible inside the focus ring. */
10581
+ /* Green border and focus ring live on ::after at z-index: 2 so hover
10582
+ backgrounds on adjacent labels (z-index: 1) can't cover them. */
10572
10583
 
10573
10584
  .FDDKTZkTdfM- span::after {
10574
10585
  content: "";
10575
10586
  position: absolute;
10576
- top: calc(-1 * 1px);
10577
- right: calc(-1 * 1px);
10578
- bottom: calc(-1 * 1px);
10579
- left: calc(-1 * 1px);
10580
- top: calc(-1 * var(--border-base));
10581
- right: calc(-1 * var(--border-base));
10582
- bottom: calc(-1 * var(--border-base));
10583
- left: calc(-1 * var(--border-base));
10587
+ top: 0;
10588
+ right: 0;
10589
+ bottom: 0;
10590
+ left: 0;
10584
10591
  z-index: 2;
10592
+ box-sizing: border-box;
10593
+ border: 1px solid hsl(107, 58%, 33%);
10594
+ border: var(--border-base) solid var(--color-interactive);
10585
10595
  border-radius: inherit;
10586
10596
  pointer-events: none;
10587
10597
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "6.116.0",
3
+ "version": "6.116.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
538
538
  "> 1%",
539
539
  "IE 10"
540
540
  ],
541
- "gitHead": "b7a5f58771bd824c02fd1e16f7eeea46a5d142cb"
541
+ "gitHead": "1853ff588cd6f7bb0fa74ce29538a10c21f854b0"
542
542
  }