A design system in a box.
hip-ui.tngl.io/docs/introduction
fix button grouping
+20
-20
+10
-10
apps/docs/src/components/theme/useButtonStyles.ts
+10
-10
apps/docs/src/components/theme/useButtonStyles.ts
···
114
114
},
115
115
116
116
groupHorizontal: {
117
-
borderBottomLeftRadius: { ":not(:first-child)": 0 },
118
-
borderBottomRightRadius: { ":not(:last-child)": 0 },
119
-
borderLeftWidth: { ":not(:first-child)": 0 },
120
-
borderTopLeftRadius: { ":not(:first-child)": 0 },
121
-
borderTopRightRadius: { ":not(:last-child)": 0 },
117
+
borderBottomLeftRadius: { ":not(:first-child)": `0 !important` },
118
+
borderBottomRightRadius: { ":not(:last-child)": `0 !important` },
119
+
borderLeftWidth: { ":not(:first-child)": `0 !important` },
120
+
borderTopLeftRadius: { ":not(:first-child)": `0 !important` },
121
+
borderTopRightRadius: { ":not(:last-child)": `0 !important` },
122
122
},
123
123
secondaryGroupedHorizontal: {
124
124
borderRightColor: { ":not(:last-child)": uiColor.border2 },
125
125
},
126
126
groupVertical: {
127
-
borderBottomLeftRadius: { ":not(:last-child)": 0 },
128
-
borderBottomRightRadius: { ":not(:last-child)": 0 },
129
-
borderTopLeftRadius: { ":not(:first-child)": 0 },
130
-
borderTopRightRadius: { ":not(:first-child)": 0 },
131
-
borderTopWidth: { ":not(:first-child)": 0 },
127
+
borderBottomLeftRadius: { ":not(:last-child)": `0 !important` },
128
+
borderBottomRightRadius: { ":not(:last-child)": `0 !important` },
129
+
borderTopLeftRadius: { ":not(:first-child)": `0 !important` },
130
+
borderTopRightRadius: { ":not(:first-child)": `0 !important` },
131
+
borderTopWidth: { ":not(:first-child)": `0 !important` },
132
132
},
133
133
secondaryGroupedVertical: {
134
134
borderBottomColor: { ":not(:last-child)": uiColor.border2 },
+10
-10
packages/hip-ui/src/components/theme/useButtonStyles.ts
+10
-10
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
114
114
},
115
115
116
116
groupHorizontal: {
117
-
borderBottomLeftRadius: { ":not(:first-child)": 0 },
118
-
borderBottomRightRadius: { ":not(:last-child)": 0 },
119
-
borderLeftWidth: { ":not(:first-child)": 0 },
120
-
borderTopLeftRadius: { ":not(:first-child)": 0 },
121
-
borderTopRightRadius: { ":not(:last-child)": 0 },
117
+
borderBottomLeftRadius: { ":not(:first-child)": `0 !important` },
118
+
borderBottomRightRadius: { ":not(:last-child)": `0 !important` },
119
+
borderLeftWidth: { ":not(:first-child)": `0 !important` },
120
+
borderTopLeftRadius: { ":not(:first-child)": `0 !important` },
121
+
borderTopRightRadius: { ":not(:last-child)": `0 !important` },
122
122
},
123
123
secondaryGroupedHorizontal: {
124
124
borderRightColor: { ":not(:last-child)": uiColor.border2 },
125
125
},
126
126
groupVertical: {
127
-
borderBottomLeftRadius: { ":not(:last-child)": 0 },
128
-
borderBottomRightRadius: { ":not(:last-child)": 0 },
129
-
borderTopLeftRadius: { ":not(:first-child)": 0 },
130
-
borderTopRightRadius: { ":not(:first-child)": 0 },
131
-
borderTopWidth: { ":not(:first-child)": 0 },
127
+
borderBottomLeftRadius: { ":not(:last-child)": `0 !important` },
128
+
borderBottomRightRadius: { ":not(:last-child)": `0 !important` },
129
+
borderTopLeftRadius: { ":not(:first-child)": `0 !important` },
130
+
borderTopRightRadius: { ":not(:first-child)": `0 !important` },
131
+
borderTopWidth: { ":not(:first-child)": `0 !important` },
132
132
},
133
133
secondaryGroupedVertical: {
134
134
borderBottomColor: { ":not(:last-child)": uiColor.border2 },