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

package/src/lib/styles/tools/form-fields/_inline-field-layout.scss

@@ -10,6 +10,7 @@
 
 @use "../../settings/forms";
 @use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
 @use "../../theme/typography";
 @use "../breakpoint";
 
@@ -27,11 +28,18 @@
     }
 }
 
-@mixin field() {
+@mixin field($type) {
     display: flex; // 1.
     align-items: flex-start;
     min-width: 0; // 1.
 
+    @if $type == "radio" {
+        flex-direction: row;
+    } @else {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+    }
+
     .input {
         flex: none;
     }
@@ -45,7 +53,7 @@
 
 @mixin has-label-before() {
     .field {
-        flex-direction: row-reverse;
+        flex-direction: row;
     }
 
     .label,
@@ -62,12 +70,45 @@
 
     @include breakpoint.up(forms.$horizontal-breakpoint) {
         &.rootLayoutHorizontal {
+            grid: inherit;
+            grid-template-columns: subgrid;
+            grid-column: span 2;
+
+            @supports not (grid-template-columns: subgrid) {
+                display: contents;
+            }
+        }
+
+        &.rootLayoutHorizontal .field {
+            display: contents;
+        }
+
+        &.rootLayoutHorizontal .label {
+            grid-column-start: 1;
+            width: auto;
+            padding-right: settings.$horizontal-inner-gap;
+            margin-left: 0;
+            text-align: theme.$horizontal-label-text-align;
+        }
+
+        &.rootLayoutHorizontal .input,
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
             grid-column-start: 2;
         }
 
-        &.rootLayoutHorizontal .label,
-        &.rootLayoutHorizontal .optionLabel {
-            width: auto; // 1.
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
+            width: auto;
+            max-width: 100%;
+
+            @supports not (grid-template-columns: subgrid) {
+                margin-top: calc(-1 * var(--rui-FormLayout__row-gap));
+            }
+        }
+
+        &.rootLayoutHorizontal.hasRootLabelBefore .label {
+            margin-right: 0;
         }
     }
 }

package/src/lib/theme.scss

@@ -863,13 +863,13 @@
     --rui-FormField--check--checked__check-background-color: var(--rui-color-active);
 
     //
-    // Link
-    // ====
+    // TextLink
+    // ========
 
-    --rui-Link__color: var(--rui-link-color);
-    --rui-Link__text-decoration: var(--rui-link-decoration);
-    --rui-Link--hover__color: var(--rui-link-hover-color);
-    --rui-Link--hover__text-decoration: var(--rui-link-hover-decoration);
+    --rui-TextLink__color: var(--rui-link-color);
+    --rui-TextLink__text-decoration: var(--rui-link-decoration);
+    --rui-TextLink--hover__color: var(--rui-link-hover-color);
+    --rui-TextLink--hover__text-decoration: var(--rui-link-hover-decoration);
 
     //
     // Modal

package/src/lib/components/Link/Link.scss

@@ -1,11 +0,0 @@
-@use "theme";
-
-.root {
-    text-decoration: theme.$link-text-decoration;
-    color: theme.$link-color;
-
-    &:hover {
-        text-decoration: theme.$link-hover-text-decoration;
-        color: theme.$link-hover-color;
-    }
-}

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

@@ -1,85 +0,0 @@
----
-name: Link
-menu: 'Actions'
-route: /components/link
----
-
-# Link
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import Placeholder from '../../../docs/_components/Placeholder'
-import { Link } from './Link'
-
-Link allow users to follow navigation.
-
-## Basic Usage
-
-To implement the Link component, you need to import it first:
-
-```js
-import { Link } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Link href="/contribute/guidelines">How can I contribute to React UI?</Link>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-**Avoid using links for actions**, use a [Button](/components/button)
-instead. This is because users expect navigation to happen when clicking on
-something what looks like a link.
-
-## Block-Level Content
-
-Besides text, link can contain block-level elements too.
-
-<Playground>
-  <Link href="/contribute/guidelines">
-    <Placeholder>Block-level element wrapped with link</Placeholder>
-  </Link>
-</Playground>
-
-## Custom Routing
-
-It's common to use custom function for routing within SPAs. Use the
-`onClick` option to provide such function.
-
-<Playground>
-  <Link
-    href="/contribute/guidelines"
-    onClick={(event) => {
-      event.preventDefault();
-      window.location = event.currentTarget.getAttribute('href');
-    }}
-  >
-    This link is controlled by custom function
-  </Link>
-</Playground>
-
-## API
-
-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 `a` HTML element. This enables making the component interactive
-and helps improve its accessibility.
-
-<Props table of={Link} />
-
-## Theming
-
-| Custom Property                      | Description                                  |
-|--------------------------------------|----------------------------------------------|
-| `--rui-Link__color`                  | Text color                                   |
-| `--rui-Link__text-decoration`        | Text decoration, e.g. underline              |
-| `--rui-Link--hover__color`           | Text color on hover                          |
-| `--rui-Link--hover__text-decoration` | Text decoration on hover                     |
-
-[React synthetic events]: https://reactjs.org/docs/events.html

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

@@ -1,4 +0,0 @@
-$link-color: var(--rui-Link__color);
-$link-text-decoration: var(--rui-Link__text-decoration);
-$link-hover-color: var(--rui-Link--hover__color);
-$link-hover-text-decoration: var(--rui-Link--hover__text-decoration);

package/src/lib/components/Link/index.js

@@ -1 +0,0 @@
-export { default } from './Link';