Ribbon labels now automatically position inside tables #1930

RELEASE-NOTES.md

@@ -67,6 +67,7 @@
 - **Popup** - Fixes issue where variation would not be added to a pre-existing popup even if specified in javascript #26011
 - **Transition** - Transition callbacks now all have the correct `this` set. #2758
 - **Search** - Calling `show results` programmatically no longer fails when input is not focused #2842
+- **Table/Label** - `ribbon labels` will now automatically position themselves when used inside a table #1930
 
 **[Community Bug Fixes](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
 - **API** - API debug is now `false` by default, like other modules. #2817

src/definitions/elements/label.less

@@ -370,9 +370,7 @@ a.ui.label {
   border-top-color: inherit;
 }
 
-
-
-/* Inside Image */
+/* Inside Table */
 .ui.image > .ribbon.label,
 .ui.card .image > .ribbon.label {
   position: absolute;
@@ -388,6 +386,15 @@ a.ui.label {
   padding-left: @horizontalPadding;
 }
 
+/* Inside Table */
+.ui.table td > .ui.ribbon.label {
+  left: @ribbonTableOffset;
+}
+.ui.table td > .ui[class*="right ribbon"].label {
+  left: @rightRibbonTableOffset;
+  padding-left: @horizontalPadding;
+}
+
 
 /*-------------------
       Attached

src/themes/default/elements/label.variables

@@ -126,7 +126,6 @@
 @tagTransition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Ribbon */
-@ribbonImageTopDistance: 1rem;
 @ribbonTriangleSize: 1.2em;
 @ribbonShadowColor: rgba(0, 0, 0, 0.15);
 
@@ -135,10 +134,16 @@
 @ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
 @rightRibbonOffset:  ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
 
+@ribbonImageTopDistance: 1rem;
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
 @rightRibbonImageOffset:  ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
 
+@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
+@ribbonTableOffset: ~"calc("-@ribbonTableMargin~" - "@ribbonTriangleSize~")";
+@rightRibbonTableOffset:  ~"calc(100% + "@ribbonTableMargin~" + "@ribbonTriangleSize~")";
+
+
 /* Colors */
 @redTextColor: @white;
 @orangeTextColor: @white;