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

package/src/lib/components/{ui/Button → Button}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Button
-menu: 'UI'
-route: /components/ui/button
+menu: 'Actions'
+route: /components/button
 ---
 
 # Button
@@ -10,8 +10,8 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Icon from '../../../../docs/_components/Icon'
-import Placeholder from '../../../../docs/_components/Placeholder'
+import Icon from '../../../docs/_components/Icon'
+import Placeholder from '../../../docs/_components/Placeholder'
 import Badge from '../Badge'
 import { Button } from './Button'
 
@@ -55,9 +55,6 @@ lowest:
 All priorities come in supported
 [component colors](/foundation/colors#component-colors).
 
-To complete the list, there is also a [link priority](#link)
-which is reserved for special cases.
-
 ### Filled
 
 The default, high-emphasis priority should be used for primary actions of your
@@ -121,21 +118,6 @@ the content.
   <Button priority="flat" label="Dark" color="dark" />
 </Playground>
 
-### Link
-
-Link button is more a workaround than a priority level. Use it for what needs
-to appear as navigation to users but where a button must be used due to
-technical reasons. Under normal circumstances, you should always use a link
-HTML element `<a href="…">` for navigation.
-
-⚠️ **Avoid using link buttons for actions**, choose flat or outline priority
-instead. This is because users expect navigation to happen when clicking on
-something what looks like a link.
-
-<Playground>
-  <Button label="Link that needs to be implemented as button" priority="link" />
-</Playground>
-
 ## Sizes
 
 Aside from the default (medium) size, two additional sizes are available: small
@@ -170,29 +152,55 @@ before or after the button's label.
     label="Icon after label"
     afterLabel={<Icon icon="star" />}
   />
-  <Button
-    label="Link button with icon"
-    beforeLabel={<Icon icon="star" />}
-    priority="link"
-  />
 </Playground>
 
 ### Icon Buttons
 
 For clear and simple actions, buttons can visually consist just of an icon.
-Label remains mandatory to keep the button accessible. Icon buttons can
-optionally enhance on desktop and display the label once there is enough room
-for it.
+Label remains mandatory to keep the button accessible.
 
 <Playground>
   <Button
     label="Icon button"
     labelVisibility="none"
-    afterLabel={<Icon icon="pencil" />}
+    beforeLabel={<Icon icon="pencil" />}
+  />
+</Playground>
+
+Icon buttons can optionally enhance on a [breakpoint](/foundation/breakpoints)
+of your choice and display label once you know there is enough room for it.
+
+📐 Try resizing your browser to see how label visibility changes.
+
+<Playground>
+  <Button
+    label="Label visible from sm up"
+    labelVisibility="sm"
+    beforeLabel={<Icon icon="pencil" />}
+  />
+  <Button
+    label="Label visible from md up"
+    labelVisibility="md"
+    beforeLabel={<Icon icon="pencil" />}
+  />
+  <Button
+    label="Label visible from lg up"
+    labelVisibility="lg"
+    beforeLabel={<Icon icon="pencil" />}
+  />
+  <Button
+    label="Label visible from xl up"
+    labelVisibility="xl"
+    beforeLabel={<Icon icon="pencil" />}
+  />
+  <Button
+    label="Label visible from xxl up"
+    labelVisibility="xxl"
+    beforeLabel={<Icon icon="pencil" />}
   />
   <Button
-    label="Icon button with label visible on desktop"
-    labelVisibility="desktop"
+    label="Label visible from xxxl up"
+    labelVisibility="xxxl"
     beforeLabel={<Icon icon="pencil" />}
   />
 </Playground>
@@ -237,7 +245,7 @@ Badges play nicely with icon buttons, too:
   />
   <Button
     label="Icon button with badge"
-    labelVisibility="desktop"
+    labelVisibility="md"
     priority="outline"
     beforeLabel={<Icon icon="warning-sign" />}
     startCorner={<Badge label={3} color="danger" />}
@@ -256,46 +264,127 @@ Disabled state makes the action unavailable.
   <Button label="Disabled flat button" priority="flat" disabled />
 </Playground>
 
-### Loading State
+### Feedback State
+
+When user's action triggers an asynchronous process on background, the button's
+feedback state can be indicated by showing an icon. The icon replaces button's
+label while retaining original dimensions of the button. Buttons in feedback
+state are automatically disabled to prevent unwanted interaction.
 
-When an action triggers an asynchronous process on background, the button's
-loading state can be indicated by showing a loading icon. Buttons in loading
-state are automatically made disabled to prevent unwanted interaction.
+Filled buttons in feedback state:
 
 <Playground>
   <Button
-    label="Button in loading state"
-    loadingIcon={(
-      <span className="d-inline-flex animation-spin-counterclockwise">
-        <Icon icon="loading" />
-      </span>
-    )}
+    label="Success"
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
   />
   <Button
-    label="Icon button in loading state"
+    label="Success"
     labelVisibility="none"
-    beforeLabel={<Icon icon="pencil" />}
-    loadingIcon={(
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
+    endCorner={<Badge color="danger" label={3} />}
+  />
+  <Placeholder dark inline>
+    <Button
+      label="Light"
+      color="light"
+      feedbackIcon={<Icon icon="success" />}
+    />
+  </Placeholder>
+  <Button
+    label="Dark"
+    color="dark"
+    feedbackIcon={<Icon icon="success" />}
+  />
+  <Button
+    label="Primary"
+    feedbackIcon={(
       <span className="d-inline-flex animation-spin-counterclockwise">
         <Icon icon="loading" />
       </span>
     )}
   />
+</Playground>
+
+Outline buttons in feedback state:
+
+<Playground>
+  <Button
+    label="Success"
+    priority="outline"
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
+  />
   <Button
-    label="Icon button with badge, loading"
-    labelVisibility="desktop"
-    beforeLabel={<Icon icon="pencil" />}
-    loadingIcon={(
+    label="Success"
+    labelVisibility="none"
+    priority="outline"
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
+    endCorner={<Badge color="danger" label={3} />}
+  />
+  <Placeholder dark inline>
+    <Button
+      label="Light"
+      priority="outline"
+      color="light"
+      feedbackIcon={<Icon icon="success" />}
+    />
+  </Placeholder>
+  <Button
+    label="Dark"
+    priority="outline"
+    color="dark"
+    feedbackIcon={<Icon icon="success" />}
+  />
+  <Button
+    label="Primary"
+    priority="outline"
+    feedbackIcon={(
       <span className="d-inline-flex animation-spin-counterclockwise">
         <Icon icon="loading" />
       </span>
     )}
-    startCorner={<Badge label={3} color="danger" />}
+  />
+</Playground>
+
+Flat buttons in feedback state:
+
+<Playground>
+  <Button
+    label="Success"
+    priority="flat"
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
+  />
+  <Button
+    label="Success"
+    labelVisibility="none"
+    priority="flat"
+    color="success"
+    feedbackIcon={<Icon icon="success" />}
+    endCorner={<Badge color="danger" label={3} />}
+  />
+  <Placeholder dark inline>
+    <Button
+      label="Light"
+      priority="flat"
+      color="light"
+      feedbackIcon={<Icon icon="success" />}
+    />
+  </Placeholder>
+  <Button
+    label="Dark"
+    priority="flat"
+    color="dark"
+    feedbackIcon={<Icon icon="success" />}
   />
   <Button
-    label="Icon after label, loading"
-    afterLabel={<Icon icon="up" />}
-    loadingIcon={(
+    label="Primary"
+    priority="flat"
+    feedbackIcon={(
       <span className="d-inline-flex animation-spin-counterclockwise">
         <Icon icon="loading" />
       </span>
@@ -308,9 +397,10 @@ animation is made.
 
 ## API
 
-In addition to the options below, you can add any custom attributes that do not
-interfere with the API, and they will be passed to the `button` HTML element.
-This is useful mainly to improve component's accessibility.
+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
+interactive and helps improve its accessibility.
 
 <Props table of={Button} />
 
@@ -318,9 +408,6 @@ This is useful mainly to improve component's accessibility.
 
 ### Common Theming Options
 
-The following theme options are common to all priorities and color variants
-**except** the `link` priority (see [below for more](#link-priority)):
-
 | Custom Property                | Description                                  |
 |--------------------------------|----------------------------------------------|
 | `--rui-Button__font-weight`    | Font weight                                  |
@@ -351,20 +438,6 @@ Where:
   - `color`, `border-color`, or `background` for the `outline` priority,
   - `color` or `background` for the `flat` priority.
 
-#### Theming Link Priority
-
-The `link` priority is treated a bit different because from the theming point of
-view it doesn't share anything with other priorities. However, it shares
-everything with common links and thus can be adjusted by editing corresponding
-design tokens:
-
-| Custom Property               | Description                                  |
-|-------------------------------|----------------------------------------------|
-| `--rui-link-color`            | Text color                                   |
-| `--rui-link-decoration`       | Text decoration, e.g. underline              |
-| `--rui-link-hover-color`      | Text color on hover                          |
-| `--rui-link-hover-decoration` | Text decoration on hover                     |
-
 ### Theming Sizes
 
 Available sizes can be adjusted as follows:
@@ -470,3 +543,15 @@ Example:
     />
   </div>
 </Playground>
+
+### Theming Feedback State
+
+Similarly to disabled state, opacity and cursor can be set for buttons in
+feedback state.
+
+| Custom Property                   | Description                                          |
+|-----------------------------------|------------------------------------------------------|
+| `--rui-Button--feedback__opacity` | Opacity of buttons in feedback state                 |
+| `--rui-Button--feedback__cursor`  | Cursor to show on hovering buttons in feedback state |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

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

@@ -0,0 +1,148 @@
+@use 'sass:map';
+@use '../../styles/tools/breakpoint';
+@use 'settings';
+@use 'theme';
+@use 'tools';
+
+.root {
+  @include tools.button();
+}
+
+.label {
+  display: block;
+}
+
+.beforeLabel,
+.afterLabel,
+.startCorner,
+.endCorner,
+.feedbackIcon {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.startCorner,
+.endCorner {
+  position: absolute;
+  top: -0.35rem;
+  z-index: 2;
+}
+
+.startCorner {
+  left: 0;
+  margin-left: -0.35rem;
+}
+
+.endCorner {
+  right: 0;
+  margin-right: -0.35rem;
+}
+
+.feedbackIcon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  align-items: center;
+}
+
+.rootSizeSmall {
+  @include tools.button-size(small);
+}
+
+.rootSizeMedium {
+  @include tools.button-size(medium);
+}
+
+.rootSizeLarge {
+  @include tools.button-size(large);
+}
+
+.rootBlock {
+  width: 100%;
+}
+
+.hasRootFeedback:disabled {
+  opacity: theme.$feedback-opacity;
+  cursor: theme.$feedback-cursor;
+}
+
+.hasRootFeedback .label,
+.hasRootFeedback .beforeLabel,
+.hasRootFeedback .afterLabel {
+  color: transparent;
+}
+
+.rootGrouped {
+  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(: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);
+  }
+}
+
+.rootGrouped .startCorner,
+.rootGrouped .endCorner {
+  z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
+}
+
+.withLabelHidden,
+.withLabelVisibleSm,
+.withLabelVisibleMd,
+.withLabelVisibleLg,
+.withLabelVisibleXl,
+.withLabelVisibleXxl,
+.withLabelVisibleXxxl {
+  @include tools.hide-label();
+}
+
+.withLabelVisibleSm {
+  @include breakpoint.up(sm) {
+    @include tools.show-label();
+  }
+}
+
+.withLabelVisibleMd {
+  @include breakpoint.up(md) {
+    @include tools.show-label();
+  }
+}
+
+.withLabelVisibleLg {
+  @include breakpoint.up(lg) {
+    @include tools.show-label();
+  }
+}
+
+.withLabelVisibleXl {
+  @include breakpoint.up(xl) {
+    @include tools.show-label();
+  }
+}
+
+.withLabelVisibleXxl {
+  @include breakpoint.up(xxl) {
+    @include tools.show-label();
+  }
+}
+
+.withLabelVisibleXxxl {
+  @include breakpoint.up(xxxl) {
+    @include tools.show-label();
+  }
+}

package/src/lib/components/{ui/Button → Button}/_priorities.scss

@@ -123,10 +123,6 @@
   @include tools.button-color(flat, dark);
 }
 
-.rootPriorityLink {
-  @include tools.button-link();
-}
-
 .rootPriorityFilled.rootGrouped:not(:first-child)::before,
 .rootPriorityFlat.rootGrouped:not(:first-child)::before {
   content: '';

package/src/lib/components/{ui/Button → Button}/_settings.scss

@@ -1,10 +1,9 @@
-@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;
 $icon-spacing: spacing.of(2);
-$breakpoint: lg;
 
 $group-z-indexes: (
   button: auto,

package/src/lib/components/{ui/Button → Button}/_theme.scss

@@ -6,8 +6,11 @@ $letter-spacing: var(--rui-Button__letter-spacing);
 $text-transform: var(--rui-Button__text-transform);
 $border-width: var(--rui-Button__border-width);
 $border-radius: var(--rui-Button__border-radius);
+
 $disabled-opacity: var(--rui-Button--disabled__opacity);
 $disabled-cursor: var(--rui-Button--disabled__cursor);
+$feedback-opacity: var(--rui-Button--feedback__opacity);
+$feedback-cursor: var(--rui-Button--feedback__cursor);
 
 $group-filled-gap: var(--rui-ButtonGroup--filled__gap);
 $group-filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
@@ -19,17 +22,6 @@ $group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
 
 $group-outline-gap: var(--rui-ButtonGroup--outline__gap);
 
-$link-priority-properties: (
-  default: (
-    color: var(--rui-link-color),
-    text-decoration: var(--rui-link-decoration),
-  ),
-  hover: (
-    color: var(--rui-link-hover-color),
-    text-decoration: var(--rui-link-hover-decoration),
-  ),
-);
-
 $sizes: (
   small: (
     height: var(--rui-Button--small__height),

package/src/lib/components/{ui/Button → Button}/_tools.scss

@@ -6,9 +6,6 @@
 //    - outline
 //    - flat
 //
-//    The “link” priority is treated separately as it doesn't share much of appearance with other
-//    variants listed above.
-//
 // 2. Disabled state theming is optional so `default` theme options are used if no `disabled`
 //    styling is provided for specific variant.
 //
@@ -16,15 +13,14 @@
 //
 // 4. Icon buttons should appear as squares, that's why width and height is equal here.
 //
-// 5. Unset undesired properties so the link button appears as link while it keeps some button
-//    settings. It might be tempting to use something like `all: initial` or `all: inherit` but it
-//    actually causes more harm rather than a useful reset.
+// 5. Use original padding to restore square buttons back to their size.
 
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/transition';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/transition';
 @use 'settings';
 @use 'theme';
 
@@ -65,20 +61,16 @@
   }
 }
 
-@mixin _unset-button-appearance() {
-  width: unset;
-  height: unset;
-  padding: unset;
-  font-weight: unset;
-  line-height: unset;
-  font-family: unset;
-  text-transform: unset;
-  vertical-align: unset;
-  border: unset;
-  border-radius: unset;
-  box-shadow: unset;
-  user-select: unset;
-  transition: unset;
+// 4.
+@mixin _button-square() {
+  --rui-local-padding: 0;
+  --rui-local-width: var(--rui-local-height);
+}
+
+// 5.
+@mixin _button-size-restore() {
+  --rui-local-padding: var(--rui-local-padding-original);
+  --rui-local-width: unset;
 }
 
 @mixin button() {
@@ -86,6 +78,7 @@
 
   position: relative; // 3.
   display: inline-flex;
+  column-gap: settings.$icon-spacing;
   align-items: center;
   justify-content: center;
   width: var(--rui-local-width, auto);
@@ -95,7 +88,6 @@
   letter-spacing: theme.$letter-spacing;
   text-align: center;
   text-decoration: none;
-  text-overflow: ellipsis;
   text-transform: theme.$text-transform;
   vertical-align: middle;
   color: var(--rui-local-color);
@@ -126,20 +118,8 @@
 
   --rui-local-height: #{map.get($properties, height)};
   --rui-local-padding: 0 #{map.get($properties, padding-x)};
+  --rui-local-padding-original: 0 #{map.get($properties, padding-x)}; // 5.
   --rui-local-font-size: #{map.get($properties, font-size)};
-
-  &.withLabelHidden,
-  &.withLabelHiddenMobile {
-    --rui-local-padding: 0;
-    --rui-local-width: #{map.get($properties, height)}; // 4.
-  }
-
-  &.withLabelHiddenMobile {
-    @include breakpoint.up(settings.$breakpoint) {
-      --rui-local-padding: 0 #{map.get($properties, padding-x)};
-      --rui-local-width: auto;
-    }
-  }
 }
 
 @mixin button-color($priority, $color) {
@@ -159,15 +139,18 @@
   }
 }
 
-@mixin button-link() {
-  @include _unset-button-appearance(); // 5.
+@mixin hide-label() {
+  @include _button-square();
+
+  .label {
+    @include accessibility.hide-text();
+  }
+}
 
-  text-decoration: map.get(theme.$link-priority-properties, default, text-decoration);
-  color: map.get(theme.$link-priority-properties, default, color);
+@mixin show-label() {
+  @include _button-size-restore();
 
-  &:not(:disabled):hover,
-  &:not(:disabled):focus {
-    text-decoration: map.get(theme.$link-priority-properties, hover, text-decoration);
-    color: map.get(theme.$link-priority-properties, hover, color);
+  .label {
+    @include accessibility.unhide-text();
   }
 }

package/src/lib/components/Button/helpers/getRootLabelVisibilityClassName.js

@@ -0,0 +1,33 @@
+export default (labelVisibility, styles) => {
+  // Intentionally omitting `xs` which means label is visible on all screen sizes.
+
+  if (labelVisibility === 'sm') {
+    return styles.withLabelVisibleSm;
+  }
+
+  if (labelVisibility === 'md') {
+    return styles.withLabelVisibleMd;
+  }
+
+  if (labelVisibility === 'lg') {
+    return styles.withLabelVisibleLg;
+  }
+
+  if (labelVisibility === 'xl') {
+    return styles.withLabelVisibleXl;
+  }
+
+  if (labelVisibility === 'xxl') {
+    return styles.withLabelVisibleXxl;
+  }
+
+  if (labelVisibility === 'xxxl') {
+    return styles.withLabelVisibleXxxl;
+  }
+
+  if (labelVisibility === 'none') {
+    return styles.withLabelHidden;
+  }
+
+  return null;
+};