@react-ui-org/react-ui 0.44.0 → 0.46.0

package/src/lib/components/Button/README.mdx

@@ -207,7 +207,7 @@ of your choice and display label once you know there is enough room for it.
 
 ## Buttons with Badges
 
-A [Badge](/components/ui/badge) can be added to buttons to provide additional
+A [Badge](/components/badge) can be added to buttons to provide additional
 information or to draw user's attention.
 
 <Playground>
@@ -399,7 +399,7 @@ animation is made.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `button` HTML element. This enables making the component
+passed to the `<button>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Button} />
@@ -448,7 +448,11 @@ Where:
 
 - `<SIZE>` is one of `small`, `medium`, or `large` (see [Sizes](#sizes) and
   [API](#api))
-- `<PROPERTY>` is one of `height`, `padding-x`, or `font-size`
+- `<PROPERTY>` is one of `height`, `padding-x`, `padding-y`, or `font-size`
+
+👉 Button sizes are linked to
+[box field sizes](/customize/theming/forms#box-field-sizes) sizes so they align
+nicely when placed in row.
 
 ### Example Theme
 
@@ -464,6 +468,7 @@ Where:
           0.1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
         --rui-Button--medium__height: 3rem;
         --rui-Button--medium__padding-x: 1.25rem;
+        --rui-Button--medium__padding-y: 0.25rem;
       }
     `}
   </style>

package/src/lib/components/Button/_base.scss

@@ -1,15 +1,15 @@
-@use 'sass:map';
-@use '../../styles/tools/breakpoint';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/tools/breakpoint";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .root {
-  @include tools.button();
+    @include tools.button();
 }
 
 .label {
-  display: block;
+    display: block;
 }
 
 .beforeLabel,
