fix(bal-radio): change link color to inverted when selected

baloise · Nov 25, 2022 · f1068ed · f1068ed
1 parent d0e726b
commit f1068ed
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts
@@ -141,6 +141,35 @@ const Template = args => ({
   </bal-field>`,
 })
 
+const Filter = args => ({
+  components: {
+    ...component.components,
+    BalField,
+    BalFieldControl,
+    BalFieldLabel,
+    BalFieldMessage,
+  },
+  setup: () => ({ args }),
+  template: `
+  <bal-field :disabled="args.disabled" :readonly="args.readonly" :inverted="args.inverted" :invalid="args.invalid">
+    <bal-field-label>Label</bal-field-label>
+    <bal-field-control>
+      <bal-checkbox-group :vertical="args.vertical" v-bind="args">
+        <bal-checkbox checked="args.checked">
+          Label
+        </bal-checkbox>
+        <bal-checkbox>
+          Label
+        </bal-checkbox>
+        <bal-checkbox>
+          Random text with a <a class="is-link" target="_blank" href="http://baloise.ch">Link</a> in it
+        </bal-checkbox>
+      </bal-checkbox-group>
+    </bal-field-control>
+    <bal-field-message :color="args.invalid ? 'danger' : 'hint'" v-if="args.hasFieldMessage">Field Message</bal-field-message>
+  </bal-field>`,
+})
+
 export const FieldControl = FieldTemplate.bind({})
 FieldControl.args = {
   content: 'Label',
@@ -170,7 +199,7 @@ Vertical.parameters = {
   controls: { exclude: excludedControls },
 }
 
-export const FilterButtons = Template.bind({})
+export const FilterButtons = Filter.bind({})
 FilterButtons.args = {
   content: 'Label',
   interface: 'select-button',

diff --git a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts
@@ -155,6 +155,7 @@ export const SelectButton = args => ({
     <bal-radio-group v-bind="args" v-model="args.value">
       <bal-radio name="select-button-example" value="yes">Yes</bal-radio>
       <bal-radio name="select-button-example" value="no">No</bal-radio>
+      <bal-radio name="select-button-example" value="with-link">Random text with a <a class="is-link" target="_blank" href="http://baloise.ch">Link</a> in it</bal-radio>
     </bal-radio-group>
   </bal-field-control>
   <bal-field-message :color="args.invalid ? 'danger' : 'hint'" v-if="args.hasFieldMessage">Field Message</bal-field-message>

diff --git a/packages/components/src/styles/components/radio-checkbox.sass b/packages/components/src/styles/components/radio-checkbox.sass
@@ -202,6 +202,10 @@
       background: var(--bal-color-grey-2)
   &--select-button#{&}--checked
     background: var(--bal-color-primary)
+    .bal-radio-checkbox__label
+      .bal-radio-checkbox__label__text
+        .is-link
+          color: var(--bal-color-white)
     &:hover
       background: var(--bal-color-light-blue-5)
     &:active