@@ -17,88 +17,88 @@
 .startCorner,
 .endCorner,
 .feedbackIcon {
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
 }
 
 .startCorner,
 .endCorner {
-  position: absolute;
-  top: -0.35rem;
-  z-index: 2;
+    position: absolute;
+    top: -0.35rem;
+    z-index: 2;
 }
 
 .startCorner {
-  left: 0;
-  margin-left: -0.35rem;
+    left: 0;
+    margin-left: -0.35rem;
 }
 
 .endCorner {
-  right: 0;
-  margin-right: -0.35rem;
+    right: 0;
+    margin-right: -0.35rem;
 }
 
 .feedbackIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    align-items: center;
 }
 
 .rootSizeSmall {
-  @include tools.button-size(small);
+    @include tools.button-size(small);
 }
 
 .rootSizeMedium {
-  @include tools.button-size(medium);
+    @include tools.button-size(medium);
 }
 
 .rootSizeLarge {
-  @include tools.button-size(large);
+    @include tools.button-size(large);
 }
 
 .rootBlock {
-  width: 100%;
+    width: 100%;
 }
 
 .hasRootFeedback:disabled {
-  opacity: theme.$feedback-opacity;
-  cursor: theme.$feedback-cursor;
+    opacity: theme.$feedback-opacity;
+    cursor: theme.$feedback-cursor;
 }
 
 .hasRootFeedback .label,
 .hasRootFeedback .beforeLabel,
 .hasRootFeedback .afterLabel {
-  color: transparent;
+    color: transparent;
 }
 
 .rootGrouped {
-  z-index: map.get(settings.$group-z-indexes, button);
+    z-index: map.get(settings.$group-z-indexes, button);
 
-  &:not(:first-child) {
-    margin-left: var(--local-gap);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+    &:not(:first-child) {
+        margin-left: var(--rui-local-gap);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 
-  &:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+    &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-  &:focus,
-  &:not(:disabled):hover {
-    z-index: map.get(settings.$group-z-indexes, button-hover);
-  }
+    &:focus,
+    &:not(:disabled):hover {
+        z-index: map.get(settings.$group-z-indexes, button-hover);
+    }
 }
 
 .rootGrouped .startCorner,
 .rootGrouped .endCorner {
-  z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
+    z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 
 .withLabelHidden,
@@ -108,41 +108,41 @@
 .withLabelVisibleXl,
 .withLabelVisibleXxl,
 .withLabelVisibleXxxl {
-  @include tools.hide-label();
+    @include tools.hide-label();
 }
 
 .withLabelVisibleSm {
-  @include breakpoint.up(sm) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(sm) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleMd {
-  @include breakpoint.up(md) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(md) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleLg {
-  @include breakpoint.up(lg) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(lg) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleXl {
-  @include breakpoint.up(xl) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(xl) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleXxl {
-  @include breakpoint.up(xxl) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(xxl) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleXxxl {
-  @include breakpoint.up(xxxl) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(xxxl) {
+        @include tools.show-label();
+    }
 }

package/src/lib/components/Button/_priorities.scss

@@ -1,152 +1,152 @@
-@use 'sass:map';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .rootPriorityFilled.rootColorPrimary {
-  @include tools.button-color(filled, primary);
+    @include tools.button-color(filled, primary);
 }
 
 .rootPriorityFilled.rootColorSecondary {
-  @include tools.button-color(filled, secondary);
+    @include tools.button-color(filled, secondary);
 }
 
 .rootPriorityFilled.rootColorSuccess {
-  @include tools.button-color(filled, success);
+    @include tools.button-color(filled, success);
 }
 
 .rootPriorityFilled.rootColorWarning {
-  @include tools.button-color(filled, warning);
+    @include tools.button-color(filled, warning);
 }
 
 .rootPriorityFilled.rootColorDanger {
-  @include tools.button-color(filled, danger);
+    @include tools.button-color(filled, danger);
 }
 
 .rootPriorityFilled.rootColorHelp {
-  @include tools.button-color(filled, help);
+    @include tools.button-color(filled, help);
 }
 
 .rootPriorityFilled.rootColorInfo {
-  @include tools.button-color(filled, info);
+    @include tools.button-color(filled, info);
 }
 
 .rootPriorityFilled.rootColorNote {
-  @include tools.button-color(filled, note);
+    @include tools.button-color(filled, note);
 }
 
 .rootPriorityFilled.rootColorLight {
-  @include tools.button-color(filled, light);
+    @include tools.button-color(filled, light);
 }
 
 .rootPriorityFilled.rootColorDark {
-  @include tools.button-color(filled, dark);
+    @include tools.button-color(filled, dark);
 }
 
 .rootPriorityOutline.rootColorPrimary {
-  @include tools.button-color(outline, primary);
+    @include tools.button-color(outline, primary);
 }
 
 .rootPriorityOutline.rootColorSecondary {
-  @include tools.button-color(outline, secondary);
+    @include tools.button-color(outline, secondary);
 }
 
 .rootPriorityOutline.rootColorSuccess {
-  @include tools.button-color(outline, success);
+    @include tools.button-color(outline, success);
 }
 
 .rootPriorityOutline.rootColorWarning {
-  @include tools.button-color(outline, warning);
+    @include tools.button-color(outline, warning);
 }
 
 .rootPriorityOutline.rootColorDanger {
-  @include tools.button-color(outline, danger);
+    @include tools.button-color(outline, danger);
 }
 
 .rootPriorityOutline.rootColorHelp {
-  @include tools.button-color(outline, help);
+    @include tools.button-color(outline, help);
 }
 
 .rootPriorityOutline.rootColorInfo {
-  @include tools.button-color(outline, info);
+    @include tools.button-color(outline, info);
 }
 
 .rootPriorityOutline.rootColorNote {
-  @include tools.button-color(outline, note);
+    @include tools.button-color(outline, note);
 }
 
 .rootPriorityOutline.rootColorLight {
-  @include tools.button-color(outline, light);
+    @include tools.button-color(outline, light);
 }
 
 .rootPriorityOutline.rootColorDark {
-  @include tools.button-color(outline, dark);
+    @include tools.button-color(outline, dark);
 }
 
 .rootPriorityFlat.rootColorPrimary {
-  @include tools.button-color(flat, primary);
+    @include tools.button-color(flat, primary);
 }
 
 .rootPriorityFlat.rootColorSecondary {
-  @include tools.button-color(flat, secondary);
+    @include tools.button-color(flat, secondary);
 }
 
 .rootPriorityFlat.rootColorSuccess {
-  @include tools.button-color(flat, success);
+    @include tools.button-color(flat, success);
 }
 
 .rootPriorityFlat.rootColorWarning {
-  @include tools.button-color(flat, warning);
+    @include tools.button-color(flat, warning);
 }
 
 .rootPriorityFlat.rootColorDanger {
-  @include tools.button-color(flat, danger);
+    @include tools.button-color(flat, danger);
 }
 
 .rootPriorityFlat.rootColorHelp {
-  @include tools.button-color(flat, help);
+    @include tools.button-color(flat, help);
 }
 
 .rootPriorityFlat.rootColorInfo {
-  @include tools.button-color(flat, info);
+    @include tools.button-color(flat, info);
 }
 
 .rootPriorityFlat.rootColorNote {
-  @include tools.button-color(flat, note);
+    @include tools.button-color(flat, note);
 }
 
 .rootPriorityFlat.rootColorLight {
-  @include tools.button-color(flat, light);
+    @include tools.button-color(flat, light);
 }
 
 .rootPriorityFlat.rootColorDark {
-  @include tools.button-color(flat, dark);
+    @include tools.button-color(flat, dark);
 }
 
 .rootPriorityFilled.rootGrouped:not(:first-child)::before,
 .rootPriorityFlat.rootGrouped:not(:first-child)::before {
-  content: '';
-  position: absolute;
-  top: calc(-1 * #{theme.$border-width});
-  bottom: calc(-1 * #{theme.$border-width});
-  left: calc(-1 * #{theme.$border-width});
-  z-index: map.get(settings.$group-z-indexes, separator);
-  border-left: var(--local-separator-width) solid var(--local-separator-color);
-  transform: translateX(calc(-0.5 * var(--local-gap) - 50%));
+    content: "";
+    position: absolute;
+    top: calc(-1 * #{theme.$border-width});
+    bottom: calc(-1 * #{theme.$border-width});
+    left: calc(-1 * #{theme.$border-width});
+    z-index: map.get(settings.$group-z-indexes, separator);
+    border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
+    transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
 
 .rootPriorityFilled.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-filled-gap};
-  --local-separator-width: #{theme.$group-filled-separator-width};
-  --local-separator-color: #{theme.$group-filled-separator-color};
+    --rui-local-gap: #{theme.$group-filled-gap};
+    --rui-local-separator-width: #{theme.$group-filled-separator-width};
+    --rui-local-separator-color: #{theme.$group-filled-separator-color};
 }
 
 .rootPriorityFlat.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-flat-gap};
-  --local-separator-width: #{theme.$group-flat-separator-width};
-  --local-separator-color: #{theme.$group-flat-separator-color};
+    --rui-local-gap: #{theme.$group-flat-gap};
+    --rui-local-separator-width: #{theme.$group-flat-separator-width};
+    --rui-local-separator-color: #{theme.$group-flat-separator-color};
 }
 
 .rootPriorityOutline.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-outline-gap};
+    --rui-local-gap: #{theme.$group-outline-gap};
 }

package/src/lib/components/Button/_settings.scss

@@ -1,21 +1,21 @@
-@use '../../styles/theme/typography';
-@use '../../styles/tools/spacing';
+@use "../../styles/theme/typography";
+@use "../../styles/tools/spacing";
 
 $font-family: typography.$font-family-base;
-$line-height: typography.$line-height-base;
+$line-height: typography.$line-height-small;
 $icon-spacing: spacing.of(2);
 
 $group-z-indexes: (
-  button: auto,
-  button-hover: 1,
-  separator: 2,
-  button-overflowing-elements: 3,
+    button: auto,
+    button-hover: 1,
+    separator: 2,
+    button-overflowing-elements: 3,
 );
 
 $themeable-variants: (primary, secondary, success, warning, danger, help, info, note, light, dark);
 $themeable-states: (default, hover, active, disabled);
 $themeable-priority-properties: (
-  filled: (color, border-color, background, box-shadow),
-  outline: (color, border-color, background),
-  flat: (color, background),
+    filled: (color, border-color, background, box-shadow),
+    outline: (color, border-color, background),
+    flat: (color, background),
 );

package/src/lib/components/Button/_theme.scss

@@ -23,19 +23,22 @@ $group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
 $group-outline-gap: var(--rui-ButtonGroup--outline__gap);
 
 $sizes: (
-  small: (
-    height: var(--rui-Button--small__height),
-    padding-x: var(--rui-Button--small__padding-x),
-    font-size: var(--rui-Button--small__font-size),
-  ),
-  medium: (
-    height: var(--rui-Button--medium__height),
-    padding-x: var(--rui-Button--medium__padding-x),
-    font-size: var(--rui-Button--medium__font-size),
-  ),
-  large: (
-    height: var(--rui-Button--large__height),
-    padding-x: var(--rui-Button--large__padding-x),
-    font-size: var(--rui-Button--large__font-size),
-  ),
+    small: (
+        height: var(--rui-Button--small__height),
+        padding-y: var(--rui-Button--small__padding-y),
+        padding-x: var(--rui-Button--small__padding-x),
+        font-size: var(--rui-Button--small__font-size),
+    ),
+    medium: (
+        height: var(--rui-Button--medium__height),
+        padding-y: var(--rui-Button--medium__padding-y),
+        padding-x: var(--rui-Button--medium__padding-x),
+        font-size: var(--rui-Button--medium__font-size),
+    ),
+    large: (
+        height: var(--rui-Button--large__height),
+        padding-y: var(--rui-Button--large__padding-y),
+        padding-x: var(--rui-Button--large__padding-x),
+        font-size: var(--rui-Button--large__font-size),
+    ),
 );